TypeError: chalk.Instance is not a constructor

Current behavior

Every first test, when run by the cypress run command, crashes with an error:

Oops...we found an error preparing this test file:

  cypress\e2e\aatest.js

The error was:

TypeError: chalk.Instance is not a constructor
    at new TsconfigPathsPlugin (C:\Users\dimohqa\AppData\Local\Cypress\Cache\8.3.0\Cypress\resources\app\packages\server\node_modules\tsconfig-paths-webpack-plugin\lib\plugin.js:17:47)
    at addTypeScriptConfig (C:\Users\dimohqa\AppData\Local\Cypress\Cache\8.3.0\Cypress\resources\app\packages\server\node_modules\@cypress\webpack-batteries-included-preprocessor\index.js
:54:37)
    at Object.handler (C:\Users\dimohqa\AppData\Local\Cypress\Cache\8.3.0\Cypress\resources\app\packages\server\node_modules\@cypress\webpack-batteries-included-preprocessor\index.js:166:
7)
    at invoke (C:\Users\dimohqa\AppData\Local\Cypress\Cache\8.3.0\Cypress\resources\app\packages\server\lib\plugins\child\run_plugins.js:22:16)
    at C:\Users\dimohqa\AppData\Local\Cypress\Cache\8.3.0\Cypress\resources\app\packages\server\lib\plugins\util.js:45:14
    at tryCatcher (C:\Users\dimohqa\AppData\Local\Cypress\Cache\8.3.0\Cypress\resources\app\packages\server\node_modules\bluebird\js\release\util.js:16:23)
    at Function.Promise.attempt.Promise.try (C:\Users\dimohqa\AppData\Local\Cypress\Cache\8.3.0\Cypress\resources\app\packages\server\node_modules\bluebird\js\release\method.js:39:29)
    at Object.wrapChildPromise (C:\Users\dimohqa\AppData\Local\Cypress\Cache\8.3.0\Cypress\resources\app\packages\server\lib\plugins\util.js:44:23)
    at Object.wrap (C:\Users\dimohqa\AppData\Local\Cypress\Cache\8.3.0\Cypress\resources\app\packages\server\lib\plugins\child\preprocessor.js:28:8)
    at execute (C:\Users\dimohqa\AppData\Local\Cypress\Cache\8.3.0\Cypress\resources\app\packages\server\lib\plugins\child\run_plugins.js:119:27)
    at EventEmitter.<anonymous> (C:\Users\dimohqa\AppData\Local\Cypress\Cache\8.3.0\Cypress\resources\app\packages\server\lib\plugins\child\run_plugins.js:202:5)
    at EventEmitter.emit (events.js:315:20)
    at process.<anonymous> (C:\Users\dimohqa\AppData\Local\Cypress\Cache\8.3.0\Cypress\resources\app\packages\server\lib\plugins\util.js:19:22)
    at process.emit (events.js:315:20)
    at process.emit (C:\Users\dimohqa\AppData\Local\Cypress\Cache\8.3.0\Cypress\resources\app\packages\server\node_modules\source-map-support\source-map-support.js:495:21)
    at emit (internal/child_process.js:903:12)
    at processTicksAndRejections (internal/process/task_queues.js:81:21)

This occurred while Cypress was compiling and bundling your test code. This is usually caused by:

- A missing file or dependency
- A syntax error in the file or one of its dependencies

Fix the error in your code and re-run your tests.

If run the cypress with the command cypress open, all tests pass. The error repeats from version> 4.12.1

Desired behavior

No response

Test code to reproduce

package:

  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/plugin-proposal-class-properties": "^7.3.0",
    "@babel/preset-env": "^7.9.5",
    "@babel/preset-react": "^7.9.4",
    "@babel/preset-typescript": "^7.9.0",
    "@testing-library/cypress": "^6.0.0",
    "@testing-library/jest-dom": "^5.11.2",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/koa": "^2.11.3",
    "@types/koa-router": "^7.0.35",
    "@types/node": "^10.17.28",
    "@types/react-router-dom": "^4.3.1",
    "@types/sinon": "^7.5.2",
    "@typescript-eslint/eslint-plugin": "^4.6.0",
    "@typescript-eslint/parser": "^4.6.0",
    "awesome-typescript-loader": "^5.2.1",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^25.3.0",
    "babel-loader": "^8.1.0",
    "cross-env": "^5.2.1",
    "cypress": "^8.2.0",
    "eslint": "^7.12.1",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-config-prettier": "^6.15.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-import-resolver-typescript": "^2.3.0",
    "eslint-plugin-cypress": "^2.11.2",
    "eslint-plugin-flowtype": "^5.2.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
    "git-cz": "^1.8.0",
    "husky": "^3.1.0",
    "jest": "^25.3.0",
    "lint-staged": "^9.5.0",
    "nodemon": "^1.18.9",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.1.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "sinon": "^7.3.0",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "@types/koa-mount": "^3.0.1",
    "awilix": "^4.2.5",
    "awilix-koa": "^3.0.1",
    "awilix-router-core": "^1.4.0",
    "concurrently": "^5.3.0",
    "dotenv": "^6.1.0",
    "jsdom": "^14.0.0",
    "koa": "^2.6.2",
    "koa-body": "^4.0.4",
    "koa-bodyparser": "^4.3.0",
    "koa-compose": "^4.1.0",
    "koa-cors": "0.0.16",
    "koa-mount": "^4.0.0",
    "koa-router": "^7.4.0",
    "koa-static": "^5.0.0",
    "koa-views": "^6.1.5",
    "minimist": "^1.2.5",
    "msw": "^0.20.5",
    "node-fetch": "^2.6.0",
    "path-to-regexp": "^3.0.0",
    "pug": "^2.0.3",
    "request": "^2.88.2",
    "ts-loader": "^8.3.0",
    "ts-node": "^7.0.1",
    "typescript": "^4.3.5",
    "uuid": "^3.3.3"
  }
}

