Dependency Warning - proper way to implement Yarn Workspace monorepo with CRA with root dependencies?

[clayhan]

I am running into an issue when trying to start CRA when I have similar dependencies in the root of my yarn workspace monorepo. I have a .eslintrc in the root of my project along with all of my Eslint/Prettier packages so that all of my projects are able to receive linting/autoformatting.

I just recently added CRA to my monorepo in an attempt to create a new application. This gives me an error message and I did not want to assume that I would not run into any future issues. I am hoping to learn the ideal solution to how to properly use CRA within a yarn workspace monorepo while also being able to have proper linting/autofortmatting via Eslint and Prettier.

Demo repo below.

Is this a bug report?

Maybe
Very closely related to #4296. I was unable to decipher a proper solution from this discussion.

Steps to Reproduce

1. Clone demo repo below
2. Run yarn to install dependencies
3. Run yarn workspace my-app start to try to start the application.

Expected Behavior

yarn start succeeds

Actual Behavior

Get error message:

Reproducible Demo

https://github.com/clayhan/cra-yarn-test

Thanks for any help!

[bugzpodder]

Try the nohoist option, maybe this will get you started:
"nohoist": [
"/babel-eslint",
"/babel-jest",
"/eslint",
"/jest",
"/webpack-dev-server",
"/webpack-cli"
]

[clayhan]

@bugzpodder Thanks for the response. Just wondering, are you adding this to the root of your repo? My concern with adding nohoist is that then my projects won't be able to see my linting rules at the root, and then I'd have to manually install all the dev dependencies for linting to each project. I'll give this a shot today but I'm hoping that won't be the case.

[bugzpodder]

Yes I'm adding this to the root. It simply installs packages in their respective directories rather than hoisting, so it should not have noticable impact in your build process.

[clayhan]

@bugzpodder https://github.com/clayhan/cra-yarn-test
I added the nohoist to my package.json in my root, but still no dice. Any thoughts on what I'm doing wrong? This example repo is an accurate representation of how my main project is currently laid out.

Super appreciative of your time.

[bugzpodder]

I would do one of two things:

1. just pin your root eslint and babel-eslint to the versions CRA uses.

+++ b/package.json
@@ -3,13 +3,9 @@  
 "workspaces": [
     "packages/*"
   ],
-  "nohoist": [
-    "/babel-eslint",
-    "/eslint"
-  ],
   "devDependencies": {
-    "babel-eslint": "^10.0.1",
-    "eslint": "^5.12.1",
+    "babel-eslint": "9.0.0",
+    "eslint": "5.6.0",
     "eslint-config-airbnb": "^17.1.0",
     "eslint-config-prettier": "^4.0.0",
     "eslint-config-react": "^1.1.7",
@@ -19,4 +15,4 @@
     "eslint-plugin-react": "^7.12.4",
     "prettier": "^1.16.3"
   }
-}

2. remove the root eslint and babel-eslint and rely on your packages installations if you must use the latest version. So something like this:

--- a/package.json
+++ b/package.json
@@ -4,12 +4,10 @@
     "packages/*"
   ],
   "nohoist": [
-    "/babel-eslint",
-    "/eslint"
+    "**/babel-eslint",
+    "**/eslint"
   ],
   "devDependencies": {
-    "babel-eslint": "^10.0.1",
-    "eslint": "^5.12.1",
     "eslint-config-airbnb": "^17.1.0",
     "eslint-config-prettier": "^4.0.0",
     "eslint-config-react": "^1.1.7",
@@ -19,4 +17,4 @@
     "eslint-plugin-react": "^7.12.4",
     "prettier": "^1.16.3"
   }
-}

[clayhan]

@bugzpodder Still no dice on any sort of implementation. It seems CRA keeps defaulting to whatever is in the root node_modules and refuses to run. I'm hesitant to skip the check since this application I'm wanting to build is going to be something we keep for several years. Thinking since this seems to be a huge problem with CRA that I'm going to just skip it entirely. I tried replicating the 2nd option you gave me, but it still kept giving me the same issues.

Do you possibly have a demo repo where you were able to accomplish option 2? Thanks a ton.

[bugzpodder]

I don't have a public repo, but if you follow these instructions it should just work:

1. in your root (workspace) package.json, add the following nohoist option:

     "**/babel-eslint",
     "**/babel-jest",
     "**/eslint",
     "**/jest",
     "**/webpack-dev-server",
     "**/webpack-cli"
   ]```
2) Make sure you don't have any of these packages in your root (workspace) package.json
3) remove node_modules from the worksapce (root)
do another yarn install
4) ensure your new node_modules/ doesn't contain any of these pacakges.  If there is a matching one then your nohoist is wrong.
5) run yarn start in your cra directory and see that the error should go away.

tldr nohoist should not install the specified packages in your root node_modules.

[tim-phillips]

Just FYI, nohoist should be under workspaces in package.json

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

https://yarnpkg.com/blog/2018/02/15/nohoist/#how-to-use-it

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.