Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Yarn workspace, react, monorepo issue with conflict library version

Tags:

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

like image 964
Xun Yang Avatar asked Jan 10 '20 08:01

Xun Yang


People also ask

Why can’t Lerna handle more than one copy of react in monorepo?

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?

Is yarn monorepo or parallel?

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:

What is the use of yarn workspace?

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.

Why does Lerna call yarn installs multiple times?

“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.


1 Answers

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" }  
like image 127
nrako Avatar answered Sep 23 '22 09:09

nrako