fix: Address Vite sourcemap edge cases (#24063)

npm/vite-dev-server/cypress/e2e/vite-dev-server.cy.ts

@@ -1,5 +1,7 @@
 /// <reference path="../support/e2e.ts" />
 
+import dedent from 'dedent'
+
 describe('Config options', () => {
   it('supports supportFile = false', () => {
     cy.scaffoldProject('vite2.9.1-react')
@@ -75,3 +77,68 @@ describe('Config options', () => {
     })
   })
 })
+
+describe('sourcemaps', () => {
+  it('should be provided for JS and transpiled files', () => {
+    const testContent = dedent`
+      describe('spec file with import', () => {
+        it('should generate uncaught error', () => {
+          throw new Error('uncaught')
+        })
+      
+        it('should generate failed command', () => {
+          cy.get('#does-not-exist', { timeout: 100 })
+        })
+      })
+    `
+
+    cy.scaffoldProject('vite3.0.2-react')
+    cy.openProject('vite3.0.2-react', ['--config-file', 'cypress-vite.config.ts'])
+    cy.startAppServer('component')
+
+    cy.withCtx(async (ctx, o) => {
+      await ctx.actions.file.writeFileInProject(
+        'JsErrorSpec.cy.js',
+        o.testContent,
+      )
+
+      await ctx.actions.file.writeFileInProject(
+        'JsWithImportErrorSpec.cy.js',
+        `import React from 'react';\n\n${o.testContent}`,
+      )
+
+      await ctx.actions.file.writeFileInProject(
+        'JsxErrorSpec.cy.jsx',
+        o.testContent,
+      )
+
+      await ctx.actions.file.writeFileInProject(
+        'TsErrorSpec.cy.ts',
+        `type MyType = { value: string }\n\n${o.testContent}`,
+      )
+
+      await ctx.actions.file.writeFileInProject(
+        'TsxErrorSpec.cy.tsx',
+        `type MyType = { value: string }\n\n${o.testContent}`,
+      )
+    }, { testContent })
+
+    const verifySourcemap = (specName: string, line: number, column: number) => {
+      cy.visitApp()
+      cy.contains(specName).click()
+      cy.waitForSpecToFinish()
+      cy.get('.failed > .num').should('contain', 2)
+      cy.get('.runnable-err-file-path', { timeout: 250 }).should('contain', `${specName}:${line}:${column}`)
+    }
+
+    verifySourcemap('JsErrorSpec.cy.js', 7, 9)
+
+    verifySourcemap('JsWithImportErrorSpec.cy.js', 9, 9)
+
+    verifySourcemap('JsxErrorSpec.cy.jsx', 7, 8)
+
+    verifySourcemap('TsErrorSpec.cy.ts', 9, 8)
+
+    verifySourcemap('TsxErrorSpec.cy.tsx', 9, 8)
+  })
+})

npm/vite-dev-server/src/plugins/cypress.ts

@@ -105,27 +105,6 @@ export const Cypress = (
         return res.end(transformedIndexHtml)
       })
     },
