From 628949ce397130c209ad0c85a459954d9f938cb5 Mon Sep 17 00:00:00 2001
From: Lachlan Miller <lachlan.miller.1990@outlook.com>
Date: Mon, 6 Jun 2022 17:07:58 +1000
Subject: [PATCH 01/16] fix: support ESM projects using TypeScript with
 ts-node/esm

---
 .../data-context/src/data/ProjectConfigIpc.ts | 24 +++++++++++++++++++
 .../src/data/ProjectConfigManager.ts          | 15 ++++++++----
 .../server/lib/plugins/child/run_plugins.js   |  1 -
 packages/server/lib/plugins/child/ts_node.js  |  1 -
 4 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/packages/data-context/src/data/ProjectConfigIpc.ts b/packages/data-context/src/data/ProjectConfigIpc.ts
index ca82ed4f3f09..78417359f69d 100644
--- a/packages/data-context/src/data/ProjectConfigIpc.ts
+++ b/packages/data-context/src/data/ProjectConfigIpc.ts
@@ -3,6 +3,7 @@ import { CypressError, getError } from '@packages/errors'
 import type { FullConfig, TestingType } from '@packages/types'
 import { ChildProcess, fork, ForkOptions } from 'child_process'
 import EventEmitter from 'events'
+import fs from 'fs-extra'
 import path from 'path'
 import inspector from 'inspector'
 import debugLib from 'debug'
@@ -13,6 +14,7 @@ const pkg = require('@packages/root')
 const debug = debugLib(`cypress:lifecycle:ProjectConfigIpc`)
 
 const CHILD_PROCESS_FILE_PATH = require.resolve('@packages/server/lib/plugins/child/require_async_child')
+const tsNodeEsm = require.resolve('ts-node/esm')
 
 export type IpcHandler = (ipc: ProjectConfigIpc) => void
 
@@ -238,6 +240,28 @@ export class ProjectConfigIpc extends EventEmitter {
 
     debug('fork child process %o', { CHILD_PROCESS_FILE_PATH, configProcessArgs, childOptions: _.omit(childOptions, 'env') })
 
+    const pkgJson = fs.readJsonSync(path.join(this.projectRoot, 'package.json'))
+
+    if (pkgJson.type === 'module') {
+      if (!childOptions.env) {
+        childOptions.env = {}
+      }
+
+      // Use the ts-node/esm loader so they can use TypeScript with `"type": "module".
+      // The loader API is experimental and will change.
+      // The same can be said for the other alternative, esbuild, so this is the
+      // best option that leverages the existing modules we bundle in the binary.
+      // @see ts-node esm loader https://typestrong.org/ts-node/docs/usage/#node-flags-and-other-tools
+      // @see Node.js Loader API https://nodejs.org/api/esm.html#customizing-esm-specifier-resolution-algorithm
+      const tsNodeEsmLoader = `--experimental-specifier-resolution=node --loader ${tsNodeEsm}`
+
+      if (childOptions.env.NODE_OPTIONS) {
+        childOptions.env.NODE_OPTIONS += ` ${tsNodeEsmLoader}`
+      } else {
+        childOptions.env.NODE_OPTIONS = tsNodeEsmLoader
+      }
+    }
+
     const proc = fork(CHILD_PROCESS_FILE_PATH, configProcessArgs, childOptions)
 
     return proc
diff --git a/packages/data-context/src/data/ProjectConfigManager.ts b/packages/data-context/src/data/ProjectConfigManager.ts
index 1ae545c3dd1f..21a9e644f19a 100644
--- a/packages/data-context/src/data/ProjectConfigManager.ts
+++ b/packages/data-context/src/data/ProjectConfigManager.ts
@@ -260,10 +260,17 @@ export class ProjectConfigManager {
         this._eventsIpc.cleanupIpc()
       }
 
-      this._eventsIpc = new ProjectConfigIpc(this.options.ctx.nodePath, this.options.projectRoot, this.configFilePath, this.options.configFile, (cypressError: CypressError, title?: string | undefined) => {
-        this._state = 'errored'
-        this.options.ctx.onError(cypressError, title)
-      }, this.options.ctx.onWarning)
+      this._eventsIpc = new ProjectConfigIpc(
+        this.options.ctx.nodePath,
+        this.options.projectRoot,
+        this.configFilePath,
+        this.options.configFile,
+        (cypressError: CypressError, title?: string | undefined) => {
+          this._state = 'errored'
+          this.options.ctx.onError(cypressError, title)
+        },
+        this.options.ctx.onWarning,
+      )
 
       this._loadConfigPromise = this._eventsIpc.loadConfig()
     }
diff --git a/packages/server/lib/plugins/child/run_plugins.js b/packages/server/lib/plugins/child/run_plugins.js
index 0b6ac4af617c..ab310193ed1a 100644
--- a/packages/server/lib/plugins/child/run_plugins.js
+++ b/packages/server/lib/plugins/child/run_plugins.js
@@ -1,4 +1,3 @@
-// @ts-check
 // this module is responsible for loading the plugins file
 // and running the exported function to register event handlers
 // and executing any tasks that the plugin registers
diff --git a/packages/server/lib/plugins/child/ts_node.js b/packages/server/lib/plugins/child/ts_node.js
index 982909426db3..dcfd558e8c36 100644
--- a/packages/server/lib/plugins/child/ts_node.js
+++ b/packages/server/lib/plugins/child/ts_node.js
@@ -1,4 +1,3 @@
-// @ts-check
 const debugLib = require('debug')
 const path = require('path')
 const tsnode = require('ts-node')

From ca6d01fc29b18910fcf2b331d45ec4fd4b2b8f3a Mon Sep 17 00:00:00 2001
From: Lachlan Miller <lachlan.miller.1990@outlook.com>
Date: Mon, 6 Jun 2022 17:40:16 +1000
Subject: [PATCH 02/16] better error handling

---
 packages/data-context/src/data/ProjectConfigIpc.ts | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/data-context/src/data/ProjectConfigIpc.ts b/packages/data-context/src/data/ProjectConfigIpc.ts
