Cross Origin Error (Vite 3.0.0-beta.10)

Describe the bug

Hi,

We use Vite for development in Cypress, and as part of the Component Testing product. We build @cypress/vite-dev-server to facilitate Component Testing with Vite as a dev server.

I’m excited for Vite 3, and tried it out. I’m running into this error, that I didn’t previously see in Vite 2:

Uncaught DOMException: Blocked a frame with origin "http://localhost:4455" from accessing a cross-origin frame.
    at http://localhost:4455/__cypress/iframes//tmp/cy-projects/vite-3-react/src/App.cy.jsx:15:49

I’m not expecting the Vite team to fix this for me, more looking for info on

1. What change in Vite 3 might be leading to this?
2. How I can contribute a fix

I included a reproduction, but it’s not exactly minimal, since it needs our dev-server and surrounding code to reproduce.

I can look to make a more minimal one if needed, but if someone more familiar with Vite’s code could suggest what might be leading to this problem, I can either patch it and/or work around it myself.

I’m guessing this isn’t a straight up bug, but a side effect or some internals we are relying on. Hoping to figure something out before we move Vite to 3.0.0.

Reproduction

https://github.com/cypress-io/cypress/pull/22748

System Info

1. Clone branch from above repo
2. `yarn`
3. `cd npm/vite-dev-server`
4. `yarn cypress:run --spec cypress/e2e/react.cy.ts --headed`

Only Vite 3 fails - you can see the error in the console.

Used Package Manager

yarn

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sodatea]

It’s landed in alpha.12 😂 I now have no idea why I thought alpha.11 was the buggy version… Sorry for the confusion.

[sodatea]

diff --git a/npm/vite-dev-server/cypress/e2e/react.cy.ts b/npm/vite-dev-server/cypress/e2e/react.cy.ts
index 6b7a3434ea..c5cd2e444f 100644
--- a/npm/vite-dev-server/cypress/e2e/react.cy.ts
+++ b/npm/vite-dev-server/cypress/e2e/react.cy.ts
@@ -21,7 +21,7 @@ for (const project of VITE_REACT) {
       cy.startAppServer('component')
     })
 
-    it('should mount a passing test', () => {
+    it.only('should mount a passing test', () => {
       cy.visitApp()
       cy.contains('App.cy.jsx').click()
       cy.waitForSpecToFinish()
diff --git a/npm/vite-dev-server/src/plugins/cypress.ts b/npm/vite-dev-server/src/plugins/cypress.ts
index 4ba23ad3ae..8de5ca0b4a 100644
--- a/npm/vite-dev-server/src/plugins/cypress.ts
+++ b/npm/vite-dev-server/src/plugins/cypress.ts
@@ -71,11 +71,10 @@ export const Cypress = (
     configureServer: async (server: ViteDevServer) => {
       server.middlewares.use(`${base}index.html`, async (req, res) => {
         let transformedIndexHtml = await server.transformIndexHtml(base, '')
-        const viteImport = `<script type="module" src="${options.cypressConfig.devServerPublicPathRoute}/@vite/client"></script>`
 
         // If we're doing cy-in-cy, we need to be able to access the Cypress instance from the parent frame.
         if (process.env.CYPRESS_INTERNAL_VITE_OPEN_MODE_TESTING) {
-          transformedIndexHtml = transformedIndexHtml.replace(viteImport, `<script>document.domain = 'localhost';</script>${viteImport}`)
+          transformedIndexHtml = transformedIndexHtml.replace('<title>', `<script>document.domain = 'localhost';</script><title>`)
         }
 
         return res.end(transformedIndexHtml)
diff --git a/system-tests/projects/vite-3-react/package.json b/system-tests/projects/vite-3-react/package.json
index 74aa83cf34..b45b5f904b 100644
--- a/system-tests/projects/vite-3-react/package.json
+++ b/system-tests/projects/vite-3-react/package.json
@@ -5,7 +5,7 @@
   },
   "devDependencies": {
     "@cypress/vite-dev-server": "file:../../../npm/vite-dev-server",
-    "vite": "3.0.0-beta.10"
+    "vite": "3.0.0"
   },
   "projectFixtureDirectory": "react"
 }
diff --git a/system-tests/projects/vite-3-react/yarn.lock b/system-tests/projects/vite-3-react/yarn.lock
index 6811d1e3ec..f7a809ed08 100644
--- a/system-tests/projects/vite-3-react/yarn.lock
+++ b/system-tests/projects/vite-3-react/yarn.lock
@@ -308,10 +308,10 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
-vite@3.0.0-beta.10:
-  version "3.0.0-beta.10"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-3.0.0-beta.10.tgz#80d62a81a15bb755ca7d304cc0a56281acaec2be"
-  integrity sha512-QtzSQVuhNLDp9j4wNdVT3aDyWyvoAL4QxBU/lnMyEKqTzYrXdqyHpFmfWW/wo/0uTluZKzbsUm89eQq2RxiKMg==
+vite@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-3.0.0.tgz#b4675cb9ab83ec0803b9c952ffa6519bcce033a7"
+  integrity sha512-M7phQhY3+fRZa0H+1WzI6N+/onruwPTBTMvaj7TzgZ0v2TE+N2sdLKxJOfOv9CckDWt5C4HmyQP81xB4dwRKzA==
   dependencies:
     esbuild "^0.14.47"
     postcss "^8.4.14"

The fix that actually worked is in this file: npm/vite-dev-server/src/plugins/cypress.ts:

-          transformedIndexHtml = transformedIndexHtml.replace(viteImport, `<script>document.domain = 'localhost';</script>${viteImport}`)
+          transformedIndexHtml = transformedIndexHtml.replace('<title>', `<script>document.domain = 'localhost';</script><title>`)

The change in Vite 3 causing this issue is: https://github.com/vitejs/vite/pull/6901