tsconfig

{
  "compilerOptions": {
    "incremental": true,
    "allowJs": true,
    "esModuleInterop": true,
    "target": "ES2019",
    "noImplicitAny": false,
    "noImplicitThis": false,
    "moduleResolution": "node",
    "tsBuildInfoFile": "./buildcache/front-end",
    "declaration": false,
    "sourceMap": true,
    "outDir": "dist",
    "baseUrl": ".",
    "skipLibCheck": true,
    "jsx": "react",
    "lib": ["dom", "es2015", "es2016", "es2017", "es2018", "ES2019", "ES2020"],
    "typeRoots": ["./node_modules/koa-body", "node_modules/@types"],
    "paths": {
      "@/helpers/*": ["client/src/helpers/*"],
      "@/components/*": ["client/src/components/*"],
      "@/views/*": ["client/src/views/*"],
      "@/containers/*": ["client/src/containers/*"],
      "@/rootTypes/*": ["types/*"],
      "@/types/*": ["client/src/types/*"],
      "@/store/*": ["client/src/store/*"],
      "@/services/*": ["client/src/services/*"],
      "@/constants/*": ["client/src/constants/*"],
      "*": ["node_modules/*"]
    },
    "types": ["jest", "cypress", "@types/testing-library__cypress", "node"]
  },
  "project": "./",
  "include": [
    "server/",
    "client/",
    "./webpack.config.js",
    "./index.ts",
    "./types",
    "./cypress",
    "./test",
    "./constants",
  ],
  "exclude": ["node_modules"]
}

webpack

/* eslint-disable */
const path = require('path');
const webpack = require('webpack');
const fs = require('fs');

const nodeModules = {};
fs.readdirSync(path.join(__dirname, 'node_modules'))
  .filter(x => ['.bin'].indexOf(x) === -1)
  .forEach(mod => {
    nodeModules[mod] = `commonjs ${mod}`;
  });

module.exports = {
  devtool: false,
  target: 'node',
  entry: './index.ts',
  output: {
    path: path.join(__dirname),
    filename: 'index.js',
  },
  resolve: {
    alias: {
      '@/rootTypes': path.join(__dirname, './types'),
    },
    extensions: ['.js', '.ts'],
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
    ],
  },
  externals: nodeModules,
  plugins: [
    new webpack.DefinePlugin({
      __dirname: '__dirname',
    }),
    new webpack.optimize.AggressiveMergingPlugin(),
  ],
};

Cypress Version

8.3.0

Other

No response

[eppsilon]

I ran into this error while migrating from 5.6.0 to 6.9.1. The fix was to use the tsconfig.json recommended in the documentation.

Old:

{
  "compilerOptions": {
    "baseUrl": "./node_modules",
    "target": "es5",
    "lib": ["es5", "es2016.array.include", "dom"],
    "types": ["cypress", "fs-extra", "is-ci", "node"],
    "experimentalDecorators": true,
    "esModuleInterop": true
  },
  "include": ["**/*.ts"]
}

New:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress"]
  },
  "include": ["**/*.ts"]
}

[gnapse]

Same issue here.

So I tried deleting package-lock.json and running npm install. This takes the chalk error away, but brought in a new error:

Error: Cannot find module 'file:///Users/ernesto/code/doist/reactist/cypress.config.ts'
Require stack:
- /Users/ernesto/Library/Caches/Cypress/12.0.1/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_require_async_child.js
- /Users/ernesto/Library/Caches/Cypress/12.0.1/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/require_async_child.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:985:15)
    at Function.Module._resolveFilename (/Users/ernesto/Library/Caches/Cypress/12.0.1/Cypress.app/Contents/Resources/app/node_modules/tsconfig-paths/lib/register.js:75:40)
    at Function.Module._resolveFilename.sharedData.moduleResolveFilenameHook.installedValue [as _resolveFilename] (/Users/ernesto/Library/Caches/Cypress/12.0.1/Cypress.app/Contents/Resources/app/node_modules/@cspotcode/source-map-support/source-map-support.js:811:30)
    at Function.Module._load (node:internal/modules/cjs/loader:833:27)
    at Module.require (node:internal/modules/cjs/loader:1057:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at /Users/ernesto/Library/Caches/Cypress/12.0.1/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_require_async_child.js:106:34
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

And here’s what it looks like visually: