Unable to compile TypeScript with "moduleResolution": "bundler" option in v5

[karlhorky]

Current behavior

Originally reported by @MasonM in #26308 and closed because of Cypress v13.0.0 - but this release does not fix this

cc @jennifer-shehane @lmiller1990 - ideally #26308 would be unlocked and reopened, if you can do that

Copied issue below:

---

If you have a TypeScript project using the new "moduleResolution": "bundler" setting introduced in TypeScript 5, any attempts to run tests will cause the following error:

TSError: ⨯ Unable to compile TypeScript:
error TS5095: Option 'bundler' can only be used when 'module' is set to 'es2015' or later.

Desired behavior

Tests run successfully

Test code to reproduce

Reproduction 1

Courtesy of @MattyBalaam: https://github.com/MattyBalaam/cypress-ts-import

Reproduction 2

See error message and tsconfig.json below:

Your configFile is invalid: /home/runner/work/project/cypress.config.ts

It threw an error when required, check the stack trace below:

TSError: ⨯ Unable to compile TypeScript:
error TS5095: Option 'bundler' can only be used when 'module' is set to 'es2015' or later.

    at createTSError (/home/runner/.cache/Cypress/13.1.0/Cypress/resources/app/node_modules/ts-node/dist/index.js:311:16)
    at reportTSError (/home/runner/.cache/Cypress/13.1.0/Cypress/resources/app/node_modules/ts-node/dist/index.js:314:23)
    at /home/runner/.cache/Cypress/13.1.0/Cypress/resources/app/node_modules/ts-node/dist/index.js:686:17
    at Object.compile (/home/runner/.cache/Cypress/13.1.0/Cypress/resources/app/node_modules/ts-node/dist/index.js:743:35)
    at Module.m._compile (/home/runner/.cache/Cypress/13.1.0/Cypress/resources/app/node_modules/ts-node/dist/index.js:856:)
    at Module._extensions..js (node:internal/modules/cjs/loader:1252:10)
    at Object.require.extensions.<computed> [as .ts] (/home/runner/.cache/Cypress/13.1.0/Cypress/resources/app/node_modules/ts-node/dist/index.js:859:16)
    at Module.load (node:internal/modules/cjs/loader:1076:32)
    at Function.Module._load (node:internal/modules/cjs/loader:911:12)
    at Module.require (node:internal/modules/cjs/loader:1100:19)
    at require (node:internal/modules/cjs/helpers:108:18)
    at loadFile (/home/runner/.cache/Cypress/13.1.0/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_require_async_child.js:89:14)
    at EventEmitter.<anonymous> (/home/runner/.cache/Cypress/13.1.0/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_require_async_child.js:116:)
    at EventEmitter.emit (node:events:513:28)
    at EventEmitter.emit (node:domain:9:12)
    at process.<anonymous> (/home/runner/.cache/Cypress/13.1.0/Cypress/resources/app/node_modules/@packages/server/lib/plugins/util.js:33:22)
Test run failed, code 1

tsconfig.json

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "UpLeveled Node + React TSConfig",
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "module": "ESNext",
    "target": "ES2015",
    "moduleResolution": "Bundler",
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "downlevelIteration": true,
    "forceConsistentCasingInFileNames": true,
    "jsx": "preserve",
    "noEmit": true,
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true,
    "strict": true,
    "incremental": true,
    "noUncheckedIndexedAccess": true
  },
  "include": [
    "**/.eslintrc.cjs",
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "**/*.js",
    "**/*.jsx",
    "**/*.cjs",
    "**/*.mjs"
  ],
  "exclude": ["node_modules", "build", "public", "scripts"]
}

Cypress Version

13.1.0

Node version

v18.17.1

Operating System

macOS Ventura 13.5 (22G74)

Debug Logs

No response

Other

No response

[AdrianAndersen]

+1 on this. I am having the same issue.

[nagash77]

@karlhorky thank you for opening this issue. Internally we still largely use TS4 so there are some scenarios that still popup as problematic. I don't have an ETA on a fix for this, but if folks want to contribute a fix (with tests) we would be happy to review.

[thejacer87]

i just read through that closed issue. i am also running into the issue with ^13.1.0

[dotZak]

I encountered this problem today while setting up a Next.JS project. To confirm the issue I created a greenfield project to test it.

Workaround

For anyone looking for a workaround who lands here before they see the other related issues (now closed), here is a workaround copied from issue #27448:

{
  // Leave this section as is.
  "compilerOptions": {
    "module": "esnext",
    "moduleResolution": "bundler",
    "plugins": [],
    "paths": {}
  },
  // Add this section.
  "ts-node": {
    "compilerOptions": {
      "module": "ESNext",
      "moduleResolution": "Node"
    }
  },
}

Recreating the issue in a new project

Here are my steps and results. I hope this is helpful for whoever ends up working on a resolution.

System info

OS: macOS 14.0 Beta (23A5337a)
node: v20.6.1 (I first encountered the issue on 18, then upgraded and tried again)
npm: v9.8.1

Steps to reproduce

1. Create a next app using npx

% npx create-next-app@latest --typescript
✔ What is your project named? … next-cypress
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias? … No / Yes
Creating a new Next.js app in /Users/…/Developer/next-cypress.

Using npm.

Initializing project with template: app


Installing dependencies:
- react
- react-dom
- next
- typescript
- @types/react
- @types/node
- @types/react-dom
- eslint
- eslint-config-next


added 277 packages, and audited 278 packages in 10s

106 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Initialized a git repository.

Success! Created next-cypress at /Users/…/Developer/next-cypress

2. Enter the next app and install Cypress via NPM

