I'm experimenting with yarn workspace monorepo. It is consisting of a TestProject created with create-react-app
, and a SharedLib1 which is created with create-react-library
. TestProject imports code from SharedLib1. The problem being, TestProject uses react-scripts 3.3.0 which is dependent on babel-jest ^24.9.0, while SharedLib1 uses react-scripts-ts ^2.16.0 which is dependent on babel-jest 22.4.4. When running yarn start
in TestProject, it complains:
The react-scripts package provided by Create React App requires a dependency: "babel-jest": "^24.9.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: /monoRepo/node_modules/babel-jest (version: 22.4.4)
I could disable the error by setting SKIP_PREFLIGHT_CHECK=true
in TestProject or manually upgrade the react-scripts inside SharedLib1, but I'd like to know if there's a better way of handling this.
myMonorepo -web -SharedLib1 -package.json -TestProject -package.json -package.json
Package.json of myMonoRepo:
{ "name": "my-mono-repo", "version": "0.1.0", "private": true, "workspaces": [ "web/*" ], "nohoist": [ "**/babel-jest", "**/babel-jest/**" ] }
Package.json of myMonoRepo:
{ "name": "test-proj", "version": "0.1.0", "private": true, "dependencies": { ... "shared-lib-1": "^1.0.0" } }
And the test code App.tsx:
import React from 'react'; import TestComp from 'shared-lib-1'; import './App.css'; const App: React.FC = () => { return ( <div className="App"> <TestComp text={'aaa'}/> Learn React </div> ); } export default App;
There is a babel-jest 24.9.0 inside the node_modules of TestProj and another 22.4.4 inside the node_modules of myMonoRepo
The reason is the third mentioned reason: “You might have more than one copy of React in the same app”. This is because of the way Lerna manages the packages in our monorepo and there is nothing Lerna can do to resolve this. So, what’s the escape hatch?
It’s monorepo. If you’re not aware of monorepo benefits and flaws check this article out. Yarn is fast. Yarn stores packages in a cache. Yarn is parallel. But what about Yarn workspaces? That’s how Yarn explains them:
Yarn Workspaces (and monorepos in general) is a way to allow multiple apps to coexist in the same repository and cross-reference each other, easing the overhead of repository management and allowing a higher degree of collaboration among teams. Each app is known as "package", and has its own package.json file.
“Lerna calls yarn install multiple times for each package which creates overhead because each package.json is considered independent and they can’t share dependencies with each other. This causes a lot of duplication for each node_modules folder which quite often use the same third-party packages.” — From the yarn workspace docs.
This is very similar, if not the same, to an issue opened on the GH repo for create-react-app and you may find additional information there.
That said, you might try moving babel-jest
to a devDependency
instead of a package dependency. If that does not work, you might try Selective dependency resolutions, where you can force your project to a specific version of babel-jest
-
"resolutions": { "babel-jest": "^24.9.0", "shared-lib-1": "^1.0.0" }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With