index 78417359f69d..1b27155d5b73 100644
--- a/packages/data-context/src/data/ProjectConfigIpc.ts
+++ b/packages/data-context/src/data/ProjectConfigIpc.ts
@@ -240,9 +240,18 @@ export class ProjectConfigIpc extends EventEmitter {
 
     debug('fork child process %o', { CHILD_PROCESS_FILE_PATH, configProcessArgs, childOptions: _.omit(childOptions, 'env') })
 
-    const pkgJson = fs.readJsonSync(path.join(this.projectRoot, 'package.json'))
+    let isProjectUsingESModules = false
 
-    if (pkgJson.type === 'module') {
+    try {
+      const pkgJson = fs.readJsonSync(path.join(this.projectRoot, 'package.json'))
+
+      isProjectUsingESModules = pkgJson.type === 'module'
+    } catch (e) {
+      // project does not have `package.json` or it was not found
+      // reasonable to assume not using es modules
+    }
+
+    if (isProjectUsingESModules) {
       if (!childOptions.env) {
         childOptions.env = {}
       }

From 181a359a029af49ef1a5c24d8a21f918d9a327f7 Mon Sep 17 00:00:00 2001
From: Lachlan Miller <lachlan.miller.1990@outlook.com>
Date: Mon, 6 Jun 2022 19:38:43 +1000
Subject: [PATCH 03/16] fix test

---
 .../config-cjs-and-esm/config-with-ts-module/package.json  | 3 ++-
 .../config-cjs-and-esm/config-with-ts-module/tsconfig.json | 7 +++++++
 .../config-cjs-and-esm/config-with-ts-module/yarn.lock     | 5 +++++
 system-tests/test/config_modules_spec.ts                   | 3 +--
 4 files changed, 15 insertions(+), 3 deletions(-)
 create mode 100644 system-tests/projects/config-cjs-and-esm/config-with-ts-module/tsconfig.json

diff --git a/system-tests/projects/config-cjs-and-esm/config-with-ts-module/package.json b/system-tests/projects/config-cjs-and-esm/config-with-ts-module/package.json
index bfdb19123131..a3ceda454f1a 100644
--- a/system-tests/projects/config-cjs-and-esm/config-with-ts-module/package.json
+++ b/system-tests/projects/config-cjs-and-esm/config-with-ts-module/package.json
@@ -1,6 +1,7 @@
 {
   "dependencies": {
-    "find-up": "6.3.0"
+    "find-up": "6.3.0",
+    "typescript": "4.7.3"
   },
   "type": "module"
 }
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-ts-module/tsconfig.json b/system-tests/projects/config-cjs-and-esm/config-with-ts-module/tsconfig.json
new file mode 100644
index 000000000000..a57d77a8ec65
--- /dev/null
+++ b/system-tests/projects/config-cjs-and-esm/config-with-ts-module/tsconfig.json
@@ -0,0 +1,7 @@
+{
+	"compilerOptions": {
+		"module": "esnext",
+		"lib": ["es6"],
+		"moduleResolution": "node"
+	}
+}
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-ts-module/yarn.lock b/system-tests/projects/config-cjs-and-esm/config-with-ts-module/yarn.lock
index ffbb99ff595c..45c050b2a6f0 100644
--- a/system-tests/projects/config-cjs-and-esm/config-with-ts-module/yarn.lock
+++ b/system-tests/projects/config-cjs-and-esm/config-with-ts-module/yarn.lock
@@ -36,6 +36,11 @@ path-exists@^5.0.0:
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-5.0.0.tgz#a6aad9489200b21fab31e49cf09277e5116fb9e7"
   integrity "sha1-pqrZSJIAsh+rMeSc8JJ35RFvuec= sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ=="
 
+typescript@4.7.3:
+  version "4.7.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.3.tgz#8364b502d5257b540f9de4c40be84c98e23a129d"
+  integrity sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA==
+
 yocto-queue@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-1.0.0.tgz#7f816433fb2cbc511ec8bf7d263c3b58a1a3c251"
diff --git a/system-tests/test/config_modules_spec.ts b/system-tests/test/config_modules_spec.ts
index fc727a36c8ea..f37585c9cb4d 100644
--- a/system-tests/test/config_modules_spec.ts
+++ b/system-tests/test/config_modules_spec.ts
@@ -22,7 +22,6 @@ describe('cypress config with esm and cjs', function () {
     })
   })
 
-  // TODO: add support for ts-node/esm https://github.com/cypress-io/cypress/issues/21939
   ;[
     'config-cjs-and-esm/config-with-ts-module',
   ].forEach((project) => {
@@ -31,7 +30,7 @@ describe('cypress config with esm and cjs', function () {
       testingType: 'e2e',
       spec: 'app.cy.js',
       browser: 'chrome',
-      expectedExitCode: 1,
+      expectedExitCode: 0,
     })
   })
 

From a919b4b1c81c4c85736b41f6a69aad50bb2faca9 Mon Sep 17 00:00:00 2001
From: Lachlan Miller <lachlan.miller.1990@outlook.com>
Date: Mon, 6 Jun 2022 19:46:30 +1000
Subject: [PATCH 04/16] indentation

---
 .../config-with-ts-module/tsconfig.json                | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/system-tests/projects/config-cjs-and-esm/config-with-ts-module/tsconfig.json b/system-tests/projects/config-cjs-and-esm/config-with-ts-module/tsconfig.json
index a57d77a8ec65..7c3d58f844b4 100644
--- a/system-tests/projects/config-cjs-and-esm/config-with-ts-module/tsconfig.json
+++ b/system-tests/projects/config-cjs-and-esm/config-with-ts-module/tsconfig.json
@@ -1,7 +1,7 @@
 {
-	"compilerOptions": {
-		"module": "esnext",
-		"lib": ["es6"],
-		"moduleResolution": "node"
-	}
+  "compilerOptions": {
+    "module": "esnext",
+    "lib": ["es6"],
+    "moduleResolution": "node"
+  }
 }

From 342bfde01b22aa705dccaf9da56b6a6cc37c1d30 Mon Sep 17 00:00:00 2001
From: Lachlan Miller <lachlan.miller.1990@outlook.com>
Date: Tue, 7 Jun 2022 12:50:31 +1000
Subject: [PATCH 05/16] register ts-node via --require hook

---
 .../data-context/src/data/ProjectConfigIpc.ts | 24 +++++++++--
 .../lib/plugins/child/register_ts_node.js     | 23 +++++++++++
 .../plugins/child/run_require_async_child.js  | 41 +++----------------
 3 files changed, 48 insertions(+), 40 deletions(-)
 create mode 100644 packages/server/lib/plugins/child/register_ts_node.js

diff --git a/packages/data-context/src/data/ProjectConfigIpc.ts b/packages/data-context/src/data/ProjectConfigIpc.ts
index 1b27155d5b73..18dceb2d3081 100644
--- a/packages/data-context/src/data/ProjectConfigIpc.ts
+++ b/packages/data-context/src/data/ProjectConfigIpc.ts
@@ -14,7 +14,9 @@ const pkg = require('@packages/root')
 const debug = debugLib(`cypress:lifecycle:ProjectConfigIpc`)
 
 const CHILD_PROCESS_FILE_PATH = require.resolve('@packages/server/lib/plugins/child/require_async_child')
+
 const tsNodeEsm = require.resolve('ts-node/esm')
+const tsNode = require.resolve('@packages/server/lib/plugins/child/register_ts_node')
 
 export type IpcHandler = (ipc: ProjectConfigIpc) => void
 
@@ -251,11 +253,11 @@ export class ProjectConfigIpc extends EventEmitter {
       // reasonable to assume not using es modules
     }
 
-    if (isProjectUsingESModules) {
-      if (!childOptions.env) {
-        childOptions.env = {}
-      }
+    if (!childOptions.env) {
+      childOptions.env = {}
+    }
 
+    if (isProjectUsingESModules) {
       // Use the ts-node/esm loader so they can use TypeScript with `"type": "module".
       // The loader API is experimental and will change.
       // The same can be said for the other alternative, esbuild, so this is the
@@ -269,6 +271,20 @@ export class ProjectConfigIpc extends EventEmitter {
       } else {
         childOptions.env.NODE_OPTIONS = tsNodeEsmLoader
       }
+    } else {
+      // Not using ES Modules (via "type": "module"),
+      // so we just register the standard ts-node module
+      // to handle TypeScript that is compiled to CommonJS.
+      // We do NOT use the `--loader` flag because we have some additional
+      // custom logic for ts-node when used with CommonJS that needs to be evaluated
+      // so we need to load and evaluate the hook first using the `--require` module API.
+      const tsNodeLoader = `--require ${tsNode}`
+
+      if (childOptions.env.NODE_OPTIONS) {
+        childOptions.env.NODE_OPTIONS += ` ${tsNodeLoader}`
+      } else {
+        childOptions.env.NODE_OPTIONS = tsNodeLoader
+      }
     }
 
     const proc = fork(CHILD_PROCESS_FILE_PATH, configProcessArgs, childOptions)
diff --git a/packages/server/lib/plugins/child/register_ts_node.js b/packages/server/lib/plugins/child/register_ts_node.js
new file mode 100644
index 000000000000..5d5d31682937
--- /dev/null
+++ b/packages/server/lib/plugins/child/register_ts_node.js
@@ -0,0 +1,23 @@
+const minimist = require('minimist')
+const debugLib = require('debug')
+const dedent = require('dedent')
+const { register } = require('./ts_node')
+
+const debug = debugLib('cypress:server:register-ts-node')
+
+const args = minimist(process.argv)
+
+debug('executing register_ts_node with args %o', args)
+
+const { projectRoot, file } = args
+
+if (!projectRoot || !file) {
+  throw Error(dedent`
+    Need to provide --projectRoot and --file args when using
+    register_ts_node, for example: 
+    node --require register_ts_node --projectRoot=/path/to/project --file=/path/to/project/cypress.config.ts.
+    You passed projectRoot: ${projectRoot} and file ${file}.
+  `)
+}
+
+register(projectRoot, file)
diff --git a/packages/server/lib/plugins/child/run_require_async_child.js b/packages/server/lib/plugins/child/run_require_async_child.js
index 2c4aba824600..a963cd293cd1 100644
--- a/packages/server/lib/plugins/child/run_require_async_child.js
+++ b/packages/server/lib/plugins/child/run_require_async_child.js
@@ -2,12 +2,9 @@ require('graceful-fs').gracefulify(require('fs'))
 const stripAnsi = require('strip-ansi')
 const debug = require('debug')(`cypress:lifecycle:child:run_require_async_child:${process.pid}`)
 const { pathToFileURL } = require('url')
-const tsNodeUtil = require('./ts_node')
 const util = require('../util')
 const { RunPlugins } = require('./run_plugins')
 
-let tsRegistered = false
-
 /**
  * Executes and returns the passed `file` (usually `configFile`) file in the ipc `loadConfig` event
  * @param {*} ipc Inter Process Communication protocol
@@ -22,14 +19,6 @@ function run (ipc, file, projectRoot) {
     throw new Error('Unexpected: projectRoot should be a string')
   }
 
-  if (!tsRegistered) {
-    debug('register typescript for required file')
-    tsNodeUtil.register(projectRoot, file)
-
-    // ensure typescript is only registered once
-    tsRegistered = true
-  }
-
   process.on('uncaughtException', (err) => {
     debug('uncaught exception:', util.serializeError(err))
     ipc.send('childProcess:unhandledError', util.serializeError(err))
@@ -92,13 +81,6 @@ function run (ipc, file, projectRoot) {
   // Config file loading of modules is tested within
   // system-tests/projects/config-cjs-and-esm/*
   const loadFile = async (file) => {
-    // 1. Try loading the configFile
-    // 2. Catch the "ERR_REQUIRE_ESM" error
-    // 3. Check if esbuild is installed
-    //   3a. Yes: Use bundleRequire
-    //   3b. No: Continue through to `await import(configFile)`
-    // 4. Use node's dynamic import to import the configFile
-
     try {
       return require(file)
     } catch (err) {
@@ -110,25 +92,12 @@ function run (ipc, file, projectRoot) {
     debug('User is loading an ESM config file')
 
     try {
-      debug('Trying to use esbuild to run their config file.')
-      // We prefer doing this because it supports TypeScript files
-      require.resolve('esbuild', { paths: [process.cwd()] })
-
-      debug(`They have esbuild, so we'll load the configFile via bundleRequire`)
-      const { bundleRequire } = require('bundle-require')
-
-      return (await bundleRequire({ filepath: file })).mod
+      // We cannot replace the initial `require` with `await import` because
+      // Certain modules cannot be dynamically imported.
+      // pathToFileURL for windows interop: https://github.com/nodejs/node/issues/31710
+      return await import(pathToFileURL(file).href)
     } catch (err) {
-      if (err.stack.includes(`Cannot find module 'esbuild'`)) {
-        debug(`User doesn't have esbuild. Going to use native node imports.`)
-
-        // We cannot replace the initial `require` with `await import` because
-        // Certain modules cannot be dynamically imported.
-
-        // pathToFileURL for windows interop: https://github.com/nodejs/node/issues/31710
-        return await import(pathToFileURL(file).href)
-      }
-
+      debug('error loading file via native Node.js module loader %s', err.message)
       throw err
     }
   }

From 7973865dc376397f6eb72cafe2d4aa2e9e8976e2 Mon Sep 17 00:00:00 2001
From: Lachlan Miller <lachlan.miller.1990@outlook.com>
Date: Tue, 7 Jun 2022 14:58:27 +1000
Subject: [PATCH 06/16] be less aggressive with erroring

---
 .../server/lib/plugins/child/register_ts_node.js    | 13 +++----------
 1 file changed, 3 insertions(+), 10 deletions(-)

diff --git a/packages/server/lib/plugins/child/register_ts_node.js b/packages/server/lib/plugins/child/register_ts_node.js
index 5d5d31682937..847d3380249b 100644
--- a/packages/server/lib/plugins/child/register_ts_node.js
+++ b/packages/server/lib/plugins/child/register_ts_node.js
@@ -1,6 +1,5 @@
 const minimist = require('minimist')
 const debugLib = require('debug')
-const dedent = require('dedent')
 const { register } = require('./ts_node')
 
 const debug = debugLib('cypress:server:register-ts-node')
@@ -11,13 +10,7 @@ debug('executing register_ts_node with args %o', args)
 
 const { projectRoot, file } = args
 
-if (!projectRoot || !file) {
-  throw Error(dedent`
-    Need to provide --projectRoot and --file args when using
-    register_ts_node, for example: 
-    node --require register_ts_node --projectRoot=/path/to/project --file=/path/to/project/cypress.config.ts.
-    You passed projectRoot: ${projectRoot} and file ${file}.
-  `)
+if (projectRoot && file) {
+  debug('registering ts-node for projectRoot: %s and file: %s', projectRoot, file)
+  register(projectRoot, file)
 }
-
-register(projectRoot, file)

From b9e1e44178ae620bfc1065f1c4f88ccc3cd1917f Mon Sep 17 00:00:00 2001
From: Lachlan Miller <lachlan.miller.1990@outlook.com>
Date: Tue, 7 Jun 2022 16:45:27 +1000
Subject: [PATCH 07/16] update fix system tests

---
 .../lib/plugins/child/run_require_async_child.js     | 12 ++++++++++--
 .../config-with-mjs-tsconfig-es5/package.json        |  5 +++++
 .../config-with-mjs-tsconfig-es5/tsconfig.json       |  1 -
 .../config-with-mjs-tsconfig-es5/yarn.lock           |  8 ++++++++
 .../config-with-ts-module-and-esbuild/tsconfig.json  |  7 +++++++
 .../config-with-ts-module-component/tsconfig.json    |  7 +++++++
 6 files changed, 37 insertions(+), 3 deletions(-)
 create mode 100644 system-tests/projects/config-cjs-and-esm/config-with-mjs-tsconfig-es5/package.json
 create mode 100644 system-tests/projects/config-cjs-and-esm/config-with-mjs-tsconfig-es5/yarn.lock
 create mode 100644 system-tests/projects/config-cjs-and-esm/config-with-ts-module-and-esbuild/tsconfig.json
 create mode 100644 system-tests/projects/config-cjs-and-esm/config-with-ts-module-component/tsconfig.json

diff --git a/packages/server/lib/plugins/child/run_require_async_child.js b/packages/server/lib/plugins/child/run_require_async_child.js
index a963cd293cd1..4528392d6c23 100644
--- a/packages/server/lib/plugins/child/run_require_async_child.js
+++ b/packages/server/lib/plugins/child/run_require_async_child.js
@@ -1,10 +1,12 @@
 require('graceful-fs').gracefulify(require('fs'))
 const stripAnsi = require('strip-ansi')
-const debug = require('debug')(`cypress:lifecycle:child:run_require_async_child:${process.pid}`)
+const debugLib = require('debug')
 const { pathToFileURL } = require('url')
 const util = require('../util')
 const { RunPlugins } = require('./run_plugins')
 
+const debug = debugLib(`cypress:lifecycle:child:run_require_async_child:${process.pid}`)
+
 /**
  * Executes and returns the passed `file` (usually `configFile`) file in the ipc `loadConfig` event
  * @param {*} ipc Inter Process Communication protocol
@@ -82,6 +84,8 @@ function run (ipc, file, projectRoot) {
   // system-tests/projects/config-cjs-and-esm/*
   const loadFile = async (file) => {
     try {
+      debug('Loading file %s', file)
+
       return require(file)
     } catch (err) {
       if (!err.stack.includes('[ERR_REQUIRE_ESM]') && !err.stack.includes('SyntaxError: Cannot use import statement outside a module')) {
@@ -95,7 +99,11 @@ function run (ipc, file, projectRoot) {
       // We cannot replace the initial `require` with `await import` because
       // Certain modules cannot be dynamically imported.
       // pathToFileURL for windows interop: https://github.com/nodejs/node/issues/31710
-      return await import(pathToFileURL(file).href)
+      const fileURL = pathToFileURL(file).href
+
+      debug(`importing esm file %s`, fileURL)
+
+      return await import(fileURL)
     } catch (err) {
       debug('error loading file via native Node.js module loader %s', err.message)
       throw err
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-mjs-tsconfig-es5/package.json b/system-tests/projects/config-cjs-and-esm/config-with-mjs-tsconfig-es5/package.json
new file mode 100644
index 000000000000..b7716e490ae7
--- /dev/null
+++ b/system-tests/projects/config-cjs-and-esm/config-with-mjs-tsconfig-es5/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "typescript": "4.7.3"
+  }
+}
\ No newline at end of file
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-mjs-tsconfig-es5/tsconfig.json b/system-tests/projects/config-cjs-and-esm/config-with-mjs-tsconfig-es5/tsconfig.json
index 98c470f93961..c7de3f699a22 100644
--- a/system-tests/projects/config-cjs-and-esm/config-with-mjs-tsconfig-es5/tsconfig.json
+++ b/system-tests/projects/config-cjs-and-esm/config-with-mjs-tsconfig-es5/tsconfig.json
@@ -6,7 +6,6 @@
       "dom.iterable",
       "esnext"
     ],
-    "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-mjs-tsconfig-es5/yarn.lock b/system-tests/projects/config-cjs-and-esm/config-with-mjs-tsconfig-es5/yarn.lock
new file mode 100644
index 000000000000..6774dcd69294
--- /dev/null
+++ b/system-tests/projects/config-cjs-and-esm/config-with-mjs-tsconfig-es5/yarn.lock
@@ -0,0 +1,8 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+typescript@4.7.3:
+  version "4.7.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.3.tgz#8364b502d5257b540f9de4c40be84c98e23a129d"
+  integrity sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA==
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-ts-module-and-esbuild/tsconfig.json b/system-tests/projects/config-cjs-and-esm/config-with-ts-module-and-esbuild/tsconfig.json
new file mode 100644
index 000000000000..7c3d58f844b4
--- /dev/null
+++ b/system-tests/projects/config-cjs-and-esm/config-with-ts-module-and-esbuild/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "lib": ["es6"],
+    "moduleResolution": "node"
+  }
+}
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-ts-module-component/tsconfig.json b/system-tests/projects/config-cjs-and-esm/config-with-ts-module-component/tsconfig.json
new file mode 100644
index 000000000000..7c3d58f844b4
--- /dev/null
+++ b/system-tests/projects/config-cjs-and-esm/config-with-ts-module-component/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "lib": ["es6"],
+    "moduleResolution": "node"
+  }
+}

From 1dabcd67cf53533c1dce2db88dc61f02378ddbff Mon Sep 17 00:00:00 2001
From: Lachlan Miller <lachlan.miller.1990@outlook.com>
Date: Tue, 7 Jun 2022 18:40:16 +1000
Subject: [PATCH 08/16] remove obsolete test

---
 .../child/run_require_async_child_spec.js     | 24 -------------------
 1 file changed, 24 deletions(-)

diff --git a/packages/server/test/unit/plugins/child/run_require_async_child_spec.js b/packages/server/test/unit/plugins/child/run_require_async_child_spec.js
index ca0b332fd164..9cfebc3a2750 100644
--- a/packages/server/test/unit/plugins/child/run_require_async_child_spec.js
+++ b/packages/server/test/unit/plugins/child/run_require_async_child_spec.js
@@ -1,8 +1,6 @@
 require('../../../spec_helper')
 
-const tsNodeUtil = require('../../../../lib/plugins/child/ts_node')
 const runRequireAsyncChild = require('../../../../lib/plugins/child/run_require_async_child')
-const resolve = require('../../../../lib/util/resolve')
 
 describe('lib/plugins/child/run_require_async_child', () => {
   beforeEach(function () {
@@ -17,28 +15,6 @@ describe('lib/plugins/child/run_require_async_child', () => {
     mockery.deregisterMock('@cypress/webpack-batteries-included-preprocessor')
   })
 
-  describe('typescript registration', () => {
-    beforeEach(() => {
-      sinon.stub(tsNodeUtil, 'register')
-      sinon.stub(resolve, 'typescript').returns('/path/to/typescript.js')
-    })
-
-    it('registers ts-node only once when typescript module found', function () {
-      runRequireAsyncChild(this.ipc, 'cypress.config.js', 'proj-root')
-      runRequireAsyncChild(this.ipc, 'cypress.config.js', 'proj-root')
-
-      expect(tsNodeUtil.register).to.be.calledWith(
-        'proj-root',
-        'cypress.config.js',
-      )
-
-      expect(tsNodeUtil.register).to.be.calledOnce
-    })
-
-    // FIXME: need to validate that TS is checked once when ts is not found as well
-    it.skip('checks for typescript only once if typescript module was not found')
-  })
-
   describe('errors', () => {
     beforeEach(function () {
       sinon.stub(process, 'on')

From f095b3abfcfc17bac67519242bbab7c7340b4f2e Mon Sep 17 00:00:00 2001
From: Lachlan Miller <lachlan.miller.1990@outlook.com>
Date: Tue, 7 Jun 2022 17:42:34 +1000
Subject: [PATCH 09/16] handle case of not using typescript

---
 .../data-context/src/data/ProjectConfigIpc.ts | 68 ++++++++++++-------
 1 file changed, 43 insertions(+), 25 deletions(-)

diff --git a/packages/data-context/src/data/ProjectConfigIpc.ts b/packages/data-context/src/data/ProjectConfigIpc.ts
index 18dceb2d3081..99a332978326 100644
--- a/packages/data-context/src/data/ProjectConfigIpc.ts
+++ b/packages/data-context/src/data/ProjectConfigIpc.ts
@@ -111,6 +111,16 @@ export class ProjectConfigIpc extends EventEmitter {
     return super.emit(evt, ...args)
   }
 
+  hasTypeScriptInstalled () {
+    try {
+      require.resolve('typescript', { paths: [this.projectRoot] })
+
+      return true
+    } catch (e) {
+      return false
+    }
+  }
+
   loadConfig (): Promise<LoadConfigReply> {
     return new Promise((resolve, reject) => {
       if (this._childProcess.stdout && this._childProcess.stderr) {
@@ -257,34 +267,42 @@ export class ProjectConfigIpc extends EventEmitter {
       childOptions.env = {}
     }
 
-    if (isProjectUsingESModules) {
-      // Use the ts-node/esm loader so they can use TypeScript with `"type": "module".
-      // The loader API is experimental and will change.
-      // The same can be said for the other alternative, esbuild, so this is the
-      // best option that leverages the existing modules we bundle in the binary.
-      // @see ts-node esm loader https://typestrong.org/ts-node/docs/usage/#node-flags-and-other-tools
-      // @see Node.js Loader API https://nodejs.org/api/esm.html#customizing-esm-specifier-resolution-algorithm
-      const tsNodeEsmLoader = `--experimental-specifier-resolution=node --loader ${tsNodeEsm}`
-
-      if (childOptions.env.NODE_OPTIONS) {
-        childOptions.env.NODE_OPTIONS += ` ${tsNodeEsmLoader}`
+    // If they've got TypeScript installed, we can use
+    // ts-node for CommonJS
+    // ts-node/esm for ESM
+    if (this.hasTypeScriptInstalled()) {
+      if (isProjectUsingESModules) {
+        // Use the ts-node/esm loader so they can use TypeScript with `"type": "module".
+        // The loader API is experimental and will change.
+        // The same can be said for the other alternative, esbuild, so this is the
+        // best option that leverages the existing modules we bundle in the binary.
+        // @see ts-node esm loader https://typestrong.org/ts-node/docs/usage/#node-flags-and-other-tools
+        // @see Node.js Loader API https://nodejs.org/api/esm.html#customizing-esm-specifier-resolution-algorithm
+        const tsNodeEsmLoader = `--experimental-specifier-resolution=node --loader ${tsNodeEsm}`
+
+        if (childOptions.env.NODE_OPTIONS) {
+          childOptions.env.NODE_OPTIONS += ` ${tsNodeEsmLoader}`
+        } else {
+          childOptions.env.NODE_OPTIONS = tsNodeEsmLoader
+        }
       } else {
-        childOptions.env.NODE_OPTIONS = tsNodeEsmLoader
+        // Not using ES Modules (via "type": "module"),
+        // so we just register the standard ts-node module
+        // to handle TypeScript that is compiled to CommonJS.
+        // We do NOT use the `--loader` flag because we have some additional
+        // custom logic for ts-node when used with CommonJS that needs to be evaluated
+        // so we need to load and evaluate the hook first using the `--require` module API.
+        const tsNodeLoader = `--require ${tsNode}`
+
+        if (childOptions.env.NODE_OPTIONS) {
+          childOptions.env.NODE_OPTIONS += ` ${tsNodeLoader}`
+        } else {
+          childOptions.env.NODE_OPTIONS = tsNodeLoader
+        }
       }
     } else {
-      // Not using ES Modules (via "type": "module"),
-      // so we just register the standard ts-node module
-      // to handle TypeScript that is compiled to CommonJS.
-      // We do NOT use the `--loader` flag because we have some additional
-      // custom logic for ts-node when used with CommonJS that needs to be evaluated
-      // so we need to load and evaluate the hook first using the `--require` module API.
-      const tsNodeLoader = `--require ${tsNode}`
-
-      if (childOptions.env.NODE_OPTIONS) {
-        childOptions.env.NODE_OPTIONS += ` ${tsNodeLoader}`
-      } else {
-        childOptions.env.NODE_OPTIONS = tsNodeLoader
-      }
+      // Just use Node's built-in ESM support.
+      // TODO: Consider using userland `esbuild` with Node's --loader API to handle ESM.
     }
 
     const proc = fork(CHILD_PROCESS_FILE_PATH, configProcessArgs, childOptions)

From 36191a4e27b2c16eedeb939b882a69022a2aada1 Mon Sep 17 00:00:00 2001
From: Lachlan Miller <lachlan.miller.1990@outlook.com>
Date: Tue, 7 Jun 2022 18:59:10 +1000
Subject: [PATCH 10/16] replicate 9.x behavior for legacy plugins w/ ts-node

---
 .../src/actions/MigrationActions.ts           | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/packages/data-context/src/actions/MigrationActions.ts b/packages/data-context/src/actions/MigrationActions.ts
index ecd43dc46645..a714763efa73 100644
--- a/packages/data-context/src/actions/MigrationActions.ts
+++ b/packages/data-context/src/actions/MigrationActions.ts
@@ -33,6 +33,8 @@ import {
 import { makeCoreData } from '../data'
 import { LegacyPluginsIpc } from '../data/LegacyPluginsIpc'
 
+const tsNode = require.resolve('@packages/server/lib/plugins/child/register_ts_node')
+
 export function getConfigWithDefaults (legacyConfig: any) {
   const newConfig = _.cloneDeep(legacyConfig)
 
@@ -67,6 +69,16 @@ export function getDiff (oldConfig: any, newConfig: any) {
   }, result)
 }
 
+function hasTypeScriptInstalled (projectRoot: string) {
+  try {
+    require.resolve('typescript', { paths: [projectRoot] })
+
+    return true
+  } catch (e) {
+    return false
+  }
+}
+
 export async function processConfigViaLegacyPlugins (projectRoot: string, legacyConfig: LegacyCypressConfigJson): Promise<LegacyCypressConfigJson> {
   const pluginFile = legacyConfig.pluginsFile ?? await tryGetDefaultLegacyPluginsFile(projectRoot)
 
@@ -88,6 +100,23 @@ export async function processConfigViaLegacyPlugins (projectRoot: string, legacy
     const configProcessArgs = ['--projectRoot', projectRoot, '--file', cwd]
     const CHILD_PROCESS_FILE_PATH = require.resolve('@packages/server/lib/plugins/child/require_async_child')
 
+    // use ts-node if they've got typescript installed
+    // this matches the 9.x behavior, which is what we want for
+    // processing legacy pluginsFile (we never supported `"type": "module") in 9.x.
+    if (hasTypeScriptInstalled(projectRoot)) {
+      const tsNodeLoader = `--require ${tsNode}`
+
+      if (!childOptions.env) {
+        childOptions.env = {}
+      }
+
+      if (childOptions.env.NODE_OPTIONS) {
+        childOptions.env.NODE_OPTIONS += ` ${tsNodeLoader}`
+      } else {
+        childOptions.env.NODE_OPTIONS = tsNodeLoader
+      }
+    }
+
     const childProcess = fork(CHILD_PROCESS_FILE_PATH, configProcessArgs, childOptions)
     const ipc = new LegacyPluginsIpc(childProcess)
 

From 2d4eb12526e790ad179c5023e207a7aebb70486f Mon Sep 17 00:00:00 2001
From: Lachlan Miller <lachlan.miller.1990@outlook.com>
Date: Tue, 7 Jun 2022 19:08:44 +1000
Subject: [PATCH 11/16] make test project valid and adjust tests accordingly

---
 .../launchpad/cypress/e2e/config-files-error-handling.cy.ts  | 2 +-
 packages/launchpad/cypress/e2e/error-handling.cy.ts          | 2 +-
 .../{cypress.config.js => cypress.config.ts}                 | 0
 system-tests/projects/missing-vite-config/package.json       | 1 +
 system-tests/projects/missing-vite-config/yarn.lock          | 5 +++++
 5 files changed, 8 insertions(+), 2 deletions(-)
 rename system-tests/projects/missing-vite-config/{cypress.config.js => cypress.config.ts} (100%)

diff --git a/packages/launchpad/cypress/e2e/config-files-error-handling.cy.ts b/packages/launchpad/cypress/e2e/config-files-error-handling.cy.ts
index b7ee7543e613..5d12886b3aec 100644
--- a/packages/launchpad/cypress/e2e/config-files-error-handling.cy.ts
+++ b/packages/launchpad/cypress/e2e/config-files-error-handling.cy.ts
@@ -173,7 +173,7 @@ describe('Launchpad: Error System Tests', () => {
     cy.contains('h1', cy.i18n.launchpadErrors.generic.configErrorTitle)
     cy.percySnapshot()
 
-    cy.get('[data-testid="error-code-frame"]').should('contain', 'cypress.config.ts:6:9')
+    cy.get('[data-testid="error-code-frame"]').should('contain', 'cypress.config.ts:6:10')
   })
 })
 
diff --git a/packages/launchpad/cypress/e2e/error-handling.cy.ts b/packages/launchpad/cypress/e2e/error-handling.cy.ts
index 9287a56f5c40..66e932e0041e 100644
--- a/packages/launchpad/cypress/e2e/error-handling.cy.ts
+++ b/packages/launchpad/cypress/e2e/error-handling.cy.ts
@@ -80,7 +80,7 @@ describe('Error handling', () => {
       cy.contains('Choose a Browser').should('not.exist')
 
       cy.withCtx((ctx) => {
-        ctx.actions.file.writeFileInProject('cypress.config.js', `
+        ctx.actions.file.writeFileInProject('cypress.config.ts', `
           import { defineConfig } from 'cypress'
           import { defineConfig as viteConfig } from 'vite'
           export default defineConfig({
diff --git a/system-tests/projects/missing-vite-config/cypress.config.js b/system-tests/projects/missing-vite-config/cypress.config.ts
similarity index 100%
rename from system-tests/projects/missing-vite-config/cypress.config.js
rename to system-tests/projects/missing-vite-config/cypress.config.ts
diff --git a/system-tests/projects/missing-vite-config/package.json b/system-tests/projects/missing-vite-config/package.json
index b0a81f11fbaa..667447b4a9a1 100644
--- a/system-tests/projects/missing-vite-config/package.json
+++ b/system-tests/projects/missing-vite-config/package.json
@@ -3,6 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "devDependencies": {
+    "typescript": "4.7.3",
     "vite": "^2.8.0"
   }
 }
diff --git a/system-tests/projects/missing-vite-config/yarn.lock b/system-tests/projects/missing-vite-config/yarn.lock
index 06610934b37e..fabe831af1de 100644
--- a/system-tests/projects/missing-vite-config/yarn.lock
+++ b/system-tests/projects/missing-vite-config/yarn.lock
@@ -202,6 +202,11 @@ 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==
 
+typescript@4.7.3:
+  version "4.7.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.3.tgz#8364b502d5257b540f9de4c40be84c98e23a129d"
+  integrity sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA==
+
 vite@^2.8.0:
   version "2.9.9"
   resolved "https://registry.yarnpkg.com/vite/-/vite-2.9.9.tgz#8b558987db5e60fedec2f4b003b73164cb081c5e"

From 03068a368b0a951cc2f6ae3cb5030ef054f96903 Mon Sep 17 00:00:00 2001
From: Lachlan Miller <lachlan.miller.1990@outlook.com>
Date: Wed, 8 Jun 2022 06:37:14 +1000
Subject: [PATCH 12/16] use ts-node/esm transpile only

---
 .../data-context/src/data/ProjectConfigIpc.ts |  2 +-
 .../server/lib/plugins/child/run_plugins.js   |  1 +
 packages/server/lib/plugins/child/ts_node.js  |  1 +
 system-tests/test/config_modules_spec.ts      | 30 +++++--------------
 4 files changed, 10 insertions(+), 24 deletions(-)

diff --git a/packages/data-context/src/data/ProjectConfigIpc.ts b/packages/data-context/src/data/ProjectConfigIpc.ts
index 99a332978326..8941c944fea8 100644
--- a/packages/data-context/src/data/ProjectConfigIpc.ts
+++ b/packages/data-context/src/data/ProjectConfigIpc.ts
@@ -15,7 +15,7 @@ const debug = debugLib(`cypress:lifecycle:ProjectConfigIpc`)
 
 const CHILD_PROCESS_FILE_PATH = require.resolve('@packages/server/lib/plugins/child/require_async_child')
 
-const tsNodeEsm = require.resolve('ts-node/esm')
+const tsNodeEsm = require.resolve('ts-node/esm/transpile-only')
 const tsNode = require.resolve('@packages/server/lib/plugins/child/register_ts_node')
 
 export type IpcHandler = (ipc: ProjectConfigIpc) => void
diff --git a/packages/server/lib/plugins/child/run_plugins.js b/packages/server/lib/plugins/child/run_plugins.js
index ab310193ed1a..0b6ac4af617c 100644
--- a/packages/server/lib/plugins/child/run_plugins.js
+++ b/packages/server/lib/plugins/child/run_plugins.js
@@ -1,3 +1,4 @@
+// @ts-check
 // this module is responsible for loading the plugins file
 // and running the exported function to register event handlers
 // and executing any tasks that the plugin registers
diff --git a/packages/server/lib/plugins/child/ts_node.js b/packages/server/lib/plugins/child/ts_node.js
index dcfd558e8c36..982909426db3 100644
--- a/packages/server/lib/plugins/child/ts_node.js
+++ b/packages/server/lib/plugins/child/ts_node.js
@@ -1,3 +1,4 @@
+// @ts-check
 const debugLib = require('debug')
 const path = require('path')
 const tsnode = require('ts-node')
diff --git a/system-tests/test/config_modules_spec.ts b/system-tests/test/config_modules_spec.ts
index f37585c9cb4d..c64583ff54dc 100644
--- a/system-tests/test/config_modules_spec.ts
+++ b/system-tests/test/config_modules_spec.ts
@@ -8,6 +8,7 @@ describe('cypress config with esm and cjs', function () {
     'config-cjs-and-esm/config-with-mjs',
     'config-cjs-and-esm/config-with-cjs',
     'config-cjs-and-esm/config-with-js-module',
+    'config-cjs-and-esm/config-with-ts-module',
 
     // This covers Vite and SvelteKit e2e projects
     'config-cjs-and-esm/config-with-ts-module-and-esbuild',
@@ -22,29 +23,12 @@ describe('cypress config with esm and cjs', function () {
     })
   })
 
-  ;[
-    'config-cjs-and-esm/config-with-ts-module',
-  ].forEach((project) => {
-    systemTests.it(`does not support modules and ts without esbuild in ${project}`, {
-      project,
-      testingType: 'e2e',
-      spec: 'app.cy.js',
-      browser: 'chrome',
-      expectedExitCode: 0,
-    })
-  })
-
-  ;[
-    'config-cjs-and-esm/config-with-ts-module-component',
-  ].forEach((project) => {
-    // This covers Vite and SvelteKit component testing projects
-    systemTests.it(`supports modules and cjs in ${project}`, {
-      project,
-      testingType: 'component',
-      spec: 'src/app.cy.js',
-      browser: 'chrome',
-      expectedExitCode: 0,
-    })
+  systemTests.it('supports modules and cjs in compoent testing', {
+    project: 'config-cjs-and-esm/config-with-ts-module-component',
+    testingType: 'component',
+    spec: 'src/app.cy.js',
+    browser: 'chrome',
+    expectedExitCode: 0,
   })
 })
 

From f91b9039d283a6fc30f0b5135d53a9f3c0fb24c2 Mon Sep 17 00:00:00 2001
From: Lachlan Miller <lachlan.miller.1990@outlook.com>
Date: Thu, 9 Jun 2022 18:36:16 +1000
Subject: [PATCH 13/16] dummy

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 5ed74849fdc5..f5de068669bf 100644
--- a/README.md
+++ b/README.md
@@ -77,3 +77,4 @@ Let the world know your project is using Cypress.io to test with this cool badge
 ```
 [![Cypress.io](https://img.shields.io/badge/tested%20with-Cypress-04C38E.svg)](https://www.cypress.io/)
 ```
+

From 5257a74accf204527a7281eaba3e1de9744d6a6c Mon Sep 17 00:00:00 2001
From: Lachlan Miller <lachlan.miller.1990@outlook.com>
Date: Wed, 8 Jun 2022 14:49:50 +1000
Subject: [PATCH 14/16] extract util function

---
 .../src/actions/MigrationActions.ts            | 11 +----------
 .../data-context/src/data/ProjectConfigIpc.ts  | 14 ++------------
 .../data-context/src/util/hasTypescript.ts     |  9 +++++++++
 packages/data-context/src/util/index.ts        |  1 +
 .../test/unit/util/hasTypescript.spec.ts       | 18 ++++++++++++++++++
 5 files changed, 31 insertions(+), 22 deletions(-)
 create mode 100644 packages/data-context/src/util/hasTypescript.ts
 create mode 100644 packages/data-context/test/unit/util/hasTypescript.spec.ts

diff --git a/packages/data-context/src/actions/MigrationActions.ts b/packages/data-context/src/actions/MigrationActions.ts
index a714763efa73..d7d42d9f41af 100644
--- a/packages/data-context/src/actions/MigrationActions.ts
+++ b/packages/data-context/src/actions/MigrationActions.ts
@@ -32,6 +32,7 @@ import {
 } from '../sources/migration'
 import { makeCoreData } from '../data'
 import { LegacyPluginsIpc } from '../data/LegacyPluginsIpc'
+import { hasTypeScriptInstalled } from '../util'
 
 const tsNode = require.resolve('@packages/server/lib/plugins/child/register_ts_node')
 
@@ -69,16 +70,6 @@ export function getDiff (oldConfig: any, newConfig: any) {
   }, result)
 }
 
-function hasTypeScriptInstalled (projectRoot: string) {
-  try {
-    require.resolve('typescript', { paths: [projectRoot] })
-
-    return true
-  } catch (e) {
-    return false
-  }
-}
-
 export async function processConfigViaLegacyPlugins (projectRoot: string, legacyConfig: LegacyCypressConfigJson): Promise<LegacyCypressConfigJson> {
   const pluginFile = legacyConfig.pluginsFile ?? await tryGetDefaultLegacyPluginsFile(projectRoot)
 
diff --git a/packages/data-context/src/data/ProjectConfigIpc.ts b/packages/data-context/src/data/ProjectConfigIpc.ts
index 8941c944fea8..c287d58bb7b9 100644
--- a/packages/data-context/src/data/ProjectConfigIpc.ts
+++ b/packages/data-context/src/data/ProjectConfigIpc.ts
@@ -7,7 +7,7 @@ import fs from 'fs-extra'
 import path from 'path'
 import inspector from 'inspector'
 import debugLib from 'debug'
-import { autoBindDebug } from '../util'
+import { autoBindDebug, hasTypeScriptInstalled } from '../util'
 import _ from 'lodash'
 
 const pkg = require('@packages/root')
@@ -111,16 +111,6 @@ export class ProjectConfigIpc extends EventEmitter {
     return super.emit(evt, ...args)
   }
 
-  hasTypeScriptInstalled () {
-    try {
-      require.resolve('typescript', { paths: [this.projectRoot] })
-
-      return true
-    } catch (e) {
-      return false
-    }
-  }
-
   loadConfig (): Promise<LoadConfigReply> {
     return new Promise((resolve, reject) => {
       if (this._childProcess.stdout && this._childProcess.stderr) {
@@ -270,7 +260,7 @@ export class ProjectConfigIpc extends EventEmitter {
     // If they've got TypeScript installed, we can use
     // ts-node for CommonJS
     // ts-node/esm for ESM
-    if (this.hasTypeScriptInstalled()) {
+    if (hasTypeScriptInstalled(this.projectRoot)) {
       if (isProjectUsingESModules) {
         // Use the ts-node/esm loader so they can use TypeScript with `"type": "module".
         // The loader API is experimental and will change.
diff --git a/packages/data-context/src/util/hasTypescript.ts b/packages/data-context/src/util/hasTypescript.ts
new file mode 100644
index 000000000000..f87fb2bf050b
--- /dev/null
+++ b/packages/data-context/src/util/hasTypescript.ts
@@ -0,0 +1,9 @@
+export function hasTypeScriptInstalled (projectRoot: string) {
+  try {
+    require.resolve('typescript', { paths: [projectRoot] })
+
+    return true
+  } catch (e) {
+    return false
+  }
+}
diff --git a/packages/data-context/src/util/index.ts b/packages/data-context/src/util/index.ts
index f1ed3bc6d64b..dc6a9ab75ef5 100644
--- a/packages/data-context/src/util/index.ts
+++ b/packages/data-context/src/util/index.ts
@@ -6,5 +6,6 @@ export * from './autoBindDebug'
 export * from './cached'
 export * from './config-file-updater'
 export * from './file'
+export * from './hasTypescript'
 export * from './pluginHandlers'
 export * from './urqlCacheKeys'
diff --git a/packages/data-context/test/unit/util/hasTypescript.spec.ts b/packages/data-context/test/unit/util/hasTypescript.spec.ts
new file mode 100644
index 000000000000..8a93c00fa23b
--- /dev/null
+++ b/packages/data-context/test/unit/util/hasTypescript.spec.ts
@@ -0,0 +1,18 @@
+import { expect } from 'chai'
+import path from 'path'
+import { hasTypeScriptInstalled } from '../../../src/util'
+import { scaffoldMigrationProject } from '../helper'
+
+describe('hasTypeScript', () => {
+  it('returns true when installed', async () => {
+    const monorepoRoot = path.join(__dirname, '..', '..', '..', '..', '..')
+
+    expect(hasTypeScriptInstalled(monorepoRoot)).to.be.true
+  })
+
+  it('returns false when not installed', async () => {
+    const projectRoot = await scaffoldMigrationProject('config-with-js')
+
+    expect(hasTypeScriptInstalled(projectRoot)).to.be.false
+  })
+})

From 4f6701d2dba0bec3e7c69ec817ef704ed046be9b Mon Sep 17 00:00:00 2001
From: Lachlan Miller <lachlan.miller.1990@outlook.com>
Date: Thu, 9 Jun 2022 16:30:32 +1000
Subject: [PATCH 15/16] merge in refactor using projectFixtureDirectory

---
 README.md                                                 | 1 -
 .../simple_passing}/cypress/e2e/app.cy.js                 | 0
 .../simple_passing}/src/foo.ts                            | 0
 .../config-with-cjs-tsconfig-es5/cypress/e2e/app.cy.js    | 7 -------
 .../config-with-cjs-tsconfig-es5/package.json             | 6 ++++++
 .../config-with-cjs-tsconfig-es5/yarn.lock                | 8 ++++++++
 .../config-cjs-and-esm/config-with-cjs/package.json       | 3 +++
 .../projects/config-cjs-and-esm/config-with-cjs/yarn.lock | 4 ++++
 .../config-with-js-module/cypress/e2e/app.cy.js           | 3 ---
 .../config-cjs-and-esm/config-with-js-module/package.json | 3 ++-
 .../config-cjs-and-esm/config-with-js-module/yarn.lock    | 4 ++++
 .../config-with-js-tsconfig-es2015/cypress/e2e/app.cy.js  | 7 -------
 .../config-with-js-tsconfig-es2015/package.json           | 6 ++++++
 .../config-with-js-tsconfig-es2015/src/foo.ts             | 1 -
 .../config-with-js-tsconfig-es2015/yarn.lock              | 8 ++++++++
 .../config-with-js-tsconfig-es3/cypress/e2e/app.cy.js     | 7 -------
 .../config-with-js-tsconfig-es3/package.json              | 6 ++++++
 .../config-with-js-tsconfig-es3/src/foo.ts                | 1 -
 .../config-with-js-tsconfig-es3/yarn.lock                 | 8 ++++++++
 .../config-with-js-tsconfig-es5/cypress/e2e/app.cy.js     | 7 -------
 .../config-with-js-tsconfig-es5/package.json              | 6 ++++++
 .../config-with-js-tsconfig-es5/src/foo.ts                | 1 -
 .../config-with-js-tsconfig-es5/yarn.lock                 | 8 ++++++++
 .../config-with-mjs-tsconfig-es5/cypress/e2e/app.cy.js    | 7 -------
 .../config-with-mjs-tsconfig-es5/package.json             | 7 ++++---
 .../config-with-mjs-tsconfig-es5/src/foo.ts               | 1 -
 .../config-with-mjs/cypress/e2e/app.cy.js                 | 3 ---
 .../config-cjs-and-esm/config-with-mjs/package.json       | 3 +++
 .../projects/config-cjs-and-esm/config-with-mjs/yarn.lock | 4 ++++
 .../cypress/e2e/app.cy.js                                 | 3 ---
 .../config-with-ts-module-and-esbuild/package.json        | 6 ++++--
 .../config-with-ts-module-and-esbuild/yarn.lock           | 5 +++++
 .../config-with-ts-module-component/package.json          | 4 +++-
 .../config-with-ts-module-component/src/app.cy.js         | 3 ---
 .../config-with-ts-module-component/yarn.lock             | 5 +++++
 .../config-with-ts-module/cypress/e2e/app.cy.js           | 3 ---
 .../config-cjs-and-esm/config-with-ts-module/package.json | 3 ++-
 .../config-with-ts-tsconfig-es5/cypress/e2e/app.cy.js     | 7 -------
 .../config-with-ts-tsconfig-es5/package.json              | 6 ++++++
 .../config-with-ts-tsconfig-es5/src/foo.ts                | 1 -
 .../config-with-ts-tsconfig-es5/yarn.lock                 | 8 ++++++++
 .../ts-cjs-with-invalid-esm-only-import/package.json      | 7 +++++++
 42 files changed, 120 insertions(+), 71 deletions(-)
 rename system-tests/{projects/config-cjs-and-esm/config-with-cjs => project-fixtures/simple_passing}/cypress/e2e/app.cy.js (100%)
 rename system-tests/{projects/config-cjs-and-esm/config-with-cjs-tsconfig-es5 => project-fixtures/simple_passing}/src/foo.ts (100%)
 delete mode 100644 system-tests/projects/config-cjs-and-esm/config-with-cjs-tsconfig-es5/cypress/e2e/app.cy.js
 create mode 100644 system-tests/projects/config-cjs-and-esm/config-with-cjs-tsconfig-es5/package.json
 create mode 100644 system-tests/projects/config-cjs-and-esm/config-with-cjs-tsconfig-es5/yarn.lock
 create mode 100644 system-tests/projects/config-cjs-and-esm/config-with-cjs/package.json
 create mode 100644 system-tests/projects/config-cjs-and-esm/config-with-cjs/yarn.lock
 delete mode 100644 system-tests/projects/config-cjs-and-esm/config-with-js-module/cypress/e2e/app.cy.js
 create mode 100644 system-tests/projects/config-cjs-and-esm/config-with-js-module/yarn.lock
 delete mode 100644 system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es2015/cypress/e2e/app.cy.js
 create mode 100644 system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es2015/package.json
 delete mode 100644 system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es2015/src/foo.ts
 create mode 100644 system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es2015/yarn.lock
 delete mode 100644 system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es3/cypress/e2e/app.cy.js
 create mode 100644 system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es3/package.json
 delete mode 100644 system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es3/src/foo.ts
 create mode 100644 system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es3/yarn.lock
 delete mode 100644 system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es5/cypress/e2e/app.cy.js
 create mode 100644 system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es5/package.json
 delete mode 100644 system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es5/src/foo.ts
 create mode 100644 system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es5/yarn.lock
 delete mode 100644 system-tests/projects/config-cjs-and-esm/config-with-mjs-tsconfig-es5/cypress/e2e/app.cy.js
 delete mode 100644 system-tests/projects/config-cjs-and-esm/config-with-mjs-tsconfig-es5/src/foo.ts
 delete mode 100644 system-tests/projects/config-cjs-and-esm/config-with-mjs/cypress/e2e/app.cy.js
 create mode 100644 system-tests/projects/config-cjs-and-esm/config-with-mjs/package.json
 create mode 100644 system-tests/projects/config-cjs-and-esm/config-with-mjs/yarn.lock
 delete mode 100644 system-tests/projects/config-cjs-and-esm/config-with-ts-module-and-esbuild/cypress/e2e/app.cy.js
 delete mode 100644 system-tests/projects/config-cjs-and-esm/config-with-ts-module-component/src/app.cy.js
 delete mode 100644 system-tests/projects/config-cjs-and-esm/config-with-ts-module/cypress/e2e/app.cy.js
 delete mode 100644 system-tests/projects/config-cjs-and-esm/config-with-ts-tsconfig-es5/cypress/e2e/app.cy.js
 create mode 100644 system-tests/projects/config-cjs-and-esm/config-with-ts-tsconfig-es5/package.json
 delete mode 100644 system-tests/projects/config-cjs-and-esm/config-with-ts-tsconfig-es5/src/foo.ts
 create mode 100644 system-tests/projects/config-cjs-and-esm/config-with-ts-tsconfig-es5/yarn.lock
 create mode 100644 system-tests/projects/config-cjs-and-esm/ts-cjs-with-invalid-esm-only-import/package.json

diff --git a/README.md b/README.md
index f5de068669bf..5ed74849fdc5 100644
--- a/README.md
+++ b/README.md
@@ -77,4 +77,3 @@ Let the world know your project is using Cypress.io to test with this cool badge
 ```
 [![Cypress.io](https://img.shields.io/badge/tested%20with-Cypress-04C38E.svg)](https://www.cypress.io/)
 ```
-
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-cjs/cypress/e2e/app.cy.js b/system-tests/project-fixtures/simple_passing/cypress/e2e/app.cy.js
similarity index 100%
rename from system-tests/projects/config-cjs-and-esm/config-with-cjs/cypress/e2e/app.cy.js
rename to system-tests/project-fixtures/simple_passing/cypress/e2e/app.cy.js
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-cjs-tsconfig-es5/src/foo.ts b/system-tests/project-fixtures/simple_passing/src/foo.ts
similarity index 100%
rename from system-tests/projects/config-cjs-and-esm/config-with-cjs-tsconfig-es5/src/foo.ts
rename to system-tests/project-fixtures/simple_passing/src/foo.ts
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-cjs-tsconfig-es5/cypress/e2e/app.cy.js b/system-tests/projects/config-cjs-and-esm/config-with-cjs-tsconfig-es5/cypress/e2e/app.cy.js
deleted file mode 100644
index 764540993c64..000000000000
--- a/system-tests/projects/config-cjs-and-esm/config-with-cjs-tsconfig-es5/cypress/e2e/app.cy.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { numberOne } from '../../src/foo'
-
-it('works', () => {
-  const number = 1
-
-  expect(numberOne).to.equal(number)
-})
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-cjs-tsconfig-es5/package.json b/system-tests/projects/config-cjs-and-esm/config-with-cjs-tsconfig-es5/package.json
new file mode 100644
index 000000000000..2e4ad67943ca
--- /dev/null
+++ b/system-tests/projects/config-cjs-and-esm/config-with-cjs-tsconfig-es5/package.json
@@ -0,0 +1,6 @@
+{
+  "devDependencies": {
+    "typescript": "4.7.3"
+  },
+  "projectFixtureDirectory": "simple_passing"
+}
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-cjs-tsconfig-es5/yarn.lock b/system-tests/projects/config-cjs-and-esm/config-with-cjs-tsconfig-es5/yarn.lock
new file mode 100644
index 000000000000..6774dcd69294
--- /dev/null
+++ b/system-tests/projects/config-cjs-and-esm/config-with-cjs-tsconfig-es5/yarn.lock
@@ -0,0 +1,8 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+typescript@4.7.3:
+  version "4.7.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.3.tgz#8364b502d5257b540f9de4c40be84c98e23a129d"
+  integrity sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA==
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-cjs/package.json b/system-tests/projects/config-cjs-and-esm/config-with-cjs/package.json
new file mode 100644
index 000000000000..8a5a20589141
--- /dev/null
+++ b/system-tests/projects/config-cjs-and-esm/config-with-cjs/package.json
@@ -0,0 +1,3 @@
+{
+  "projectFixtureDirectory": "simple_passing"
+}
\ No newline at end of file
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-cjs/yarn.lock b/system-tests/projects/config-cjs-and-esm/config-with-cjs/yarn.lock
new file mode 100644
index 000000000000..fb57ccd13afb
--- /dev/null
+++ b/system-tests/projects/config-cjs-and-esm/config-with-cjs/yarn.lock
@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-js-module/cypress/e2e/app.cy.js b/system-tests/projects/config-cjs-and-esm/config-with-js-module/cypress/e2e/app.cy.js
deleted file mode 100644
index 92e444116c98..000000000000
--- a/system-tests/projects/config-cjs-and-esm/config-with-js-module/cypress/e2e/app.cy.js
+++ /dev/null
@@ -1,3 +0,0 @@
-it('works', () => {
-  expect(true).to.be.true
-})
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-js-module/package.json b/system-tests/projects/config-cjs-and-esm/config-with-js-module/package.json
index 3dbc1ca591c0..b576372ebfa7 100644
--- a/system-tests/projects/config-cjs-and-esm/config-with-js-module/package.json
+++ b/system-tests/projects/config-cjs-and-esm/config-with-js-module/package.json
@@ -1,3 +1,4 @@
 {
-  "type": "module"
+  "type": "module",
+  "projectFixtureDirectory": "simple_passing"
 }
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-js-module/yarn.lock b/system-tests/projects/config-cjs-and-esm/config-with-js-module/yarn.lock
new file mode 100644
index 000000000000..fb57ccd13afb
--- /dev/null
+++ b/system-tests/projects/config-cjs-and-esm/config-with-js-module/yarn.lock
@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es2015/cypress/e2e/app.cy.js b/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es2015/cypress/e2e/app.cy.js
deleted file mode 100644
index 764540993c64..000000000000
--- a/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es2015/cypress/e2e/app.cy.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { numberOne } from '../../src/foo'
-
-it('works', () => {
-  const number = 1
-
-  expect(numberOne).to.equal(number)
-})
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es2015/package.json b/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es2015/package.json
new file mode 100644
index 000000000000..2e4ad67943ca
--- /dev/null
+++ b/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es2015/package.json
@@ -0,0 +1,6 @@
+{
+  "devDependencies": {
+    "typescript": "4.7.3"
+  },
+  "projectFixtureDirectory": "simple_passing"
+}
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es2015/src/foo.ts b/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es2015/src/foo.ts
deleted file mode 100644
index 46448c0fd6a3..000000000000
--- a/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es2015/src/foo.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const numberOne = 1
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es2015/yarn.lock b/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es2015/yarn.lock
new file mode 100644
index 000000000000..6774dcd69294
--- /dev/null
+++ b/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es2015/yarn.lock
@@ -0,0 +1,8 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+typescript@4.7.3:
+  version "4.7.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.3.tgz#8364b502d5257b540f9de4c40be84c98e23a129d"
+  integrity sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA==
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es3/cypress/e2e/app.cy.js b/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es3/cypress/e2e/app.cy.js
deleted file mode 100644
index 764540993c64..000000000000
--- a/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es3/cypress/e2e/app.cy.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { numberOne } from '../../src/foo'
-
-it('works', () => {
-  const number = 1
-
-  expect(numberOne).to.equal(number)
-})
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es3/package.json b/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es3/package.json
new file mode 100644
index 000000000000..2e4ad67943ca
--- /dev/null
+++ b/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es3/package.json
@@ -0,0 +1,6 @@
+{
+  "devDependencies": {
+    "typescript": "4.7.3"
+  },
+  "projectFixtureDirectory": "simple_passing"
+}
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es3/src/foo.ts b/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es3/src/foo.ts
deleted file mode 100644
index 46448c0fd6a3..000000000000
--- a/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es3/src/foo.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const numberOne = 1
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es3/yarn.lock b/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es3/yarn.lock
new file mode 100644
index 000000000000..6774dcd69294
--- /dev/null
+++ b/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es3/yarn.lock
@@ -0,0 +1,8 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+typescript@4.7.3:
+  version "4.7.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.3.tgz#8364b502d5257b540f9de4c40be84c98e23a129d"
+  integrity sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA==
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es5/cypress/e2e/app.cy.js b/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es5/cypress/e2e/app.cy.js
deleted file mode 100644
index 764540993c64..000000000000
--- a/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es5/cypress/e2e/app.cy.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { numberOne } from '../../src/foo'
-
-it('works', () => {
-  const number = 1
-
-  expect(numberOne).to.equal(number)
-})
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es5/package.json b/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es5/package.json
new file mode 100644
index 000000000000..2e4ad67943ca
--- /dev/null
+++ b/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es5/package.json
@@ -0,0 +1,6 @@
+{
+  "devDependencies": {
+    "typescript": "4.7.3"
+  },
+  "projectFixtureDirectory": "simple_passing"
+}
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es5/src/foo.ts b/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es5/src/foo.ts
deleted file mode 100644
index 46448c0fd6a3..000000000000
--- a/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es5/src/foo.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const numberOne = 1
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es5/yarn.lock b/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es5/yarn.lock
new file mode 100644
index 000000000000..6774dcd69294
--- /dev/null
+++ b/system-tests/projects/config-cjs-and-esm/config-with-js-tsconfig-es5/yarn.lock
@@ -0,0 +1,8 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+typescript@4.7.3:
+  version "4.7.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.3.tgz#8364b502d5257b540f9de4c40be84c98e23a129d"
+  integrity sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA==
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-mjs-tsconfig-es5/cypress/e2e/app.cy.js b/system-tests/projects/config-cjs-and-esm/config-with-mjs-tsconfig-es5/cypress/e2e/app.cy.js
deleted file mode 100644
index 764540993c64..000000000000
--- a/system-tests/projects/config-cjs-and-esm/config-with-mjs-tsconfig-es5/cypress/e2e/app.cy.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { numberOne } from '../../src/foo'
-
-it('works', () => {
-  const number = 1
-
-  expect(numberOne).to.equal(number)
-})
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-mjs-tsconfig-es5/package.json b/system-tests/projects/config-cjs-and-esm/config-with-mjs-tsconfig-es5/package.json
index b7716e490ae7..2e4ad67943ca 100644
--- a/system-tests/projects/config-cjs-and-esm/config-with-mjs-tsconfig-es5/package.json
+++ b/system-tests/projects/config-cjs-and-esm/config-with-mjs-tsconfig-es5/package.json
@@ -1,5 +1,6 @@
 {
-  "dependencies": {
+  "devDependencies": {
     "typescript": "4.7.3"
-  }
-}
\ No newline at end of file
+  },
+  "projectFixtureDirectory": "simple_passing"
+}
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-mjs-tsconfig-es5/src/foo.ts b/system-tests/projects/config-cjs-and-esm/config-with-mjs-tsconfig-es5/src/foo.ts
deleted file mode 100644
index 46448c0fd6a3..000000000000
--- a/system-tests/projects/config-cjs-and-esm/config-with-mjs-tsconfig-es5/src/foo.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const numberOne = 1
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-mjs/cypress/e2e/app.cy.js b/system-tests/projects/config-cjs-and-esm/config-with-mjs/cypress/e2e/app.cy.js
deleted file mode 100644
index 92e444116c98..000000000000
--- a/system-tests/projects/config-cjs-and-esm/config-with-mjs/cypress/e2e/app.cy.js
+++ /dev/null
@@ -1,3 +0,0 @@
-it('works', () => {
-  expect(true).to.be.true
-})
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-mjs/package.json b/system-tests/projects/config-cjs-and-esm/config-with-mjs/package.json
new file mode 100644
index 000000000000..8a5a20589141
--- /dev/null
+++ b/system-tests/projects/config-cjs-and-esm/config-with-mjs/package.json
@@ -0,0 +1,3 @@
+{
+  "projectFixtureDirectory": "simple_passing"
+}
\ No newline at end of file
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-mjs/yarn.lock b/system-tests/projects/config-cjs-and-esm/config-with-mjs/yarn.lock
new file mode 100644
index 000000000000..fb57ccd13afb
--- /dev/null
+++ b/system-tests/projects/config-cjs-and-esm/config-with-mjs/yarn.lock
@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-ts-module-and-esbuild/cypress/e2e/app.cy.js b/system-tests/projects/config-cjs-and-esm/config-with-ts-module-and-esbuild/cypress/e2e/app.cy.js
deleted file mode 100644
index 92e444116c98..000000000000
--- a/system-tests/projects/config-cjs-and-esm/config-with-ts-module-and-esbuild/cypress/e2e/app.cy.js
+++ /dev/null
@@ -1,3 +0,0 @@
-it('works', () => {
-  expect(true).to.be.true
-})
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-ts-module-and-esbuild/package.json b/system-tests/projects/config-cjs-and-esm/config-with-ts-module-and-esbuild/package.json
index c4b4e66fca18..c51b9ac1e17e 100644
--- a/system-tests/projects/config-cjs-and-esm/config-with-ts-module-and-esbuild/package.json
+++ b/system-tests/projects/config-cjs-and-esm/config-with-ts-module-and-esbuild/package.json
@@ -1,6 +1,8 @@
 {
   "devDependencies": {
-    "esbuild": "0.14.25"
+    "esbuild": "0.14.25",
+    "typescript": "4.7.3"
   },
-  "type": "module"
+  "type": "module",
+  "projectFixtureDirectory": "simple_passing"
 }
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-ts-module-and-esbuild/yarn.lock b/system-tests/projects/config-cjs-and-esm/config-with-ts-module-and-esbuild/yarn.lock
index 32ab7274b41b..dc62f9d74742 100644
--- a/system-tests/projects/config-cjs-and-esm/config-with-ts-module-and-esbuild/yarn.lock
+++ b/system-tests/projects/config-cjs-and-esm/config-with-ts-module-and-esbuild/yarn.lock
@@ -127,3 +127,8 @@ esbuild@0.14.25:
     esbuild-windows-32 "0.14.25"
     esbuild-windows-64 "0.14.25"
     esbuild-windows-arm64 "0.14.25"
+
+typescript@4.7.3:
+  version "4.7.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.3.tgz#8364b502d5257b540f9de4c40be84c98e23a129d"
+  integrity sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA==
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-ts-module-component/package.json b/system-tests/projects/config-cjs-and-esm/config-with-ts-module-component/package.json
index 794a034007ef..dc736e57df85 100644
--- a/system-tests/projects/config-cjs-and-esm/config-with-ts-module-component/package.json
+++ b/system-tests/projects/config-cjs-and-esm/config-with-ts-module-component/package.json
@@ -2,7 +2,9 @@
   "devDependencies": {
     "@cypress/vite-dev-server": "^2.0.0",
     "find-up": "6.3.0",
+    "typescript": "4.7.3",
     "vite": "2.8.6"
   },
-  "type": "module"
+  "type": "module",
+  "projectFixtureDirectory": "simple_passing"
 }
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-ts-module-component/src/app.cy.js b/system-tests/projects/config-cjs-and-esm/config-with-ts-module-component/src/app.cy.js
deleted file mode 100644
index 92e444116c98..000000000000
--- a/system-tests/projects/config-cjs-and-esm/config-with-ts-module-component/src/app.cy.js
+++ /dev/null
@@ -1,3 +0,0 @@
-it('works', () => {
-  expect(true).to.be.true
-})
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-ts-module-component/yarn.lock b/system-tests/projects/config-cjs-and-esm/config-with-ts-module-component/yarn.lock
index 59aca2feffe2..3d0b4f6c5c28 100644
--- a/system-tests/projects/config-cjs-and-esm/config-with-ts-module-component/yarn.lock
+++ b/system-tests/projects/config-cjs-and-esm/config-with-ts-module-component/yarn.lock
@@ -261,6 +261,11 @@ 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 "sha1-btpL00SjyUrqN21MwxvHcxEDngk= sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
 
+typescript@4.7.3:
+  version "4.7.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.3.tgz#8364b502d5257b540f9de4c40be84c98e23a129d"
+  integrity sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA==
+
 vite@2.8.6:
   version "2.8.6"
   resolved "https://registry.yarnpkg.com/vite/-/vite-2.8.6.tgz#32d50e23c99ca31b26b8ccdc78b1d72d4d7323d3"
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-ts-module/cypress/e2e/app.cy.js b/system-tests/projects/config-cjs-and-esm/config-with-ts-module/cypress/e2e/app.cy.js
deleted file mode 100644
index 92e444116c98..000000000000
--- a/system-tests/projects/config-cjs-and-esm/config-with-ts-module/cypress/e2e/app.cy.js
+++ /dev/null
@@ -1,3 +0,0 @@
-it('works', () => {
-  expect(true).to.be.true
-})
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-ts-module/package.json b/system-tests/projects/config-cjs-and-esm/config-with-ts-module/package.json
index a3ceda454f1a..8212f73d457c 100644
--- a/system-tests/projects/config-cjs-and-esm/config-with-ts-module/package.json
+++ b/system-tests/projects/config-cjs-and-esm/config-with-ts-module/package.json
@@ -3,5 +3,6 @@
     "find-up": "6.3.0",
     "typescript": "4.7.3"
   },
-  "type": "module"
+  "type": "module",
+  "projectFixtureDirectory": "simple_passing"
 }
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-ts-tsconfig-es5/cypress/e2e/app.cy.js b/system-tests/projects/config-cjs-and-esm/config-with-ts-tsconfig-es5/cypress/e2e/app.cy.js
deleted file mode 100644
index 764540993c64..000000000000
--- a/system-tests/projects/config-cjs-and-esm/config-with-ts-tsconfig-es5/cypress/e2e/app.cy.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { numberOne } from '../../src/foo'
-
-it('works', () => {
-  const number = 1
-
-  expect(numberOne).to.equal(number)
-})
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-ts-tsconfig-es5/package.json b/system-tests/projects/config-cjs-and-esm/config-with-ts-tsconfig-es5/package.json
new file mode 100644
index 000000000000..2e4ad67943ca
--- /dev/null
+++ b/system-tests/projects/config-cjs-and-esm/config-with-ts-tsconfig-es5/package.json
@@ -0,0 +1,6 @@
+{
+  "devDependencies": {
+    "typescript": "4.7.3"
+  },
+  "projectFixtureDirectory": "simple_passing"
+}
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-ts-tsconfig-es5/src/foo.ts b/system-tests/projects/config-cjs-and-esm/config-with-ts-tsconfig-es5/src/foo.ts
deleted file mode 100644
index 46448c0fd6a3..000000000000
--- a/system-tests/projects/config-cjs-and-esm/config-with-ts-tsconfig-es5/src/foo.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const numberOne = 1
diff --git a/system-tests/projects/config-cjs-and-esm/config-with-ts-tsconfig-es5/yarn.lock b/system-tests/projects/config-cjs-and-esm/config-with-ts-tsconfig-es5/yarn.lock
new file mode 100644
index 000000000000..6774dcd69294
--- /dev/null
+++ b/system-tests/projects/config-cjs-and-esm/config-with-ts-tsconfig-es5/yarn.lock
@@ -0,0 +1,8 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+typescript@4.7.3:
+  version "4.7.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.7.3.tgz#8364b502d5257b540f9de4c40be84c98e23a129d"
+  integrity sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA==
diff --git a/system-tests/projects/config-cjs-and-esm/ts-cjs-with-invalid-esm-only-import/package.json b/system-tests/projects/config-cjs-and-esm/ts-cjs-with-invalid-esm-only-import/package.json
new file mode 100644
index 000000000000..fbe848f4bd7e
--- /dev/null
+++ b/system-tests/projects/config-cjs-and-esm/ts-cjs-with-invalid-esm-only-import/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "find-up": "6.3.0",
+    "typescript": "4.7.3"
+  },
+  "projectFixtureDirectory": "simple_passing"
+}
\ No newline at end of file

From 27bf091475a5f0c87d76f3b8d03779c88ee09664 Mon Sep 17 00:00:00 2001
From: Lachlan Miller <lachlan.miller.1990@outlook.com>
Date: Thu, 9 Jun 2022 19:46:03 +1000
Subject: [PATCH 16/16] fix test

---
 .../config-with-ts-module-component/cypress.config.ts         | 1 +
 system-tests/test/config_modules_spec.ts                      | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/system-tests/projects/config-cjs-and-esm/config-with-ts-module-component/cypress.config.ts b/system-tests/projects/config-cjs-and-esm/config-with-ts-module-component/cypress.config.ts
index c9d48b8594c2..c3ce658e8927 100644
--- a/system-tests/projects/config-cjs-and-esm/config-with-ts-module-component/cypress.config.ts
+++ b/system-tests/projects/config-cjs-and-esm/config-with-ts-module-component/cypress.config.ts
@@ -3,6 +3,7 @@ import { devServer } from '@cypress/vite-dev-server'
 
 export default defineConfig({
   component: {
+    specPattern: 'src/**/*.ts',
     supportFile: false,
     async setupNodeEvents (_, config) {
       await import('find-up')
diff --git a/system-tests/test/config_modules_spec.ts b/system-tests/test/config_modules_spec.ts
index c64583ff54dc..cabcb190a23c 100644
--- a/system-tests/test/config_modules_spec.ts
+++ b/system-tests/test/config_modules_spec.ts
@@ -23,10 +23,10 @@ describe('cypress config with esm and cjs', function () {
     })
   })
 
-  systemTests.it('supports modules and cjs in compoent testing', {
+  systemTests.it('supports modules and cjs in component testing', {
     project: 'config-cjs-and-esm/config-with-ts-module-component',
     testingType: 'component',
-    spec: 'src/app.cy.js',
+    spec: 'src/foo.ts',
     browser: 'chrome',
     expectedExitCode: 0,
   })