… Developer % cd next-cypress
… next-cypress % npm i cypress -D

3. Install cypress

% npm run cypress install

> next-cypress@0.1.0 cypress
> cypress install

Installing Cypress (version: 13.1.0)

✔  Downloaded Cypress
✔  Unzipped Cypress
✔  Finished Installation /Users/zakknudsen/Library/Caches/Cypress/13.1.0

You can now open Cypress by running: node_modules/.bin/cypress open

https://on.cypress.io/installing-cypress

4. Run cypress open

% npm run cypress open

> next-cypress@0.1.0 cypress
> cypress open

It looks like this is your first time using Cypress: 13.1.0

✔  Verified Cypress! /Users/…/Library/Caches/Cypress/13.1.0/Cypress.app

Opening Cypress...

DevTools listening on ws://127.0.0.1:49466/devtools/browser/…
2023-09-12 14:25:15.233 Cypress[4606:45143] WARNING: Secure coding is not enabled for restorable state! Enable secure coding by implementing NSApplicationDelegate.applicationSupportsSecureRestorableState: and returning YES.
Missing baseUrl in compilerOptions. tsconfig-paths will be skipped
/Users/…/Library/Caches/Cypress/13.1.0/Cypress.app/Contents/Resources/app/node_modules/ts-node/dist/index.js:311
        return new TSError(diagnosticText, diagnosticCodes, diagnostics);
               ^
TSError: ⨯ Unable to compile TypeScript:
error TS5095: Option 'bundler' can only be used when 'module' is set to 'es2015' or later.

    at createTSError (/Users/…/Library/Caches/Cypress/13.1.0/Cypress.app/Contents/Resources/app/node_modules/ts-node/dist/index.js:311:16)
    at reportTSError (/Users/…/Library/Caches/Cypress/13.1.0/Cypress.app/Contents/Resources/app/node_modules/ts-node/dist/index.js:314:23)
    at /Users/…/Library/Caches/Cypress/13.1.0/Cypress.app/Contents/Resources/app/node_modules/ts-node/dist/index.js:686:17
    at Object.compile (/Users/…/Library/Caches/Cypress/13.1.0/Cypress.app/Contents/Resources/app/node_modules/ts-node/dist/index.js:743:35)
    at Module.m._compile (/Users/…/Library/Caches/Cypress/13.1.0/Cypress.app/Contents/Resources/app/node_modules/ts-node/dist/index.js:856:36)
    at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
    at Object.require.extensions.<computed> [as .js] (/Users/…/Library/Caches/Cypress/13.1.0/Cypress.app/Contents/Resources/app/node_modules/ts-node/dist/index.js:859:16)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Function.Module._load (node:internal/modules/cjs/loader:938:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12) {
  diagnosticCodes: [ 5095 ]
}
[4606:0912/142901.475308:ERROR:devtools_http_handler.cc(426)] GetMimeType doesn't know mime type for: browser/… text/plain will be returned
[4606:0912/142901.475478:ERROR:devtools_http_handler.cc(426)] GetMimeType doesn't know mime type for: browser/… text/plain will be returned
^C✔  Verified Cypress! /Users/…/Library/Caches/Cypress/13.1.0/Cypress.app

System information after installing Cypress

Output from % npm run cypress version:

> next-cypress@0.1.0 cypress
> cypress version

Cypress package version: 13.1.0
Cypress binary version: 13.1.0
Electron version: 21.0.0
Bundled Node version: 16.16.0

Output from npm run cypress --version:

9.8.1

Output from % npm run cypress info:

> next-cypress@0.1.0 cypress
> cypress info


DevTools listening on ws://127.0.0.1:49602/devtools/browser/…
2023-09-12 14:33:32.459 Cypress[5751:51459] WARNING: Secure coding is not enabled for restorable state! Enable secure coding by implementing NSApplicationDelegate.applicationSupportsSecureRestorableState: and returning YES.
Displaying Cypress info...

Detected 2 browsers installed:

1. Chrome
  - Name: chrome
  - Channel: stable
  - Version: 116.0.5845.187
  - Executable: /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

2. Firefox
  - Name: firefox
  - Channel: stable
  - Version: 117.0
  - Executable: /Applications/Firefox.app/Contents/MacOS/firefox

Note: to run these browsers, pass <name>:<channel> to the '--browser' field

Examples:
- cypress run --browser firefox
- cypress run --browser chrome

Learn More: https://on.cypress.io/launching-browsers

Proxy Settings: none detected
Environment Variables: none detected

Application Data: /Users/…/Library/Application Support/cypress/cy/development
Browser Profiles: /Users/…/Library/Application Support/cypress/cy/development/browsers
Binary Caches: /Users/…/Library/Caches/Cypress

Cypress Version: 13.1.0 (stable)
System Platform: darwin (23.0.0)
System Memory: 8.59 GB free 472 MB

[lmiller1990]

I thought I tested this with a brand new Next.js project.

We also have a test for projects using module: bundler: https://github.com/cypress-io/cypress/pull/27484/files#diff-9bb83cb045328bd56f40ad8b34ed1b7ede44bd44ef6191279a1ac0fd3c14bc57R4

What is going on -- is this test not configured correctly?

[scottohara]

What is going on -- is this test not configured correctly?

Not sure if this is the issue (as I'm not sure exactly how the system-tests work), but I noticed that the package.json file specifies typescript@4.7.3, but the "bundler" moduleResolution option was only added in typescript@5.0.0.

Would the TS version in that system-test be causing the test to be a false positive?

(For what it's worth, like others here I'm still getting the same error with Cypress 13, so it would seem that the issue is not resolved)

[softcam-henrique]

I am having the same issue.