cypress-io / cypress

Fast, easy and reliable testing for anything that runs in a browser.
https://cypress.io
MIT License
46.71k stars 3.16k forks source link

5.4.0 Regression: TypeError: TsconfigPaths.loadConfig if not a function #9326

Closed zbigniewkalinowski closed 3 years ago

zbigniewkalinowski commented 3 years ago

Cypress is crashing with following message: obraz

The same in testrunner: obraz

This test file is running correctly in cypress 5.3.0 version and lower. Please help me!

Test code to reproduce

package.json file:

{
  "name": "sa-portal",
  "homepage": "http://localhost:3000/SOLOCOOPREFIX",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^3.4.1",
    "@date-io/moment": "^1.1.0",
    "@material-ui/core": "^3.9.2",
    "@material-ui/icons": "^4.5.1",
    "@rematch/core": "^1.4.0",
    "@rematch/select": "^2.0.5",
    "@types/jest": "24.0.0",
    "@types/node": "10.12.24",
    "@types/react": "16.8.2",
    "@types/react-dom": "16.8.0",
    "@types/react-select": "^3.0.0",
    "axios": "^0.19.0",
    "brace": "^0.11.1",
    "classnames": "^2.2.6",
    "connected-react-router": "^6.3.0",
    "file-saver": "^2.0.1",
    "js-cookie": "^2.2.0",
    "jsoneditor": "^9.0.3",
    "lodash": "^4.17.19",
    "ls": "^0.2.1",
    "material-ui-pickers": "^2.2.1",
    "memoize-one": "^5.1.1",
    "mocha": "5.2.0",
    "moment": "^2.24.0",
    "object-sizeof": "^1.6.0",
    "qs": "^6.6.0",
    "react": "^16.8.1",
    "react-diff-viewer": "^3.0.1",
    "react-dnd": "^9.3.2",
    "react-dnd-html5-backend": "^9.3.2",
    "react-dom": "^16.8.1",
    "react-helmet": "^5.2.1",
    "react-json-view": "^1.19.1",
    "react-redux": "^6.0.0",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "react-scripts": "^2.1.8",
    "react-select": "^3.0.4",
    "react-sizeme": "^2.5.2",
    "react-xml-viewer": "^1.1.0",
    "redux-form": "^8.3.6",
    "reselect": "^4.0.0",
    "rimraf": "^3.0.0",
    "styled-components": "^4.1.3",
    "typescript": "^4.1.2",
    "uuid": "^7.0.3",
    "yargs": "^14.2.0"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "build:test": "cross-env PUBLIC_URL=/ craco build",
    "deploy": "npm run build && node copyExtraFiles.js",
    "test": "craco test",
    "eject": "react-scripts eject",
    "lint": "tslint --project tsconfig.json",
    "ts": "tsc -p tsconfig.lint.json",
    "cypress:open": "cypress open",
    "cypress:run": "cypress run",
    "cypress:00": "cypress run -s cypress/endToEndTests/00*.js --browser chrome",
    "cypress:01": "cypress run -s cypress/endToEndTests/01*.js --browser chrome",
    "cypress:02": "cypress run -s cypress/endToEndTests/02*.js --browser chrome",
    "cypress:03": "cypress run -s cypress/endToEndTests/03*.js --browser chrome",
    "cypress:04": "cypress run -s cypress/endToEndTests/04*.js --browser chrome",
    "cypress:05": "cypress run -s cypress/endToEndTests/05*.js --browser chrome",
    "cypress:06": "cypress run -s cypress/endToEndTests/06*.js --browser chrome",
    "cypress:07": "cypress run -s cypress/endToEndTests/07*.js --browser chrome",
    "cypress:08": "cypress run -s cypress/endToEndTests/08*.js --browser chrome",
    "cypress:09": "cypress run -s cypress/endToEndTests/09*.js --browser chrome",
    "cypress:10": "cypress run -s cypress/endToEndTests/10*.js --browser chrome",
    "cypress:11": "cypress run -s cypress/endToEndTests/11*.js --browser chrome",
    "cypress:12": "cypress run -s cypress/endToEndTests/12*.js --browser chrome",
    "cypress:13": "cypress run -s cypress/endToEndTests/13*.js --browser chrome",
    "cypress:14": "cypress run -s cypress/endToEndTests/14*.js --browser chrome",
    "cypress:15": "cypress run -s cypress/endToEndTests/15*.js --browser chrome",
    "cypress:16": "cypress run -s cypress/endToEndTests/16*.js --browser chrome",
    "cypress:17": "cypress run -s cypress/endToEndTests/17*.js --browser chrome",
    "cypress:18": "cypress run -s cypress/endToEndTests/18*.js --browser chrome",
    "cypress:19": "cypress run -s cypress/endToEndTests/19*.js --browser chrome",
    "cypress:20": "cypress run -s cypress/endToEndTests/20*.js --browser chrome",
    "cypress:21": "cypress run -s cypress/endToEndTests/21*.js --browser chrome",
    "cypress:22": "cypress run -s cypress/endToEndTests/22*.js --browser chrome",
    "cypress:23": "cypress run -s cypress/endToEndTests/23*.js --browser chrome",
    "cypress:24": "cypress run -s cypress/endToEndTests/24*.js --browser chrome",
    "cypress:25": "cypress run -s cypress/endToEndTests/25*.js --browser chrome",
    "cypress:26": "cypress run -s cypress/endToEndTests/26*.js --browser chrome",
    "cypress:27": "cypress run -s cypress/endToEndTests/27*.js --browser chrome",
    "cypress:28": "cypress run -s cypress/endToEndTests/28*.js --browser chrome",
    "cypress:29": "cypress run -s cypress/endToEndTests/29*.js --browser chrome",
    "cypress:30": "cypress run -s cypress/endToEndTests/30*.js --browser chrome",
    "cypress:31": "cypress run -s cypress/endToEndTests/31*.js --browser chrome",
    "cypress:32": "cypress run -s cypress/endToEndTests/32*.js --browser chrome",
    "cypress:33": "cypress run -s cypress/endToEndTests/33*.js --browser chrome",
    "cypress:34": "cypress run -s cypress/endToEndTests/34*.js --browser chrome",
    "cypress:35": "cypress run -s cypress/endToEndTests/35*.js --browser chrome",
    "cypress:36": "cypress run -s cypress/endToEndTests/36*.js --browser chrome",
    "cypress:37": "cypress run -s cypress/endToEndTests/37*.js --browser chrome",
    "cypress:38": "cypress run -s cypress/endToEndTests/38*.js --browser chrome",
    "cypress:39": "cypress run -s cypress/endToEndTests/39*.js --browser chrome",
    "cypress:40": "cypress run -s cypress/endToEndTests/40*.js --browser chrome",
    "cypress:41": "cypress run -s cypress/endToEndTests/41*.js --browser chrome",
    "cypress:42": "cypress run -s cypress/endToEndTests/42*.js --browser chrome",
    "cypress:43": "cypress run -s cypress/endToEndTests/43*.js --browser chrome",
    "cypress:44": "cypress run -s cypress/endToEndTests/44*.js --browser chrome",
    "cypress:45": "cypress run -s cypress/endToEndTests/45*.js --browser chrome",
    "cypress:46": "cypress run -s cypress/endToEndTests/46*.js --browser chrome",
    "cypress:47": "cypress run -s cypress/endToEndTests/47*.js --browser chrome",
    "cypress:48": "cypress run -s cypress/endToEndTests/48*.js --browser chrome",
    "cypress:49": "cypress run -s cypress/endToEndTests/49*.js --browser chrome",
    "cypress:50": "cypress run -s cypress/endToEndTests/50*.js --browser chrome",
    "cypress:51": "cypress run -s cypress/endToEndTests/51*.js --browser chrome",
    "cypress:52": "cypress run -s cypress/endToEndTests/52*.js --browser chrome",
    "cypress:53": "cypress run -s cypress/endToEndTests/53*.js --browser chrome",
    "cypress:54": "cypress run -s cypress/endToEndTests/54*.js --browser chrome",
    "cypress:55": "cypress run -s cypress/endToEndTests/55*.js --browser chrome",
    "cypress:56": "cypress run -s cypress/endToEndTests/56*.js --browser chrome",
    "cypress:57": "cypress run -s cypress/endToEndTests/57*.js --browser chrome",
    "cypress:58": "cypress run -s cypress/endToEndTests/58*.js --browser chrome",
    "cypress:runChrome": "node editProgramsDates.js && cypress run --browser chrome",
    "cypress:runFirefox": "node editProgramsDates.js && cypress run --browser firefox",
    "cypress:runElectron": "node editProgramsDates.js && cypress run --browser electron --headed",
    "editDates": "node editProgramsDates.js"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "@types/axios": "^0.14.0",
    "@types/classnames": "^2.2.7",
    "@types/file-saver": "^2.0.0",
    "@types/js-cookie": "^2.2.2",
    "@types/jsoneditor": "^8.6.0",
    "@types/lodash": "^4.14.121",
    "@types/qs": "^6.5.1",
    "@types/react-helmet": "^5.0.8",
    "@types/react-redux": "^6.0.10",
    "@types/react-router": "^5.1.4",
    "@types/react-router-dom": "^5.1.3",
    "@types/redux-form": "^8.1.1",
    "@types/styled-components": "^4.1.8",
    "@types/uuid": "^7.0.2",
    "babel-plugin-styled-components": "^1.10.0",
    "cross-env": "^5.2.0",
    "cypress": "^6.0.0",
    "cypress-file-upload": "^3.2.0",
    "cypress-multi-reporters": "^1.4.0",
    "husky": "^1.3.1",
    "lint-staged": "^8.1.3",
    "mocha-junit-reporter": "^2.0.0",
    "mochawesome": "^4.1.0",
    "mochawesome-merge": "^2.1.0",
    "mochawesome-report-generator": "^5.1.0",
    "prettier": "^1.16.4",
    "servor": "^2.2.1",
    "tsconfig-paths-webpack-plugin": "^3.2.0",
    "tslint": "^5.12.1",
    "tslint-config-prettier": "^1.18.0",
    "tslint-eslint-rules": "^5.4.0",
    "tslint-microsoft-contrib": "^6.0.0",
    "tslint-plugin-prettier": "^2.0.1",
    "tslint-react": "^3.6.0",
    "typescript-styled-plugin": "^0.13.0",
    "typescript-tslint-plugin": "^0.3.1"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
}

