Discussion on: Tutorial: How to share code between iOS, Android & Web using React Native, react-native-web and monorepo

View post

Replies for: HELP! something changed and i cannot replicate this tutorial anymore. i cannot get past the first time you are testing android studio. I remember s...

Hi, I updated the tutorial with the latest changes from react-native@0.59, search for projectRoot to see the updated step involving the file metro.config.js.

bantingGamer • Mar 13 '19 • Edited

thank you so much for the new changes in the tutorial. i made the changes to the metro.config.js just like you suggested and i can now run it on android. i will continue with the rest of the tutorial in the morning.

bantingGamer • Mar 14 '19

Hey Bruno how are you?

Im still running into a issue. Soon as i complete the web section of the tutorial. my mono repo breaks for mobile. it installs all the modules in packages/mobile/node-modules instead of root/node_modules.

Thus when I run packages/mobile/yarn start i get the following error
"Error: Cannot find module 'E:\2019_PROJECTS\moco-messenger-project\code\repo\test\node_modules\react-native\local-cli\cli.js'"

I dont understand how the web project is affecting the mobile project. Please assist.

kind regards

Bruno Lemos • Mar 14 '19

Make sure you have the correct content inside the root package.json and you used yarn at the root directory to install the dependencies, not inside each package neither npm instead of yarn.

Compare your code with the repository to see if anything is different: github.com/brunolemos/react-native...

bantingGamer • Mar 14 '19

hey bruno,

I just did like you said, I even upgraded react-native to v0.59.0 stable. yet still when i run yarn in the root it still installs packages/mobile/node-modules and not in root/node_modules.

how can i compare an entire project with difference in vs code? are you sure there isnt a step missing? I have tried 3 times now following your exact instructions.

Bruno Lemos • Mar 14 '19

Do you have the latest version of nodejs and yarn? How is your root package.json?

bantingGamer • Mar 14 '19 • Edited

I just checked on my computer, im running yarn 1.130 and node v10.0.0 i believe those are the latest versions.

my root package.json file looks exactly like yours.

{
"name": "myprojectname",
"version": "0.0.1",
"private": true,
"workspaces": {
"packages": [
"packages/*"
]
}
}

like i said im extremely confused becasue i dont understand why the monorepo breaks when i add the web

bantingGamer • Mar 14 '19 • Edited

i just downloaded your project at
github.com/brunolemos/react-native... and when i run yarn in the root it is also installing the packages in the wrong places.

Ryan Atkinson • Mar 16 '19 • Edited

Hey everyone, I downloaded the project, followed the updated tutorial and ran into the same exact issue. I got /mobile running again by updating the relative filepath in its package.json to the react-native-cli:

"scripts": {
    "start": "node ./node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },

good luck!

Bruno Lemos • Mar 20 '19 • Edited

Hey, you both were right! React Native started getting installed inside packages/mobile/node_modules, which is wrong. Changing the path is not the right solution though.

I investigated and you need to make sure all your dependencies have the exact same version between the monorepo packages. For example, change your "react" dependency inside the mobile and web's package.json to the exact same version (e.g. 16.8.4).

This will make react-native get installed in the root node_modules again and also prevent multiple instances of react being installed in the same project, which would cause all kinds of bugs.

Updated the tutorial and also the repository: github.com/brunolemos/react-native...