react component testing: Cannot find get-package-type/index via nyc
ahfarmer opened this issue · comments
Current behavior
When I run cypress run without using component testing, everything works fine. But when I add this line to my plugins/index.ts:
require("@cypress/react/plugins/load-webpack")(on, config);
I get the following error:
The function exported by the plugins file threw an error.
We invoked the function exported by `/Users/ahfarmer/dev/app/cypress/plugins/index.ts`, but it threw an error.
Error: Cannot find module '/Users/ahfarmer/dev/app/node_modules/get-package-type/index'
Require stack:
- /Users/ahfarmer/dev/app/node_modules/nyc/index.js
- /Users/ahfarmer/dev/app/node_modules/@cypress/code-coverage/task.js
- /Users/ahfarmer/dev/app/node_modules/@cypress/react/plugins/load-webpack/index.js
- /Users/ahfarmer/dev/app/cypress/plugins/index.ts
- /Users/ahfarmer/Library/Caches/Cypress/6.1.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_plugins.js
- /Users/ahfarmer/Library/Caches/Cypress/6.1.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/index.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:972:15)
at Function.Module._resolveFilename (/Users/ahfarmer/Library/Caches/Cypress/6.1.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/tsconfig-paths/lib/register.js:71:48)
at Module._load (internal/modules/cjs/loader.js:848:27)
at Function.f._load (electron/js2c/asar_bundle.js:5:12694)
at Module.require (internal/modules/cjs/loader.js:1032:19)
at require (internal/modules/cjs/helpers.js:72:18)
at Object.<anonymous> (/Users/ahfarmer/dev/rhombus-repos/rhombus-cloud-frontend/web/node_modules/nyc/index.js:23:24)
at Module._compile (internal/modules/cjs/loader.js:1152:30)
at Module._extensions..js (internal/modules/cjs/loader.js:1173:10)
at Object.require.extensions.<computed> [as .js] (/Users/ahfarmer/Library/Caches/Cypress/6.1.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/ts-node/src/index.ts:529:44)
at Module.load (internal/modules/cjs/loader.js:992:32)
at Module._load (internal/modules/cjs/loader.js:885:14)
at Function.f._load (electron/js2c/asar_bundle.js:5:12694)
at Module.require (internal/modules/cjs/loader.js:1032:19)
at require (internal/modules/cjs/helpers.js:72:18)
at Object.<anonymous> (/Users/ahfarmer/dev/rhombus-repos/rhombus-cloud-frontend/web/node_modules/@cypress/code-coverage/task.js:15:13)
at Module._compile (internal/modules/cjs/loader.js:1152:30)
at Module._extensions..js (internal/modules/cjs/loader.js:1173:10)
at Object.require.extensions.<computed> [as .js] (/Users/ahfarmer/Library/Caches/Cypress/6.1.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/ts-node/src/index.ts:529:44)
at Module.load (internal/modules/cjs/loader.js:992:32)
at Module._load (internal/modules/cjs/loader.js:885:14)
at Function.f._load (electron/js2c/asar_bundle.js:5:12694)
Test code to reproduce
I haven't been able to isolate the problem yet. I'm not sure where to begin.
Versions
Tested with Cypress 6.0.0, 6.0.1 and 6.1.0 - all produce the same error.
More Info
It looks like this is related to code coverage. I'm not trying to use code coverage, but nyc is getting imported, and then it is trying to import get-package-type/index. The get-package-type module does exist in node_modules, but it is a .cjs file: node_modules/get-package-type/index.cjs. It seems like the Cypress loader is not looking for .cjs extensions in my particular scenario. I'm not sure why Cypress is normally able to find .cjs files but not in my particular case.
Can you include your entire plugins/index.ts file?
Okay, I've got my plugins/index.ts below.
// plugins/index.ts
module.exports = (on, config) => {
// from the root of the project (folder with cypress.json file)
config.env.webpackFilename = 'webpack.config.js'
require('@cypress/react/plugins/load-webpack')(on, config)
// IMPORTANT to return the config object
// with the any changed environment variables
return config
}By the way, I might be able to make a reproducible test case. In my work repro I managed to get past this error by changing my tsconfig.json. I was surprised that my tsconfig would have an impact here. These are the tsconfig changes that I made: (I think removing the "*" path was what fixed things)
- "baseUrl": "./src",
+ "baseUrl": ".",
"paths": {
- "~common/*": ["../../common/*"],
- "~web/*": ["./*"],
- "*": ["*", "./src/types/*", "../node_modules/*"]
+ "~common/*": ["../common/*"],
+ "~web/*": ["./src/*"]
},
@ahfarmer Yeah, Cypress reads in your tsconfig at the root of the project and applies the same rules to Cypress. There are some current bugs with this that you may have encountered. A reproducible example would be great.
Okay here you go, just run yarn test in this repo: https://github.com/ahfarmer/cypress-component-tsconfig-issue
I can recreate the error with the following:
package.json
{
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10",
"@cypress/react": "^4.16.0",
"babel-loader": "^8.2.2",
"ts-loader": "^8.0.12",
"typescript": "^4.1.3",
"webpack": "4"
},
"dependencies": {
"cypress": "^6.1.0"
}
}tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"*": ["*", "./node_modules/*"]
}
}
}cypress/plugins/index.js
module.exports = (on, config) => {
require('@cypress/react/plugins/load-webpack')(on, config)
}
yarn why get-package-type
=> Found "get-package-type@0.1.0"
info Reasons this module exists
- "_project_#babel-plugin-istanbul#@istanbuljs#load-nyc-config" depends on it
- Hoisted from "_project_#babel-plugin-istanbul#@istanbuljs#load-nyc-config#get-package-type"
- Hoisted from "_project_#@cypress#react#@cypress#code-coverage#nyc#get-package-type"
info Disk size without dependencies: "36KB"
info Disk size with unique dependencies: "36KB"
info Disk size with transitive dependencies: "36KB"
info Number of shared dependencies: 0
Looks like @cypress/code-coverage might be the culprit
Yep:
Ultimately get-package-type is called in node_modules/nyc/index.js. Even if you stub it out, you get this:
Let's figure out what's broken and fix it.
I had this issue using the old cypress-react-unit-test package and it was fixed by dependency updates in that package.
I think coverage: false in your cypress.json should fix this
I will try and verify that is true! I also would like code coverage to work. Having a work-around in place is good too, though, since we are rapidly iterating on component testing (stay tuned :D)
Unfortunately the latest release did not fix this for me. I had a similar issue when using react-cypress-unit-test that was resolved when the packages were updated and when coverage: false(cypress-io/cypress-react-unit-test#488 (comment)) would ignore coverage but this is not working with @cypress/react
When I explicitly set TS_NODE_PROJECT=0 to the environment as a workaround to fix a different issue(#8090) it also seems to stop this error from occurring. Any idea what is going on with the TS_NODE_PROJECT or if this gives any insight into a better fix for this?
Hmm, we'll look into this with the context of #8090 -- thanks for sticking through this and finding a workaround. It'll help get to the root 👍🏻
Thank you. Do you have any other suggestions on anything else to try. TS_NODE_PROJECT=0 works when running on my ci but when running locally on a mac it causes my web server to stop.
I am hitting this today with Cypress 7.2.0 running locally on Windows. I'm not sure exactly where I should add TS_NODE_PROJECT=0, but have sprinkled it around all my .env files to no effect. I've also tried modifying my .tsconfig to include "allowJs": true, and made sure webpack mode is set to "development" per cypress-io/cypress-react-unit-test#488. Any suggestions?
Edit: Seems like just like @anark it's now working on my CI, but failing locally.
Have you tried setting
{
"env": {
"coverage": false
},
)
in your cypress.json file. I no longer need TS_NODE_PROJECT=0 when using cypress >= 7 and no longer see this issue when I have env.coverage set to false.
Thanks for the suggestion, but I'm actually trying to enable code-coverage! I may start a new thread in https://github.com/cypress-io/code-coverage/issues.
@ahfarmer, this issue seems to be stale. Is there anything to follow up on here? Have you tried the latest version of Cypress component testing (v10)?
@rockindahizzy I'm not working on my cypress project anymore, so I haven't tested this with newer versions of Cypress.