'Yarn uses wrong dependecy
Since I've updated to yarn berry via: yarn set version berry I cannot run my project, the dependency tree is somehow broken. For ease I've provided examples for react-router but this happends with other packages too.
I have a monorepo with this structure:
/
|- .yarn
|- node_modules
|- common/
|- backoffice/
|- frontoffice/
|- test
|- .yarnrc.yml
|- package.json
|- lerna.json
frontoffice and backoffice are react apps. While common have the shared interfaces and components.
backoffice depends on react-router@5 and is writtenn in typescript while the frontoffice depends on react-router@6-beta and is ES5.
When I try to start the backoffice or the frontoffice I have the errors:
$ cd packages/frontoffice
$ yarn start
Failed to compile.
Attempted import error: 'Redirect' is not exported from 'react-router'.
In fact the backoffice is using react-router@v6 and frontoffice is using react-router@5
when I try to start the backoffice I get the error:
Type '{ path: any; render: (props: any) => Element; }' is not assignable to type 'IntrinsicAttributes & Pick<RouteProps, "path" | "children" | "caseSensitive" | "element"> & Pick<InferProps<{ caseSensitive: Requireable<boolean>; childr
en: Requireable<...>; element: Requireable<...>; path: Requireable<...>; }>, never> & Pick<...>'.
Property 'render' does not exist on type 'IntrinsicAttributes & Pick<RouteProps, "path" | "children" | "caseSensitive" | "element"> & Pick<InferProps<{ caseSensitive: Requireable<boolean>; children: Requireable<...>; element: Require
able<...>; path: Requireable<...>; }>, never> & Pick<...>'. TS2322
Also the IDE is highlighting the code, with errors everywhere on all packages.
I've run the lerna why command and to me everything seems fine:
$ yarn why react
├─ @mymonorepo/backoffice@workspace:packages/backoffice
│ └─ react@npm:17.0.1 (via npm:^17.0.1)
│
├─ @mymonorepo/test@workspace:packages/test
│ └─ react@npm:17.0.1 (via npm:^17.0.1)
│
├─ @mymonorepo/frontoffice@workspace:packages/frontoffice
│ └─ react@npm:17.0.1 (via npm:17.0.1)
│
└─ react-dragscroll@npm:2.0.1
└─ react@npm:16.14.0 (via npm:^16.1.1)
$ yarn why react-router
├─ @mymonorepo/backoffice@workspace:packages/backoffice
│ └─ react-router@npm:5.2.1 [1602b] (via npm:^5.2.0 [1602b])
│
├─ @mymonorepo/test@workspace:packages/test
│ └─ react-router@npm:5.2.1 [1602b] (via npm:^5.2.0 [1602b])
│
├─ @mymonorepo/frontoffice@workspace:packages/frontoffice
│ └─ react-router@npm:6.0.0-beta.0 [46813] (via npm:6.0.0-beta.0 [46813])
│
├─ react-router-dom@npm:5.3.0
│ └─ react-router@npm:5.2.1 (via npm:5.2.1)
│
├─ react-router-dom@npm:6.0.0-beta.0
│ └─ react-router@npm:6.0.0-beta.0 (via npm:6.0.0-beta.0)
│
├─ react-router-dom@npm:5.3.0 [1602b]
│ └─ react-router@npm:5.2.1 [1602b] (via npm:^5.2.0 [1602b])
│
└─ react-router-dom@npm:6.0.0-beta.0 [46813]
└─ react-router@npm:6.0.0-beta.0 [46813] (via npm:6.0.0-beta.0 [46813])
$ yarn why react-router-dom
├─ @mymonorepo/backoffice@workspace:packages/backoffice
│ └─ react-router-dom@npm:5.3.0 [1602b] (via npm:^5.2.0 [1602b])
│
├─ @mymonorepo/test@workspace:packages/test
│ └─ react-router-dom@npm:5.3.0 [1602b] (via npm:^5.2.0 [1602b])
│
└─ @mymonorepo/frontoffice@workspace:packages/frontoffice
└─ react-router-dom@npm:6.0.0-beta.0 [46813] (via npm:6.0.0-beta.0 [46813])
$
Did I forget something to configure? Is there a way to force the right version for each package?
the nodeLinker option in .yarnrc.yml is set to node-modules
the pakage.json are the following:
/package.json
{
"name": "mymonorepo",
"version": "0.1.0",
"license": "MIT",
"private": true,
"workspaces": {
"packages": [
"packages/*"
]
},
"resolutions": {
"graphql": "^15.3.0"
},
"devDependencies": {
"husky": "^4.3.8",
"lerna": "^3.22.1",
"lint-staged": "^10.5.3"
},
"packageManager": "[email protected]"
}
/backoffice/package.json
{
"name": "@mymonorepo/backoffice",
"version": "3.0.0",
"private": true,
"dependencies": {
"@apollo/client": "^3.5.8",
"@material-ui/core": "^4.12.1",
"@material-ui/icons": "^4.11.2",
...
"react": "^17.0.0",
"react-admin": "^3.19.7",
"react-app-polyfill": "^2.0.0",
"react-dom": "^17.0.0",
"react-redux": "^7.1.0",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.0",
"recharts": "^1.8.5",
"redux-saga": "^1.0.0"
},
"scripts": {
"analyze": "source-map-explorer 'build/static/js/*.js'",
"start": "react-scripts start",
"build": "node ./build.js",
"eject": "react-scripts test"
},
"homepage": ".",
"browserslist": [
">0.2%",
"not dead",
"not ie <= 10",
"not op_mini all"
],
"devDependencies": {
"@types/classnames": "^2.3.1",
"@types/fetch-mock": "^7.3.2",
"@types/jest": "^26.0.19",
"@types/node": "^12.12.14",
"@types/query-string": "5.1.0",
"@types/react": "^17.0.20",
"@types/react-dom": "^17.0.9",
"@types/react-router": "^5.2.0",
"@types/react-router-dom": "^5.2.0",
"rewire": "^5.0.0",
"source-map-explorer": "^2.0.0",
"typescript": "^4.4.0"
}
}
/frontoffice/package.json
{
"name": "@mymonorepo/frontoffice",
"version": "2.1.0",
"dependencies": {
"@apollo/client": "^3.1.3",
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-brands-svg-icons": "^5.15.4",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/react-fontawesome": "^0.1.15",
...
"react": "17.0.1",
"react-compound-timer": "^1.1.15",
"react-content-loader": "^5.1.4",
"react-custom-scrollbars-2": "^4.3.0",
"react-detect-offline": "^2.4.0",
"react-device-detect": "^1.6.2",
"react-dom": "17.0.1",
"react-fullscreen-image": "^0.0.3",
"react-gtm-module": "^2.0.8",
"react-helmet": "^6.1.0",
"react-router": "6.0.0-beta.0",
"react-router-dom": "6.0.0-beta.0",
"react-router-hash-link": "^2.0.0",
"react-router-modal": "^2.0.0-rc3",
"react-scripts": "^4.0.1",
"react-scroll-trigger": "^0.6.6",
"react-share": "^4.2.1",
"react-show-more-text": "^1.4.6",
"react-ticker": "^1.2.2",
"react-use-dimensions": "^1.2.1",
"react-window": "^1.8.6",
...
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts --max_old_space_size=4096 build --silent",
"test": "react-scripts test",
"eject": "react-scripts eject",
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"depcheck": "^1.3.1",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-flowtype": "^5.2.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0"
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
