Yarn Workspaces with React Native

[hanselabreu]

Hey guys, I am trying to setup a monorepo using the workspaces feature. One of the projects will be React Native based. I've setup the mobile workspace that works fine on it's own, however the problem arises when I try to import a components workspace into mobile.

I get the following error:

error: Error: Unable to resolve module @babel/runtime/helpers/interopRequireDefault from 
yarn-workspaces/packages/components/Box.js: @babel/runtime/helpers/interopRequireDefault 
could not be found within the project or in these directories:
  ../components/node_modules
  ../../node_modules
  /yarn-workspaces/node_modules/@babel/runtime/helpers/interopRequireDefault

Which is incorrect, the @babel/runtime modules is in fact within the ../../node_modules directory.

Here is what my metro.config.json looks like:

const path = require('path');

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
  resolver: {
    extraNodeModules: new Proxy(
      {},
      {
        get: (target, module) => {
          return path.join(__dirname, `../../node_modules/${module}`);
        },
      },
    ),
  },
  watchFolders: [path.resolve(__dirname, '..')],
};

I've included the @org/components dependency on the mobile workspace like so:

"dependencies": {
  "@org/components": "workspace:*",
  "react": "17.0.1",
  "react-native": "0.64.0"
}

Along with setting the hoistingLimits to workspaces, like so:

"installConfig": {
  "hoistingLimits": "workspaces"
}

I am unsure as to what the problem might be. I created this repo which contains everything I just mentioned.

Would love some feedback, thanks! 🙂

[andreialecu]

Seems your path is wrong in the metro config:

return path.join(__dirname, `../../node_modules/${module}`);

Everything seems to work with:

return path.join(__dirname, `./node_modules/${module}`);

[hanselabreu]

That seems to have done the trick!

I'll leave the repo up in case anyone wants an example as to how setup workspaces for React Native.