index.js file:

import './commands'

const addContext = require('mochawesome/addContext')

Cypress.on('test:after:run', (test, runnable) => {
  if (test.state === 'failed') {
    const screenshotFileName = `${runnable.parent.title} -- ${test.title} (failed).png`
    addContext({ test }, `assets/${Cypress.spec.name}/${screenshotFileName}`)
  }
})

Cypress.on('window:before:load', function (win) {
  const original = win.EventTarget.prototype.addEventListener

  win.EventTarget.prototype.addEventListener = function () {
    if (arguments && arguments[0] === 'beforeunload') {
      return
    }
    return original.apply(this, arguments)
  }

  Object.defineProperty(win, 'onbeforeunload', {
    get: function () { },
    set: function () { }
  })
})

tsconfig-paths.json file:

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "src/*": ["src/*"]
    }
  }
}

tsconfig.json file:

{
  "extends": "./tsconfig-paths.json",
  "compilerOptions": {
    "target": "es2016",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve"
  },
  "plugins": [
    {
      "name": "typescript-styled-plugin"
    },
    {
      "name": "typescript-tslint-plugin",
      "alwaysShowRuleFailuresAsWarnings": false,
      "ignoreDefinitionFiles": true,
      "configFile": "./tslint.json",
      "disableNoUnusedVariableRule": true,
      "suppressWhileTypeErrorsPresent": false,
      "mockTypeScriptVersion": false
    }
  ],
  "include": [
    "src"
  ]
}

