bahmutov / cra-ts-code-coverage-example

React App with TypeScript and Cypress code coverage
19 stars 4 forks source link

Add instructions for Yarn 2. #56

Open quisido opened 2 years ago

quisido commented 2 years ago

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)
bahmutov commented 2 years ago

Since I don’t use yarn 2 myself I would appreciate any help debugging this

Sent from my iPhone

On Oct 29, 2021, at 19:25, Charles Stover @.***> wrote:

 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:

  • ...@.**@.\instrument-cra\index.js
  • internal/preload at Function.externalmodule.Module._resolveFilename (....pnp.cjs:35286:55) at Function.externalmodule.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. @.**@.\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.externalmodule.Module._load (....pnp.cjs:35135:14) at Module.require (node:internal/modules/cjs/loader:1005:19) — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.
quisido commented 2 years ago

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.