Using CRNA with Lerna and Yarn workspaces

[jribeiro]

Description

Currently CRNA includes App.js through crna-entry.js using a relative import https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/src/bin/crna-entry.js#L2

import App from '../../../../App';

Problem is that, when using a monorepo approach with Lerna and Yarn workspaces, the node_modules get installed on the root of the project which breaks the relative import for App.js

Expected Behavior

CRNA should ideally support a monorepo configuration and import App.js relative to the CRNA project root.

I've tried to change crna-entry.js to use __dirname instead but that fails once the code is loaded on the device as __dirname is not defined. I've looked into using babel-plugin-transform-dirname-filename to replace it by a string but obviously babel won't transpile node_modules folder by default.

Observed Behavior

What actually happened when you performed the above actions?
CRNA fails to load App.js

Unable to resolve module `../../../../App` from `~/test-monorepo/node_modules/react-native-scripts/build/bin/crna-entry.js` could not resolve `~/test-monorepo/App` as a folder: it did not contain a package, nor an index file

Environment

• npm ls react-native-scripts: 1.3.1
• npm ls react-native: 0.47.2
• npm ls expo: 20.1.3
• node -v: 8.4.0
• npm -v: 4.6.1
• yarn --version: 1.0.2
• watchman version: 4.9.0

1. Operating system: MacOS Sierra 10.12.6
2. Phone/emulator/simulator & version: iOS (phone & simulator) / Android Genymotion

Reproducible Demo

I've created this example project outlining the problem:
https://github.com/jribeiro/crna-monorepo/tree/app-import-error

Additional Info

I've managed to workaround this by creating an App.js file on the root of the monorepo project that exports the CRNA project App.js. I think it would still be better to have a smother experience though.

The "patched" project can be found here:
https://github.com/jribeiro/crna-monorepo/tree/master

Let me know you're thoughts. Happy to help out as much as I can.

[anp]

I agree this would be good to support. However, in order to be friendly to beginners, we want to limit the amount of code in the entry point that they have to understand in order to make changes to their project. So, we "hide" the entry point that the packager sees inside node_modules. I think that metro does actually run babel on n_m, but I think we'd have to pass babel some info about the correct project layout, and I'm not sure if the packager supports that.

I'm not entirely sure what the best approach to supporting this is, but I think it'll require some upstream work on metro-bundler.

[dariocravero]

In case anyone is stuck with this and until the different issues are fixed, I made a little guide on how to use yarn workspaces with Create React App and Create React Native App (Expo) to share common code across. Hope you find it handy! https://learn.viewsdx.com/how-to-use-yarn-workspaces-with-create-react-app-and-create-react-native-app-expo-to-share-common-ea27bc4bad62 https://medium.com/viewsdx/how-to-use-yarn-workspaces-with-create-react-app-and-create-react-native-app-expo-to-share-common-ea27bc4bad62

[hassankhan]

Hi @dariocravero, I followed the instructions as per your link but still no luck :( is it possible something changed in CRNA?

[dariocravero]

Sorry to hear that @hassankhan. Let's move the conversation to viewstools/yarn-workspaces-cra-crna#1 not to clutter this thread