Search code examples
react-nativemonorepopnpm

React native monorepo with PNPM

My goal

I am trying to use React native monorepo with PNPM, because I need performance of pnpm.

Expected

I should be able to bundle React native app with pnpm android and start development server with pnpm start.

Actual results

I can bundle app, but I cant start metro server. I always get this error: enter image description here

More info

I have node v16.14.2, react native v0.69.

I know default metro bundler doesn't support symlinks (https://github.com/pnpm/pnpm/issues/1252#issuecomment-667600769), which pnpm use, so I tried to patch metro in metro.config.js: metro.config.js

This works perfectly fine with pure React native repo like here e.g: https://github.com/gjhughes/react-native-pnpm-example

My project structure looks like this:

project
└───shared
└───backend
│   │   package.json
│   
└───frontend
│   │   package.json
│   
└───mobile-app
│   │   package.json

Here is my pnpm-workspace.yaml:

pnpm-workspace.yaml

I am desperate. Is it even possible?

If you have any more questions, feel free to ask!

Solution

  • Use pnpm without symlinks. Create a .npmrc in the root of your monorepo with the following setting:

    node-linker=hoisted

    Remove node_modules and run pnpm install. Related docs: https://pnpm.io/npmrc#node-linker