Sharing a copy of a dependency in workspaces with hoisting limits

[tomasreimers]

Hello! I have created a workspace with the following structure:

root/
  web-app/
    package.json
    node_modules/
  components/
    package.json
    node_modules/
  package.json

The workspace uses node-modules as the linker and has nmHoistingLimits: workspaces.

The two libraries (web-app and components) both depend on react. In addition, web-app depends on components. However, when I try to build the monorepo, I run into an issue, because both web-app and components depend on react, there are two copies of react included at run time (root/web-app/node_modules/react and root/component/node_modules/react). This breaks react.

This is resolved if I either use PNP (as both reacts resolve to the same thing) or if I remove hoisting limits (as react is hoisted to the root and now they both depend on root/node_modules/react). Without removing hoisting limits (as there are other packages that need them), what else can I do?

What comes to mind is I would like react to exist in some common folder (.yarn/node_modules/react) and for root/web-app/node_modules/react and root/component/node_modules/react to both symlink there, is that possible?

I saw this StackOverflow post: https://stackoverflow.com/questions/66940982/how-do-i-import-a-react-library-from-one-yarn-workspace-into-another-when-hoisti but it seems unresolved, which is why I'm escalating the issue here.

Thanks!

(React was chosen because it's easy to explain, but the same is true for graphql and a handful of other libraries.)

[larixer]

You can make react a dependency on some common parent directory, in this example it is the root directory, this way Node.js lookup algorithm will find it both starting from web-app and starting from components.

[ubugnu]

If anyone is facing the same issue when using react-native, the solution for was to add the path of the workspace from where the library/component is imported to watchFolders in metro.config.js:

const path = require('path');
const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

const config = {
  resolver: {
    unstable_enableSymlinks: true,
  },
  watchFolders: [
    path.resolve(__dirname, '../../node_modules'),
    path.resolve(__dirname, '../../packages'), // <-- Add this (replace 'packages' by your folder name)
  ],
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);