Cypress doesn't evaluate "esModuleInterop": true in cypress/tsconfig.json?

[tanakaworld]

Current behavior:

There is a plugin .ts file.

// cypress/plugins/index.ts
import webpackPreprocessor from "@cypress/webpack-preprocessor";
import webpackOptions from "../webpack.config";

const pluginsFunction: Cypress.PluginConfig = (on) => {
  on(
    "file:preprocessor",
    webpackPreprocessor({
      webpackOptions,
    })
  );
};

export default pluginsFunction;

// cypress/tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "module": "commonjs",
    "moduleResolution": "node",
    "declaration": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "removeComments": true,
    "suppressImplicitAnyIndexErrors": true,
    "declarationMap": true,
    "sourceMap": true,
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress"],
    "paths": {
      "~/*": ["./*"]
    }
  },
  "exclude": ["node_modules"],
  "include": ["**/*.ts"]
}

Then it failed to initialize Cypress.app with the following error.

TypeError: fork_ts_checker_webpack_plugin_1.default is not a constructor

TypeError: fork_ts_checker_webpack_plugin_1.default is not a constructor
    at Object.<anonymous> (/Users/tanakaworld/ws/github.com/tanakaworld/sandbox-cypress/cypress/webpack.config.ts:16:5)
    at Module._compile (internal/modules/cjs/loader.js:967:30)
    at Module.m._compile (/Users/tanakaworld/Library/Caches/Cypress/5.0.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/ts-node/src/index.ts:536:23)
    at Module._extensions..js (internal/modules/cjs/loader.js:1004:10)
    at Object.require.extensions.<computed> [as .ts] (/Users/tanakaworld/Library/Caches/Cypress/5.0.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/ts-node/src/index.ts:539:12)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Module._load (internal/modules/cjs/loader.js:727:14)
    at Function.Module._load (electron/js2c/asar.js:769:28)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/Users/tanakaworld/ws/github.com/tanakaworld/sandbox-cypress/cypress/plugins/index.ts:2:1)
    at Module._compile (internal/modules/cjs/loader.js:967:30)
    at Module.m._compile (/Users/tanakaworld/Library/Caches/Cypress/5.0.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/ts-node/src/index.ts:536:23)
    at Module._extensions..js (internal/modules/cjs/loader.js:1004:10)
    at Object.require.extensions.<computed> [as .ts] (/Users/tanakaworld/Library/Caches/Cypress/5.0.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/ts-node/src/index.ts:539:12)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Module._load (internal/modules/cjs/loader.js:727:14)
    at Function.Module._load (electron/js2c/asar.js:769:28)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at module.exports (/Users/tanakaworld/Library/Caches/Cypress/5.0.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_plugins.js:192:15)
    at Object.<anonymous> (/Users/tanakaworld/Library/Caches/Cypress/5.0.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/index.js:8:25)

Desired behavior:

It should work with import syntax when "esModuleInterop": true is in tsconfig.json.

Test code to reproduce

The verify/v5.0.0 branch in this repo. It reproduces the same error.

Versions

• cypress: v5.0.0
• Others: https://github.com/tanakaworld/sandbox-cypress/blob/verify/v5.0.0/package.json#L20-L37.

[jennifer-shehane]

I am able to recreate this behavior in 5.0.0 (although slightly different error msg).

Repro

package.json

{
  "devDependencies": {
    "@babel/core": "^7.11.1",
    "@babel/preset-env": "^7.11.0",
    "@cypress/webpack-preprocessor": "^5.4.4",
    "babel-loader": "^8.1.0",
    "cypress": "5.0.0",
    "typescript": "^3.9.7",
    "webpack": "^4.44.1"
  }
}

cypress/plugins/index.ts

import webpackPreprocessor from "@cypress/webpack-preprocessor";

module.exports = (on, config) => {
  on("file:preprocessor", webpackPreprocessor({}));
}

cypress/tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "module": "commonjs",
    "moduleResolution": "node",
    "declaration": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "removeComments": true,
    "suppressImplicitAnyIndexErrors": true,
    "declarationMap": true,
    "sourceMap": true,
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress"],
    "paths": {
      "~/*": ["./*"]
    }
  },
  "exclude": ["node_modules"],
  "include": ["**/*.ts"]
}

4.12.1

5.0.0

[robcresswell]

This might be a bug in the webpack preprocessor itself. Its doing a namespace export of a callable, which isn't valid in ES modules AFAIK.

Does import * as webpackPreprocessor from "@cypress/webpack-preprocessor"; (a namespace import) work?

[robcresswell]

The safest fix would probably be to change the preprocessor to do export const webpackPreprocessor, so that consumers can use a named import, which is compatible with both CJS and ESM, and then all this synthetic defaults and transpiling issue goes away.

Unfortunately, thats a breaking change I guess

[tanakaworld]

Thanks for your investigation!

Does import * as webpackPreprocessor from "@cypress/webpack-preprocessor"; (a namespace import) work?

It doesn't work too.

[chrisbreiding]

It looks like the issue is that the tsconfig.json doesn't get loaded when it's in the cypress directory, whereas it does get loaded if it's moved to the root of the project. I was able to confirm this by trying out the "downlevelIteration" property and seeing it fail to work when the tsconfig.json was in cypress but work when in the project root.

I'm still looking into why that is and working on a fix for it.

[chrisbreiding]

I confirmed the issue is that ts-node resolves the tsconfig.json by default from the cwd, so a tsconfig.json in the cypress is never loaded. It's only made apparent now because we turned off forcing "esModuleInterop" to true in 5.0.0 and it's one of only a couple options that affect the runtime. Those runtime options are all that really matter as far the plugins file goes, since we only transpile it and don't type-check it. (cypress/tsconfig.json does get loaded by your IDE (e.g. VSCode), so all the non-runtime type-checking options take effect for that purpose.)

I'm working on a fix that will now resolve the tsconfig.json starting with the directory that the plugins file is in, so cypress/tsconfig.json or even cypress/plugins/tsconfig.json will properly be loaded.

@tanakaworld In the meantime, a potential workaround is to add "esModuleInterop": true to the tsconfig.json in your project root.

[tanakaworld]

@tanakaworld In the meantime, a potential workaround is to add "esModuleInterop": true to the tsconfig.json in your project root.

Thanks! I've confirmed that tsconfig.json in the project root works correctly 👍 .

I think this issue should be fixed because the document says:

Configure tsconfig.json
We recommend the following configuration in a tsconfig.json inside your cypress folder.
https://docs.cypress.io/guides/tooling/typescript-support.html#Configure-tsconfig-json

[cypress-bot]

The code for this is done in cypress-io/cypress#8377, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

[cypress-bot]

Released in 5.1.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v5.1.0, please open a new issue.