bahmutov / cra-ts-code-coverage-example

React App with TypeScript and Cypress code coverage

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Add instructions for Yarn 2.

quisido opened this issue · comments

I'm using Yarn 2, and when I use the -r @cypress/instrument-cra flag for react-scripts start, I'm greeted with this error (which does not exist when not providing the -r flag:

Error: Qualified path resolution failed - none of those files can be found on the disk.

Source path: ...\node_modules\react-scripts\config\webpack.config.js
Not found: ...\node_modules\react-scripts\config\webpack.config.js
Not found: ...\node_modules\react-scripts\config\webpack.config.js.js
Not found: ...\node_modules\react-scripts\config\webpack.config.js.json
Not found: ...\node_modules\react-scripts\config\webpack.config.js.node

Require stack:
- ...\.yarn\cache\@cypress-instrument-cra-npm-1.4.0-b310f2188a-1c404f1887.zip\node_modules\@cypress\instrument-cra\index.js
- internal/preload
    at Function.external_module_.Module._resolveFilename (...\.pnp.cjs:35286:55)
    at Function.external_module_.Module._load (...\.pnp.cjs:35085:48)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:94:18)
    at Object.<anonymous> (...\.yarn\cache\@cypress-instrument-cra-npm-1.4.0-b310f2188a-1c404f1887.zip\node_modules\@cypress\instrument-cra\index.js:41:24)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.external_module_.Module._load (...\.pnp.cjs:35135:14)
    at Module.require (node:internal/modules/cjs/loader:1005:19)

This may be a larger bug with instrument-cra not supporting Yarn 2 altogether -- it imports react-scripts via node_modules and does not support Yarn 2 imports.

I ended up having to fix this by replacing instrument-cra with react-app-rewired using the same config adjustments that instrument-cra implements.

I will eventually be publishing the react-app-rewired config change as a standalone package, if you want to list it as an alternative solution for Yarn 2.

Here is a snapshot of the config package as a code reference. While I have confirmed that it is working, I have not yet published it:
https://github.com/CharlesStover/monorepo-template/tree/a6b9b522c0ea873d89646fe0f7f58732c2caaa7d/packages/cypress-coverage-config-override

People are free to use it as a reference to copy-paste or build their own solutions for the time being.