-    transform (code, id, options?) {
-      try {
-        if (/\.js$/i.test(id) && !/\/\/# sourceMappingURL=/i.test(code)) {
-          // The Vite dev server and plugins automatically transpile TS and JSX files, which results in sourcemaps being generated
-          // and included in output. However, Vite serves up `esnext`-compliant Javascript which means many JS files won't be
-          // transpiled and won't supply a sourcemap - this prevents Cypress from providing codeFrames in the event of an error.
-          //
-          // A sourcemap is generated by Vite for JS files (just not included) which is in effect an "identity" sourcemap mapping
-          // 1-to-1 to the output file. We can grab this and pass it along as a sourcemap we want Vite to embed into the output,
-          // giving Cypress a sourcemap to use for codeFrame lookups.
-          // @see https://rollupjs.org/guide/en/#thisgetcombinedsourcemap
-
-          return {
-            code,
-            map: this.getCombinedSourcemap(),
-          }
-        }
-      } catch (_err) {
-        debug('Failed to propagate sourcemap for %s: %o', id, _err)
-      }
-    },
     handleHotUpdate: ({ server, file }) => {
       debug('handleHotUpdate - file', file)
 

npm/vite-dev-server/src/plugins/index.ts

@@ -1,3 +1,5 @@
 export * from './inspect'
 
 export * from './cypress'
+
+export * from './sourcemap'

npm/vite-dev-server/src/plugins/sourcemap.ts

@@ -0,0 +1,51 @@
+import debugFn from 'debug'
+import type { Plugin } from 'vite'
+import type { Vite } from '../getVite'
+
+import type { ViteDevServerConfig } from '../devServer'
+
+const debug = debugFn('cypress:vite-dev-server:plugins:sourcemap')
+
+export const CypressSourcemap = (
+  options: ViteDevServerConfig,
+  vite: Vite,
+): Plugin => {
+  return {
+    name: 'cypress:sourcemap',
+    enforce: 'post',
+    transform (code, id, options?) {
+      try {
+        if (/\.js$/i.test(id) && !/\/\/# sourceMappingURL=/i.test(code)) {
+          /*
+          The Vite dev server and plugins automatically generate sourcemaps for most files, but they are
+          only included in the served files if any transpilation actually occurred (JSX, TS, etc). This
+          means that files that are "pure" JS won't include sourcemaps, so JS spec files that don't require
+          transpilation won't get code frames in the runner.
+
+          A sourcemap for these files is generated (just not served) which is in effect an "identity"
+          sourcemap mapping 1-to-1 to the output file. We can grab this and pass it along as a sourcemap
+          we want Vite to embed into the output, giving Cypress a sourcemap to use for codeFrame lookups.
+          @see https://rollupjs.org/guide/en/#thisgetcombinedsourcemap
+
+          We utilize a 'post' plugin here and manually append the sourcemap content to the code. We *should*
+          be able to pass the sourcemap along using the `map` attribute in the return value, but Babel-based
+          plugins don't work with this which causes sourcemaps to break for files that go through common
+          plugins like `@vitejs/plugin-react`. By manually appending the sourcemap at this point in time
+          Babel-transformed files end up with correct sourcemaps.
+          */
+
+          const sourcemap = this.getCombinedSourcemap()
+
+          code += `\n//# sourceMappingURL=${sourcemap.toUrl()}`
+
+          return {
+            code,
+            map: { mappings: '' },
+          }
+        }
+      } catch (_err) {
+        debug('Failed to propagate sourcemap for %s: %o', id, _err)
+      }
+    },
+  }
+}

npm/vite-dev-server/src/resolveConfig.ts

@@ -11,7 +11,7 @@ import path from 'path'
 
 import { configFiles } from './constants'
 import type { ViteDevServerConfig } from './devServer'
-import { Cypress, CypressInspect } from './plugins/index'
+import { Cypress, CypressInspect, CypressSourcemap } from './plugins/index'
 import type { Vite } from './getVite'
 
 const debug = debugFn('cypress:vite-dev-server:resolve-config')
@@ -87,6 +87,7 @@ export const createViteDevServerConfig = async (config: ViteDevServerConfig, vit
     plugins: [
       Cypress(config, vite),
       CypressInspect(config),
+      CypressSourcemap(config, vite),
     ].filter((p) => p != null),
   }
 

npm/vite-dev-server/test/resolveConfig.spec.ts

@@ -55,8 +55,8 @@ describe('resolveConfig', function () {
 
       const viteConfig = await createViteDevServerConfig(viteDevServerConfig, vite)
 
-      expect(viteConfig.plugins).to.have.lengthOf(1)
-      expect(viteConfig.plugins[0].name).to.equal('cypress:main')
+      expect(viteConfig.plugins).to.have.lengthOf(2)
+      expect(viteConfig.plugins.map((plugin) => plugin.name)).not.to.contain('cypress:inspect')
     })
 
     context('with CYPRESS_INTERNAL_VITE_INSPECT provided', () => {
@@ -74,8 +74,8 @@ describe('resolveConfig', function () {
 
         const viteConfig = await createViteDevServerConfig(viteDevServerConfig, vite)
 
-        expect(viteConfig.plugins).to.have.lengthOf(2)
-        expect(viteConfig.plugins[1].name).to.equal('cypress:inspect')
+        expect(viteConfig.plugins).to.have.lengthOf(3)
+        expect(viteConfig.plugins.map((plugin) => plugin.name)).to.contain('cypress:inspect')
       })
 
       it('should not add inspect plugin if not installed', async () => {
@@ -84,8 +84,8 @@ describe('resolveConfig', function () {
 
         const viteConfig = await createViteDevServerConfig(viteDevServerConfig, vite)
 
-        expect(viteConfig.plugins).to.have.lengthOf(1)
-        expect(viteConfig.plugins[0].name).to.equal('cypress:main')
+        expect(viteConfig.plugins).to.have.lengthOf(2)
+        expect(viteConfig.plugins.map((plugin) => plugin.name)).not.to.contain('cypress:inspect')
       })
     })
   })