'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