Versions

node: 14.15.1 typescript: 4.1.2 cypress: 5.4.0 and higher windows10 and MacOS

Last working cypress version: 5.3.0

zbigniewkalinowski commented 3 years ago

This is my test code that is crashing :)


describe('00-00 Test', () => {
  it('Test', () => {
    console.log('test')
  })
})
zbigniewkalinowski commented 3 years ago

obraz

zbigniewkalinowski commented 3 years ago

As I wrote - those tests are working fine in 5.3.0 version of Cypress

prodehghan commented 3 years ago

Also, there is no such code in Cypress repo. Maybe the issue is from the plugins you are using.

You should provide a reproducible example, so someone can look at the error.

zbigniewkalinowski commented 3 years ago

I created a project similar to our production project. It's also crashing. https://github.com/zbigniewkalinowski/cypress_crash

prodehghan commented 3 years ago

I was able to reproduce the issue using your provided project. The error originates from "tsconfig-paths-webpack-plugin" package, in file "node_modules\tsconfig-paths-webpack-plugin\lib\plugin.js".

jennifer-shehane commented 3 years ago

This is a regression in 5.4.0. I suspect this is related to https://github.com/cypress-io/cypress/pull/8826 which caused these other issues: https://github.com/cypress-io/cypress/issues/9145 and https://github.com/cypress-io/cypress/issues/8864 I can reproduce this with the following code:

Reproducible Example

spec.ts

it('Test', () => { })

tsconfig.json in root path

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "src/*": [
        "src/*"
      ]
    }
  }
}

package.json

{
  "devDependencies": {
    "cypress": "6.0.0",
    "typescript": "^4.1.2"
  }
}

5.3.0

Screen Shot 2020-11-30 at 1 04 04 PM

5.4.0

Screen Shot 2020-11-30 at 1 00 09 PM
zbigniewkalinowski commented 3 years ago

@jennifer-shehane any progress with this ticket?

anxolin commented 3 years ago

@jennifer-shehane same here, it would be nice to see some love in this issue.

github-actions[bot] commented 3 years ago

Internal Jira issue: TR-661

chrisbreiding commented 3 years ago

I've been doing some digging and think I got to the bottom of this.

The cause of the issue is setting "baseUrl": "./" combined with the the existence of tsconfig-paths.json at the root of the project. Setting the baseUrl changes TypeScript lookup resolution, causing it to look for files starting at the root of the project instead of looking in node_modules first. When tsconfig-paths-webpack-plugin packages tries to require('tsconfig-paths'), it ends up getting tsconfig-paths.json instead of the actual tsconfig-paths package.

I had to deal with this in our default preprocessor, which uses a package called tsconfig. Of course every TS project has a tsconfig.json, so if baseUrl was set to "./", it would load the json file instead of the package. I worked around it by aliasing the tsconfig package to tsconfig-package.

Unfortunately, I don't think we can do the same in this case, since it's a transient dependency, relied on indirectly by tsconfig-paths-webpack-plugin.

I think the only solution is to rename tsconfig-paths.json to something that won't conflict.

zbigniewkalinowski commented 3 years ago

It works - thank you :)