yarn workspaces + metro 0.30

Problem

I am trying to upgrade from react-native@0.52.0 and metro@0.24.7 to react-native@0.55.4 and metro@0.30.2. I’m on macOS and using yarn@1.60 with its “workspaces” feature. I did not initially have a rn-cli.config.js.

After upgrading, whenever I try to get Metro to generate a bundle, I get the following error:

error: bundling failed: Error: Unable to resolve module `./../node_modules/react-transform-hmr/lib/index.js` from `/Users/ashoat/Dropbox/src/Sites/squadcal/native/app.react.js`: The module `./../node_modules/react-transform-hmr/lib/index.js` could not be found from `/Users/ashoat/Dropbox/src/Sites/squadcal/native/app.react.js`. Indeed, none of these files exist:
  * `/Users/ashoat/Dropbox/src/Sites/squadcal/node_modules/react-transform-hmr/lib/index.js(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)`
  * `/Users/ashoat/Dropbox/src/Sites/squadcal/node_modules/react-transform-hmr/lib/index.js/index(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)`

Analysis

In fact, /Users/ashoat/Dropbox/src/Sites/squadcal/node_modules/react-transform-hmr/lib/index.js does exist. However, it is outside the list of watched directories printed when Metro is started. react-transform-hmr is the third module/file that Metro tries to resolve when bundling my application, after my app entry point, and react-native.

Before upgrading, this was the list of watched directories. The list included all four of my workspaces, as well as the root folder of the monorepo. The root folder of the monorepo is the one that contains react-transform-hmr, as it is a “secondary” dependency (ie. dependency of a dependency), and yarn workspaces put those in the root folder. I presume that since the root folder was in the list of watched directories, the previous version of metro was able to resolve things correctly.

After upgrading, this is the list of watched directories. Note that it is much shorter, does not include all the workspaces, and notably does not include the root folder of the monorepo.

Attempted solutions

My initial read of the situation was that I should create a rn-cli.config.js with a getProjectRoots that includes the root folder of the monorepo. That would presumably enable Metro to resolve it.

However, when I tried that, I got an error regarding ambiguous resolution of react-native: https://gist.github.com/Ashoat/7c4b41c063391cd1c3c59d38bc23d71a

I get the ambiguous resolution error even when I set up my getProjectRoots to return only two folders, the project folder (native) and the root folder.

I’ve also tried using the metro-bundler-config-yarn-workspaces NPM package, which provides a custom rn-cli.config.js that attempts to (a) include the right folders in getProjectRoots, (b) blacklist the duplicate react-native package. However, the custom blacklist doesn’t seem to prevent the ambiguous resolution error. I’ve also tried to write my own custom blacklist to no avail.

Here is my current rn-cli.config.js:

const blacklist = require('metro/src/blacklist');
module.exports = {
  getBlacklistRE() {
    return blacklist([
      /native\/node_modules\/react-native\//,
    ]);
  },
  getProjectRoots() {
    return [
      "/Users/ashoat/Dropbox/src/Sites/squadcal/native",
      "/Users/ashoat/Dropbox/src/Sites/squadcal",
    ];
  },
}

Plead

I’ve been banging on my head on this problem for two days now. Would appreciate any help I can get, even if it’s just an explanation of what may have changed from metro@0.24 to metro@0.30 that could’ve caused this.

Thanks for reading.

[Ashoat]

It’s very much still doable with a custom metro.config.js, though #257 would certainly be an improvement.

[flybayer]

For anyone who lands here like I did, here’s how to get workspaces working with importing code from another workspace:

// package.json
  "devDependencies": {
    ...
    "expo-yarn-workspaces": "1.2.1"
  },
  "workspaces": {
    "nohoist": [
      "react-native",
      "react-native-*",
      "react-native/**",
      "expo-yarn-workspaces"
    ]
  }

// metro.config.js
const { createMetroConfiguration } = require("expo-yarn-workspaces")

const config = createMetroConfiguration(__dirname)

// Make react-native import from files in other workspace resolve to node_modules in this dir
config.resolver.extraNodeModules["react-native"] = `${__dirname}/node_modules/react-native`

// Default metro config
config.transformer.getTransformOptions = async () => ({
  transform: {
    experimentalImportSupport: false,
    inlineRequires: false,
  },
})

module.exports = config