RN 0.57 breaks metro-bundler-config-yarn-workspaces

[maitriyogin]

Hi, I've just tried or am trying to upgrade to Expo 31.0.0 and RN 0.57. The metro config has changed as of this https://facebook.github.io/metro/docs/en/configuration. I've tried to adapt to the new format like this in my rn-cli.js :

const getConfig = require("metro-bundler-config-yarn-workspaces");
const config = getConfig(__dirname);
module.exports = {
  watchFolders: config.getProjectRoots(),
  resolver: {
    blacklistRE: blacklist
  }
};

Doesn't seem to work ... I'll fiddle a bit more but if anyone else has experienced the same please share. /Stephen.

[maitriyogin]

ok so here's my changes :

const blacklist = require("metro-config/src/defaults/blacklist");
const getWorkspaces = require("get-yarn-workspaces");
const path = require("path");

function getConfig(from, options = {}) {
  const workspaces = getWorkspaces(from);

  function getProjectRoots() {
    return [
      // Keep your project directory.
      path.resolve(from),

      // Include your forked package as a new root.
      options.nodeModules || path.resolve(from, "..", "node_modules")
    ].concat(workspaces);
  }

  const config = {
    watchFolders: getProjectRoots(),
    resolver: {
      blacklistRE: blacklist(
        workspaces.map(
          workspacePath =>
            `/${workspacePath.replace(
              /\//g,
              '[/\\\\]'
            )}[/\\\\]node_modules[/\\\\]react-native[/\\\\].*/`
        )
      ),
      extraNodeModules: {
        "react-native": path.resolve(from, "node_modules/react-native")
      }
    }
  };
  return config;
};

module.exports = getConfig(__dirname);

maybe a PR is in order? /Stephen.

[SamMatthewsIsACommonName]

Hi @maitriyogin thanks for this, any idea how would I change it for a monorepo where there is an additional packages directory under the root? e.g root/packages/native etc? Sorry I'm a bit lost at sea with this RN, monorepo situation

Edit: Nevermind, this worked as is thanks! I ended up having to move React Native to my root directory if that helps anyone else

[kvedantmahajan]

Can someone please help here.

I was getting the error and on changing the rn-cli.config.js file as per @maitriyogin my error went away.

But now I have another error for AppEntry.js while running expo start --web

Module not found: Can't resolve '/Users/xxx/Projects/tm-components/packages/native/node_modules/expo/AppEntry.js' in '/Users/xxx/.config/yarn/global/node_modules/@expo/webpack-config/webpack'

rn-cli.config.js

const blacklist = require('metro-config/src/defaults/blacklist');
const getWorkspaces = require('get-yarn-workspaces')
const path = require('path')

function getConfig(from, options = {}) {
  const workspaces = getWorkspaces(from)

  const config = {
    extraNodeModules: {
      'react-native': path.resolve(from, 'node_modules/react-native'),
    },
    getBlacklistRE() {
      return blacklist(
        workspaces.map(
          workspacePath =>
            `/${workspacePath.replace(
              /\//g,
              '[/\\\\]'
            )}[/\\\\]node_modules[/\\\\]react-native[/\\\\].*/`
        )
      )
    },
    getProjectRoots() {
      return [
        // Keep your project directory.
        path.resolve(from),

        // Include your forked package as a new root.
        options.nodeModules || path.resolve(from, '..', 'node_modules'),
      ].concat(workspaces)
    },
  }
  return config
}

module.exports = getConfig(__dirname)

And my crna-entry.js file is

import App from './App';
import Expo from 'expo';
import React from 'react';
const AwakeInDevApp = props => [
  <App key="app" {...props} />,
  process.env.NODE_ENV === 'development' ? (
    <Expo.KeepAwake key="keep-awake" />
  ) : null,
];
Expo.registerRootComponent(AwakeInDevApp);

My package.json's main field is set to use crna-entry.js and my app.json is using

 "entryPoint": "node_modules/expo/AppEntry.js",
...
 "packagerOpts": {
      "config": "rn-cli.config.js"
    }