What should be the right metro.config.js for PNPM monorepo?

[shawnthye-guru]

Do you want to request a feature or report a bug?
Bug report

What is the current behavior?
Trying out the latest react-native 0.72 on the experiment symlink support with pnpm workspace

Having the folder setup as below

root/packages/*
root/example/package.json
root/example/metro.config.js
root/package.json
root/pnpm-workspace.yaml

Base on the doc found in metro https://facebook.github.io/metro/docs/configuration#projectroot

This doesn't work

const config = {
 projectRoot: path.resolve(__dirname, '..'),
 resolver: {
 unstable_enableSymlinks: true,
 unstable_enablePackageExports: true,
 },
};

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

And getting the error below:

Error: Unable to resolve module ./index from /Users/shawnthye/workspaces/guru/mobile-packages/.: 

None of these files exist:
 * index(.native|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
 * index/index(.native|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
 at ModuleResolver.resolveDependency (/Users/shawnthye/workspaces/guru/mobile-packages/node_modules/.pnpm/metro@0.76.7/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:114:15)
 at DependencyGraph.resolveDependency (/Users/shawnthye/workspaces/guru/mobile-packages/node_modules/.pnpm/metro@0.76.7/node_modules/metro/src/node-haste/DependencyGraph.js:277:43)
 at /Users/shawnthye/workspaces/guru/mobile-packages/node_modules/.pnpm/metro@0.76.7/node_modules/metro/src/lib/transformHelpers.js:169:21
 at Server._resolveRelativePath (/Users/shawnthye/workspaces/guru/mobile-packages/node_modules/.pnpm/metro@0.76.7/node_modules/metro/src/Server.js:1045:12)
 at async Server.requestProcessor [as _processBundleRequest] (/Users/shawnthye/workspaces/guru/mobile-packages/node_modules/.pnpm/metro@0.76.7/node_modules/metro/src/Server.js:449:37)
 at async Server._processRequest (/Users/shawnthye/workspaces/guru/mobile-packages/node_modules/.pnpm/metro@0.76.7/node_modules/metro/src/Server.js:383:7)

But this will work

const config = {
 watchFolders: [path.resolve(__dirname, '..')],
 resolver: {
 unstable_enableSymlinks: true,
 unstable_enablePackageExports: true,
 },
};

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

What should be the right config for monorepo setup? is this a bug or is something I have done wrongly?

[robhogan]

Your second solution is totally valid and probably the simplest.

The issue with the first method (changing projectRoot) is that you'd also need to change the bundle URL requested by the client - because paths are relative to the project root, your bundle URL would need to be something like /example/index.bundle instead of just /index.bundle (on RN iOS for example, you'd configure that from your AppDelegate.mm).

The projectRoot method is more suitable when you have multiple apps or entry points served by Metro, but there's no real functional difference.

The docs should make this clearer - thanks for the feedback.

[shawnthye-guru]

Very clear to me now.

Big Thanks @robhogan