CRA dev dependency warning with yarn workspaces with react-scripts@2.0.0

[bugzpodder]

Is this a bug report?

YES

Did you try recovering your dependencies?

YES
yarn 1.5.1

Which terms did you search for in User Guide?

Environment

1. node -v: 8.9.3
2. npm -v:
3. yarn --version (if you use Yarn): 1.5.1
4. npm ls react-scripts (if you haven’t ejected): 2.0.0-next.b2fd8db8

Then, specify:

1. Operating system: macOS
2. Browser and version (if relevant): Chrome

Steps to Reproduce

(Write your steps here:)
Create app1 (express) with devdependencies:
"devDependencies": {
"babel-jest": "22.4.3",
"eslint": "4.19.1",
"jest": "22.4.3"
},
Create app2 (CRA)

Expected Behavior

yarn start succeeds

Actual Behavior

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:

"jest": "22.1.2"

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

root/node_modules/jest (version: 22.4.3)

Reproducible Demo

[bugzpodder]

I did a clean repro today.
A single monorepo, two workspaces.
One is CRA 2.0.0-next.b2fd8db8
server: package.json
{
"name": "server",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"devDependencies": {
"jest": "22.4.3"
}
}

[bugzpodder]

This is very similar to #4167 (only difference is that I'm using a workspace).
Also doesn't repro (with my case) with version mismatches for any other package mentioned in verifyPackageTree (webpack, webpack-dev-server, eslint) for some reason.

[bugzpodder]

there were a bunch of configuration issues when I tried to configure various projects. So at the end of the day I feel this warning is justified.
I ended up hoisting the packages suggested in the warning:
jest specifically to get around this problem
babel because of incompatibility issues for babel-loader with babel 7 and jest
eslint for plugin errors
I didn't find any issues with webpack so far.
--- In root/package.json ---

"workspaces": {
    "packages": [...],
    "nohoist": ["**/babel**", "**/eslint**", "**/jest"]
 }

[trompx]

Just encountered this problem.

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:
  "eslint": "4.15.0"
Don't try to install it manually: your package manager does it automatically.
However, a different version of eslint was detected higher up in the tree:
  /var/www/myapp/node_modules/eslint (version: 4.19.1)
Manually installing incompatible versions is known to cause hard-to-debug issues.
To fix the dependency tree, try following the steps below in the exact order:
...

I want my cra app to transpile an imported package in a monorepo.
I can of course unhoist eslint. The problem is that in this monorepo, I have other non cra apps for which I want to share (hoist) some modules (like babel/eslint etc.).
To make this work does it mean I need to unhoist the totallity of my apps (cra and non cra) or is there a way to just unhoist the cra apps and still have eslint/babel install at the root of the monorepo?

[gaearon]

Note that as the warning says at the very bottom, there's a way to disable it if you know what you're doing. We added a warning because way too many users either hit npm bugs or shoot themselves in the foot by hoisting incorrect versions or installing them manually into CRA projects.

[bugzpodder]

@trompx I was able to get CRA to transpile code from another yarn workspace in the monorepro with no problems (cra 2.0 of course). I don't fully understand the mechanics here, but have no problems so far and really happy with the final result.
I was also able to get non-CRA app to transpile the same shared workspace code with the correct babel settings as well.
I was using the hoisted settings as indicated above, without any need to install eslint/babel at the root.

[trompx]

@bugzpodder @gaearon Hey, thanks for the feedback.
I managed to make this work too for CRA (with 2.0.0-next.b2fd8db8) and non CRA apps.

The key for me to make it work for non CRA apps was:

resolve: {
        extensions: [".js", ...],
        modules: [
            path.resolve('../../node_modules') // resolve hoisted modules
        ]
},

One problem remains and I have a really hard time to figure it out.
While my non CRA apps compile almost instantly, my CRA apps takes between 8s/20s.
As we cannot edit the dev server config (stats: verbose for instance) it is hard to determine what may slow down the compilation, what gets transpiled, linted...

Would you consider the possibility to set a VERBOSE/DEBUG env variable that would set dev server stats to verbose?

[bugzpodder]

Instead of module.resolves, I was using the nodeExternals:

 externals: [
                nodeExternals({
                        modulesFromFile: true,
                        whitelist: [/^@package\//],
                }),
        ],

Because my non-CRA app is server side. It compiles instantly because it doesn't actually include the node-modules js in the bundled code. For client side (CRA) apps, it includes all your dependencies I believe.

[devrelm]

@Timer Can you expand on why this issue is closed? I'm still seeing it. We have a monorepo holding multiple CRA v1 apps and would prefer to not have to upgrade them all at once, but we're seeing issues with a CRA v2 app exiting after warning about babel-jest being "detected higher up in the tree".