babel-jest can not be resolved with yarn workspaces and CRA 3.0.0

[Yegair]

I am having issues running tests after an update to CRA 3.0.0:

Cannot find module 'babel-jest'
at Object.<anonymous> (../../node_modules/react-app-rewired/scripts/utils/babelTransform.js:1:19)

I am going to investigate the problem and maybe create a PR if I find a solution.

It would be valuable to know if anyone else got these problems too.

[Yegair]

Tried it with the test-app of this repository and it works, so it is most likely being caused by some other dependency conflicts within my project which are not directly related to react-app-rewired.

But since the only thing I did was updating the react-scripts from 2.1.3 to 3.0.0 it might be interesting to other people what exactly caused this problem. Hence I will investigate further and write updates to this issue.

[dawnmist]

It might be a case that something react-scripts 2 depended on was pulling babel-jest in as a dependency, and react-scripts 3 doesn't have the same dependency anymore. In that case, you'd just need to explicitly add babel-jest to your devDependencies. I know that react-scripts moved up to jest 24.x, so possibly somewhere in the move the need for babel-jest got dropped/removed or something?

Thank you for continuing to test/debug the issue, and looking forward to seeing your feedback when you do track it down. :)

Edit: Nope, looks like react-scripts is still using babel-jest themselves: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/jest/babelTransform.js
And are listing it as a dependency: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/package.json

Really dumb question (sorry, I have to ask) - you did re-run yarn install or npm install after the upgrade, didn't you? I'm assuming you did given the effort you're making to debug the issue...

[robcaldecottvelo]

I am seeing this as well, even after removing node_modules. We're using yarn workspaces so react-scripts is in the root node_modules folder. Simply adding babel-jest as a devDependency fixes it but it's still odd (as yarn list babel-jest was showing the package already installed.)

[Yegair]

Yes adding babel-jest directly fixes it. Maybe I am misunderstanding how modules are resolved, but I am a little surprised, that adding a dependency directly has different effects than having a transitive dependency (with the very same version). This might be because I am thinking in terms of Java/Maven/Gradle dependency resolution mechanisms too much. To be honest I don't know exactly how module resolution works under the hood.

I suspect that line 9 in rewireJestConfig may be the root of the problem (although there is no real error there):

  config.transform[key] = path.resolve(__dirname + '/babelTransform.js');

babelTransform.js is the one which requires babel-jest. Here only the path to babelTransform.js is written to some config object. Maybe Jest/Babel resolves modules a little differently and thus has problems resolving the dependency in a Yarn workspace setup.

[mkolodny]

To fix this, I had to make sure to install the same version of babel-jest that react-scripts requires. To find out what version of babel-jest your version of react-scripts requires, you can run npm ls babel-jest.

[liby]

Is there any progress on this issue?
The solution provided by @mkolodny can indeed solve this issue. However, when the version of babel-jest installed in the project does not match the version in react-scripts, we can see the following error:

Full Error Log

❯ yarn add --dev babel-jest
yarn add v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > @fortawesome/react-fontawesome@0.1.9" has incorrect peer dependency "react@16.x".
warning "@right/config > netlify-cms-widget-uuid-v4@1.1.1" has incorrect peer dependency "react@^16".
warning " > @right/storage-helpers@1.1.1" has incorrect peer dependency "@sentry/browser@^5.17.0".
warning " > bootstrap@4.6.0" has unmet peer dependency "jquery@1.9.1 - 3".
warning " > bootstrap@4.6.0" has unmet peer dependency "popper.js@^1.16.1".
warning " > eslint-plugin-react-hooks@4.2.0" has unmet peer dependency "eslint@^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0".
warning " > tslint-react-hooks@2.2.2" has unmet peer dependency "tslint@5 - 6".
warning " > eslint-import-resolver-typescript@2.4.0" has unmet peer dependency "eslint@*".
warning " > eslint-import-resolver-typescript@2.4.0" has unmet peer dependency "eslint-plugin-import@*".
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 3 new dependencies.
info Direct dependencies
└─ babel-jest@27.0.6
info All dependencies
├─ babel-jest@27.0.6
├─ babel-plugin-jest-hoist@27.0.6
└─ babel-preset-jest@27.0.6
✨  Done in 6.58s.
❯ yarn start
yarn run v1.22.10
$ BROWSER=none react-app-rewired start

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "babel-jest": "^26.6.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-jest was detected higher up in the tree:

  /Project/node_modules/babel-jest (version: 27.0.6)

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "babel-jest" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

  5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
     This may help because npm has known issues with package hoisting which may get resolved in future versions.

  6. Check if /Project/node_modules/babel-jest is outside your project directory.
     For example, you might have accidentally installed something in your home folder.

  7. Try running npm ls babel-jest in your project folder.
     This will tell you which other package (apart from the expected react-scripts) installed babel-jest.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

The most important thing is this sentence:

Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-jest was detected higher up in the tree:

So @dawnmist is right, we don't need to install babel-jest manually. But then you encounter the following errors:

Cannot find module 'babel-jest'

$ yarn test --ci --coverage
yarn run v1.22.5
$ react-app-rewired test --ci --coverage
The following changes are being made to your tsconfig.json file:
  - compilerOptions.paths must not be set (aliased imports are not supported)
FAIL src/components/shared/demo.test.tsx
  ● Test suite failed to run
    Cannot find module 'babel-jest'
    Require stack:
    - /builds/a212pn7C/0/app/project/node_modules/react-app-rewired/scripts/utils/babelTransform.js
    - /builds/a212pn7C/0/app/project/node_modules/@jest/transform/build/ScriptTransformer.js
    - /builds/a212pn7C/0/app/project/node_modules/@jest/transform/build/index.js
    - /builds/a212pn7C/0/app/project/node_modules/jest-runtime/build/index.js
    - /builds/a212pn7C/0/app/project/node_modules/jest-runner/build/testWorker.js
    - /builds/a212pn7C/0/app/project/node_modules/jest-worker/build/workers/processChild.js
      at Object.<anonymous> (node_modules/react-app-rewired/scripts/utils/babelTransform.js:1:19)

To fix this issue, you need to delete node_modules and yarn.lock, and then re-running yarn install. But when your yarn.lock is changed, this error will appear again.

The only solution so far seems to be the one mentioned by @mkolodny:

To fix this, I had to make sure to install the same version of babel-jest that react-scripts requires.

[Melanthonyando]

@liby after running yarn installing do i have to run yarn start ?

[Melanthonyando]

or i will run the npm install again before the yarn start