fix: Fix issues with Cypress.require() and TypeScript (#25931)

Co-authored-by: cypress-bot[bot] <+cypress-bot[bot]@users.noreply.github.com>

cli/CHANGELOG.md

@@ -8,6 +8,10 @@ _Released 03/14/2023 (PENDING)_
 - It is now possible to control the number of connection attempts to the browser using the CYPRESS_CONNECT_RETRY_THRESHOLD Environment Variable. Learn more [here](https://docs.cypress.io/guides/references/advanced-installation#Environment-variables). Addressed in [#25848](https://github.com/cypress-io/cypress/pull/25848).
 - The Debug page is now able to show real-time results from in-progress runs.  Addresses [#25759](https://github.com/cypress-io/cypress/issues/25759).
 
+**Bugfixes:**
+
+- Fixed an issue where using `Cypress.require()` would throw the error `Cannot find module 'typescript'`. Fixes [#25885](https://github.com/cypress-io/cypress/issues/25885).
+
 **Misc:**
 
 - Removed "New" badge in the navigation bar for the debug page icon. Addresses [#25925](https://github.com/cypress-io/cypress/issues/25925)

npm/webpack-batteries-included-preprocessor/index.js

@@ -13,16 +13,16 @@ const hasTsLoader = (rules) => {
 
 const addTypeScriptConfig = (file, options) => {
   // shortcut if we know we've already added typescript support
-  if (options.__typescriptSupportAdded) return
+  if (options.__typescriptSupportAdded) return options
 
   const webpackOptions = options.webpackOptions
   const rules = webpackOptions.module && webpackOptions.module.rules
 
   // if there are no rules defined or it's not an array, we can't add to them
-  if (!rules || !Array.isArray(rules)) return
+  if (!rules || !Array.isArray(rules)) return options
 
   // if we find ts-loader configured, don't add it again
-  if (hasTsLoader(rules)) return
+  if (hasTsLoader(rules)) return options
 
   const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')
   // node will try to load a projects tsconfig.json instead of the node
@@ -57,6 +57,8 @@ const addTypeScriptConfig = (file, options) => {
   })]
 
   options.__typescriptSupportAdded = true
+
+  return options
 }
 
 /**
@@ -163,7 +165,7 @@ const preprocessor = (options = {}) => {
     options.webpackOptions = options.webpackOptions || getDefaultWebpackOptions()
 
     if (options.typescript) {
-      addTypeScriptConfig(file, options)
+      options = addTypeScriptConfig(file, options)
     }
 
     if (process.versions.pnp) {
@@ -181,13 +183,13 @@ preprocessor.defaultOptions = {
 }
 
 preprocessor.getFullWebpackOptions = (filePath, typescript) => {
-  const options = { typescript }
-
-  options.webpackOptions = getDefaultWebpackOptions()
+  const webpackOptions = getDefaultWebpackOptions()
 
-  addTypeScriptConfig({ filePath }, options)
+  if (typescript) {
+    return addTypeScriptConfig({ filePath }, { typescript, webpackOptions }).webpackOptions
+  }
 
-  return options.webpackOptions
+  return webpackOptions
 }
 
 // for testing purposes, but do not add this to the typescript interface

npm/webpack-batteries-included-preprocessor/package.json

@@ -4,7 +4,7 @@
   "description": "Cypress preprocessor for bundling JavaScript via webpack with dependencies included and support for various ES features, TypeScript, and CoffeeScript",
   "private": false,
   "scripts": {
-    "test": "mocha test/e2e/*.spec.* --timeout 4000",
+    "test": "mocha test/**/*.spec.* --timeout 4000",
     "lint": "eslint --ext .js,.ts,.json, ."
   },
   "dependencies": {

npm/webpack-batteries-included-preprocessor/test/e2e/features.spec.js

@@ -24,7 +24,7 @@ const runAndEval = async (fileName, options) => {
   eval(contents.toString())
 }
 
-describe('features', () => {
+describe('webpack-batteries-included-preprocessor features', () => {
   beforeEach(async () => {
     preprocessor.__reset()
 

npm/webpack-batteries-included-preprocessor/test/unit/index.spec.js

@@ -0,0 +1,22 @@
+const { expect } = require('chai')
+
+const preprocessor = require('../../index')
+
+describe('webpack-batteries-included-preprocessor', () => {
+  context('#getFullWebpackOptions', () => {
+    it('returns default webpack options (and does not add typescript config if no path specified)', () => {
+      const result = preprocessor.getFullWebpackOptions()
+
+      expect(result.node.global).to.be.true
+      expect(result.module.rules).to.have.length(3)
+      expect(result.resolve.extensions).to.eql(['.js', '.json', '.jsx', '.mjs', '.coffee'])
+    })
+
+    it('adds typescript config if path is specified', () => {
+      const result = preprocessor.getFullWebpackOptions('file/path', 'typescript/path')
+
+      expect(result.module.rules).to.have.length(4)
+      expect(result.module.rules[3].use[0].loader).to.include('ts-loader')
+    })
+  })
+})

packages/app/cypress/e2e/settings.cy.ts

@@ -156,8 +156,8 @@ describe('App: Settings', () => {
       cy.visitApp()
       cy.get(SidebarSettingsLinkSelector).click()
       cy.findByText('Project settings').click()
-      cy.get('[data-cy="file-match-indicator"]').contains('41 matches')
-      cy.get('[data-cy="spec-pattern"]').contains('tests/**/*')
+      cy.get('[data-cy="file-match-indicator"]').contains('19 matches')
+      cy.get('[data-cy="spec-pattern"]').contains('tests/**/*.(js|ts|coffee)')
     })
 
     it('shows the Experiments section', () => {
@@ -237,7 +237,7 @@ describe('App: Settings', () => {
 
       cy.get('[data-cy="config-code"]').within(() => {
         cy.get('[data-cy-config="config"]').contains('tests/_fixtures')
-        cy.get('[data-cy-config="config"]').contains('tests/**/*')
+        cy.get('[data-cy-config="config"]').contains('tests/**/*.(js|ts|coffee)')
         cy.get('[data-cy-config="config"]').contains('tests/_support/spec_helper.js')
         cy.get('[data-cy-config="env"]').contains('REMOTE_DEBUGGING_PORT')
         cy.get('[data-cy-config="env"]').contains('INTERNAL_E2E_TESTING_SELF')

packages/driver/src/cross-origin/origin_fn.ts

@@ -82,8 +82,13 @@ const getCallbackFn = async (fn: string, file?: string) => {
   // in the outer scope (see the return value below), assign the function to it
   // in the inner scope, then call the function with the args
   const callbackName = '__cypressCallback'
+
   const response = await fetch('/__cypress/process-origin-callback', {
-    body: JSON.stringify({ file, fn: `${callbackName} = ${fn};` }),
+    body: JSON.stringify({
+      file,
+      fn: `${callbackName} = ${fn};`,
+      projectRoot: Cypress.config('projectRoot'),
+    }),
     headers: {
       'Content-Type': 'application/json',
     },

packages/server/lib/cross-origin/process-callback.ts → packages/server/lib/plugins/child/cross_origin.js

@@ -1,22 +1,19 @@
-import { getFullWebpackOptions } from '@cypress/webpack-batteries-included-preprocessor'
-import md5 from 'md5'
-import { fs } from 'memfs'
-import * as path from 'path'
-import webpack from 'webpack'
-
+const md5 = require('md5')
+const { fs } = require('memfs')
+const path = require('path')
+const webpack = require('webpack')
 const VirtualModulesPlugin = require('webpack-virtual-modules')
 
-interface Options {
-  file: string
-  fn: string
-}
+const resolve = require('../../util/resolve')
 
-// @ts-expect-error - webpack expects `fs.join` to exist for some reason
 fs.join = path.join
 
-export const processCallback = ({ file, fn }: Options) => {
+const processCallback = ({ file, fn, projectRoot }) => {
+  const { getFullWebpackOptions } = require('@cypress/webpack-batteries-included-preprocessor')
+
   const source = fn.replace(/Cypress\.require/g, 'require')
-  const webpackOptions = getFullWebpackOptions(file, require.resolve('typescript'))
+  const typescriptPath = resolve.typescript(projectRoot)
+  const webpackOptions = getFullWebpackOptions(file, typescriptPath)
 
   const inputFileName = md5(source)
   const inputDir = path.dirname(file)
@@ -45,17 +42,16 @@ export const processCallback = ({ file, fn }: Options) => {
 
   const compiler = webpack(modifiedWebpackOptions)
 
-  // @ts-expect-error
   compiler.outputFileSystem = fs
 
-  return new Promise<string>((resolve, reject) => {
-    const handle = (err: Error) => {
+  return new Promise((resolve, reject) => {
+    const handle = (err) => {
       if (err) {
         return reject(err)
       }
 
-      // Using an in-memory file system, so the usual restrictions on sync
-      // methods don't apply, since this won't throw an EMFILE error
+      // this won't throw an EMFILE error since it's using an in-memory file
+      // system, so the usual restrictions on sync methods don't apply
       // eslint-disable-next-line no-restricted-syntax
       const result = fs.readFileSync(outputPath).toString()
 
@@ -65,3 +61,7 @@ export const processCallback = ({ file, fn }: Options) => {
     compiler.run(handle)
   })
 }
+
+module.exports = {
+  processCallback,
+}

packages/server/lib/plugins/child/run_plugins.js

@@ -14,6 +14,7 @@ const resolve = require('../../util/resolve')
 const browserLaunch = require('./browser_launch')
 const util = require('../util')
 const validateEvent = require('./validate_event')
+const crossOrigin = require('./cross_origin')
 
 const UNDEFINED_SERIALIZED = '__cypress_undefined__'
 
@@ -37,23 +38,25 @@ class RunPlugins {
     this.registeredEventsByName = {}
   }
 
-  invoke = (eventId, args = []) => {
-    const event = this.registeredEventsById[eventId]
-
-    return event.handler(...args)
-  }
-
-  getDefaultPreprocessor (config) {
-    const tsPath = resolve.typescript(config.projectRoot)
-    const options = {
-      ...tsPath && { typescript: tsPath },
+  /**
+   * This is the only publicly-used method of this class
+   *
+   * @param {Object} config
+   * @param {Function} setupNodeEventsFn
+   */
+  runSetupNodeEvents (config, setupNodeEventsFn) {
+    debug('project root:', this.projectRoot)
+    if (!this.projectRoot) {
+      throw new Error('Unexpected: projectRoot should be a string')
     }
 
-    debug('creating webpack preprocessor with options %o', options)
+    debug('passing config %o', config)
 
-    const webpackPreprocessor = require('@cypress/webpack-batteries-included-preprocessor')
+    this.ipc.on('execute:plugins', (event, ids, args) => {
+      this.execute(event, ids, args)
+    })
 
-    return webpackPreprocessor(options)
+    return this.load(config, setupNodeEventsFn)
   }
 
   load (initialConfig, setupNodeEvents) {
@@ -110,8 +113,9 @@ class RunPlugins {
     // events used for parent/child communication
     registerChildEvent('_get:task:body', () => {})
     registerChildEvent('_get:task:keys', () => {})
+    registerChildEvent('_process:cross:origin:callback', crossOrigin.processCallback)
 
-    Promise
+    return Promise
     .try(() => {
       debug('Calling setupNodeEvents')
 
@@ -120,7 +124,7 @@ class RunPlugins {
     .tap(() => {
       if (!this.registeredEventsByName['file:preprocessor']) {
         debug('register default preprocessor')
-        registerChildEvent('file:preprocessor', this.getDefaultPreprocessor(initialConfig))
+        registerChildEvent('file:preprocessor', this._getDefaultPreprocessor(initialConfig))
       }
     })
     .then((modifiedCfg) => {
@@ -156,6 +160,7 @@ class RunPlugins {
       case 'after:run':
       case 'after:spec':
       case 'after:screenshot':
+      case '_process:cross:origin:callback':
         return util.wrapChildPromise(this.ipc, this.invoke, ids, args)
       case 'task':
         return this.taskExecute(ids, args)
@@ -172,6 +177,12 @@ class RunPlugins {
     }
   }
 
+  invoke = (eventId, args = []) => {
+    const event = this.registeredEventsById[eventId]
+
+    return event.handler(...args)
+  }
+
   wrapChildPromise (invoke, ids, args = []) {
     return Promise.try(() => {
       return invoke(ids.eventId, args)
@@ -191,9 +202,9 @@ class RunPlugins {
 
   taskGetBody (ids, args) {
     const [event] = args
-    const taskEvent = _.find(this.registeredEventsById, { event: 'task' }).handler
+    const taskEvent = _.find(this.registeredEventsById, { event: 'task' })
     const invoke = () => {
-      const fn = taskEvent[event]
+      const fn = taskEvent && taskEvent.handler[event]
 
       return _.isFunction(fn) ? fn.toString() : ''
     }
@@ -202,8 +213,8 @@ class RunPlugins {
   }
 
   taskGetKeys (ids) {
-    const taskEvent = _.find(this.registeredEventsById, { event: 'task' }).handler
-    const invoke = () => _.keys(taskEvent)
+    const taskEvent = _.find(this.registeredEventsById, { event: 'task' })
+    const invoke = () => _.keys(taskEvent ? taskEvent.handler : {})
 
     util.wrapChildPromise(this.ipc, invoke, ids)
   }
@@ -241,22 +252,17 @@ class RunPlugins {
     util.wrapChildPromise(this.ipc, invoke, ids, [arg])
   }
 
-  /**
-   *
-   * @param {Function} setupNodeEventsFn
-   */
-  runSetupNodeEvents (config, setupNodeEventsFn) {
-    debug('project root:', this.projectRoot)
-    if (!this.projectRoot) {
-      throw new Error('Unexpected: projectRoot should be a string')
+  _getDefaultPreprocessor (config) {
+    const tsPath = resolve.typescript(config.projectRoot)
+    const options = {
+      ...tsPath && { typescript: tsPath },
     }
 
-    debug('passing config %o', config)
-    this.load(config, setupNodeEventsFn)
+    debug('creating webpack preprocessor with options %o', options)
 
-    this.ipc.on('execute:plugins', (event, ids, args) => {
-      this.execute(event, ids, args)
-    })
+    const webpackPreprocessor = require('@cypress/webpack-batteries-included-preprocessor')
+
+    return webpackPreprocessor(options)
   }
 }
 

packages/server/lib/plugins/child/validate_event.js

@@ -26,6 +26,7 @@ const isObject = (event, handler) => {
 const eventValidators = {
   '_get:task:body': isFunction,
   '_get:task:keys': isFunction,
+  '_process:cross:origin:callback': isFunction,
   'after:run': isFunction,
   'after:screenshot': isFunction,
   'after:spec': isFunction,

packages/server/lib/routes-e2e.ts

@@ -11,7 +11,7 @@ import reporter from './controllers/reporter'
 import client from './controllers/client'
 import files from './controllers/files'
 import type { InitializeRoutes } from './routes'
-import { processCallback } from './cross-origin/process-callback'
+import * as plugins from './plugins'
 
 const debug = Debug('cypress:server:routes-e2e')
 
@@ -54,11 +54,11 @@ export const createRoutesE2E = ({
 
   routesE2E.post(`/${config.namespace}/process-origin-callback`, bodyParser.json(), async (req, res) => {
     try {
-      const { file, fn } = req.body
+      const { file, fn, projectRoot } = req.body
 
       debug('process origin callback: %s', fn)
 
-      const contents = await processCallback({ file, fn })
+      const contents = await plugins.execute('_process:cross:origin:callback', { file, fn, projectRoot })
 
       res.json({ contents })
     } catch (err) {