pnpm and expo without node-linker=hoisted

README.md

I have a pretty big monorepo, and adding node-linker=hoisted to .npmrc would have significant consequences. With the help of rnx-kit, I managed to configure Expo to work without changes to .npmrc.

I haven't encountered any major issues yet, but I also haven't built or released a production version of my app, so we'll see how it goes.

Steps:

1. Add the following dependencies to your package.json:

   {
     "@rnx-kit/metro-config": "^1.3.15",
     "@rnx-kit/metro-resolver-symlinks": "^0.1.36"
   }

2. Update the main field in package.json to:

   {
     "main": "entry.js"
   }

3. Add the files included in this gist.

4. Perform a clean install of node_modules, and try running your app again.

5. You might need to add EXPO_USE_METRO_WORKSPACE_ROOT=1 to your .env, or exporting it. Very unclear what it actually does.

Tip:

The SPA that react-native-web creates tends to be heavily cached, at least for me. Open the URL Expo provides in a private browser window for better results if you encounter any issues.

entry.js

// Since I'm using expo-router, this is enough.
require('expo-router/entry');

metro.config.js

const path = require("path");
const { FileStore } = require("metro-cache");
const { makeMetroConfig } = require("@rnx-kit/metro-config");
const { getDefaultConfig } = require("expo/metro-config");
const MetroSymlinksResolver = require("@rnx-kit/metro-resolver-symlinks");

const projectDir = __dirname;
const workspaceRoot = path.resolve(projectDir, "../..");

const symlinksResolver = MetroSymlinksResolver();

/** @type {import('expo/metro-config').MetroConfig} */
const expoConfig = getDefaultConfig(projectDir);

/** @type {import('expo/metro-config').MetroConfig} */
module.exports = makeMetroConfig({
  ...expoConfig,
  resolver: {
    ...expoConfig.resolver,
    resolveRequest: (context, moduleName, platform) => {
      try {
        // Symlinks resolver throws when it can't find what we're looking for.
        const res = symlinksResolver(context, moduleName, platform);

        if (res) {
          return res;
        }
      } catch {
        // If we have an error, we pass it on to the next resolver in the chain,
        // which should be one of expos.
        // https://github.com/expo/expo/blob/9c025ce7c10b23546ca889f3905f4a46d65608a4/packages/%40expo/cli/src/start/server/metro/withMetroResolvers.ts#L47
        return context.resolveRequest(context, moduleName, platform);
      }
    },
  },
  watchFolders: [
    workspaceRoot
  ],
  cacheStores: [
    new FileStore({
      root: path.join(projectDir, "node_modules", ".cache", "metro"),
    }),
  ]
});

Using rnx-kit like this finally made pnpm doable with React Native. Thank you 🙏🏽

Np!

Legend! No hoisting necessary 🙅‍♂️

Brilliant. No hoisting! Let's goooooo!

Nice, this works great.
Are you able to load local images? I keep getting ReactImageView: Image source "null" doesn't exist

I copied this exactly and I get:
Error: Cannot find module '@react-native/metro-config'; as of React Native 0.72, it is required for configuring Metro correctly.

I resolved it by manually adding that package.

My images with <Image source={require('some-local-path')} /> aren't resolving now

@jakozbek that seems like a node environment error. What version of node are you running?

This configuration is only working for me with the shamefully-hoist=true on .npmrc - pnpm still works with symlinks, but they create a symlink for each dependency and deep dependency on root node_modules. Otherwise metro cannot resolve deeps dependencies :(

i am using expo 52. it does not work at all.

I know OP was providing a solution without hoisting. It didn't work for me, which is definitely a skill issue but for those who want a solution with hoisting with SDK53 and React 19, I found the t3-template particularly helpful. Key points are:

• pnpm 10+
• pinning react 19 and react-dom (see pnpm-workspace.yaml)
• metro config you can just follow from the expo documentation here
• .npmrc file with hoisting and link-workspace-package enabled

Just leaving this here in case anyone else has ended up in a rabbit hole, like I did over the past couple days.

@dylanoldfield thank you!
I was searching for the problem and a solution the hole afternoon. With the .npmrc file I was able to make my docker build with pnpm run again!