0

I am using monorepo created using Yarn Workspaces with Typescript which has a react-native project (mobile folder) and a common folder which contains the common files to be shared across projects. Here the mobile project is dependent on common files and I have configured it referring to this doc.

When I do yarn install it show this error -> An unexpected error occurred: "https://registry.yarnpkg.com/@myapp%2fcommon: Not found".

Monorepo Structure:

packages
|---package.json
|---Common
|      |---src
|      |---package.json
|---Mobile
|      |---src
|      |---package.json

root package.json

{
"name": "monorepo",
"version": "0.0.1",
"private": true,
"workspaces": {
    "packages": ["packages/*"],
    "nohoist": [
        "**/react-native",
        "**/react-native/**",
    ]
}
}

Common's package.json

{
"name": "@myapp/common",
"version": "0.0.1",
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
},
"license": "UNLICENSED",
"devDependencies": {
  "@types/react": "18.0.9",
  "@types/react-native": "0.67.7",
  "@reduxjs/toolkit": "1.8.1",
  "react-redux": "8.0.1"
}
}

Mobile's package.json (react-native)

"name": "@myapp/mobile",
"version": "0.0.1",
"private": true,
...
"dependencies": {
    "@myapp/common": "0.0.1",
    "@reduxjs/toolkit": "1.8.1",
    "react": "17.0.2",
    "react-native": "0.68.2",
    ...
}
...

Any Suggestions ?

Joshua
  • 1,167
  • 1
  • 14
  • 32

1 Answers1

2

Your root package.json isn't really root. Make sure your folder structure looks like this:

package.json 
packages 
|---Common
|...
Sal
  • 814
  • 6
  • 12
  • Got it. This resolved that error. But still `@myapp/common` is not present in Mobile's `node_modules` even after performing `yarn install` on the root folder. – Joshua May 28 '22 at 09:14
  • 1
    That is the intended behaviour since you are hoisting everything but react-native. If you want to keep `@myapp/common` local to its package then add it to your `nohoist` list. – Sal May 29 '22 at 02:12
  • Yes, Nice catch. I have added it to `nohoist`. – Joshua May 30 '22 at 16:44
  • While running the app. I am getting the error `Unable to resolve module @myapp/common from App.js. @myapp/common could not be found within the project or in these directories:\n node_modules`. But when I checked `node_modules` folder manually it is present in it. Any idea? – Joshua Jun 01 '22 at 04:26
  • 1
    Are you using any bundling tool? If so, it seems that your bundling tool is not looking for modules in your local `node_modules` folder. – Sal Jun 01 '22 at 05:28
  • Yes, `react-native` has a metro bundler which bundles everything into a single file. But If it is manually present, it should also bundle this package right? – Joshua Jun 01 '22 at 17:14
  • I updated the `metro.config.js` file to check for `@myapp/common` in `node_modules` even-though it is present. Also restarted the TS server in VS code and ran the app. It worked. – Joshua Jun 01 '22 at 18:23
  • 1
    Nice. To answer your question: no, just because the folder is present in your `node_modules` it does not mean that the bundler knows it should look in there for modules. Usually when having multiple `node_modules` you have an array in the bundler config file that specify where to look for modules when resolving, eg: `resolveFrom: ['packages/project1/node_modules', 'root/node_modules']`. That tells the bundler to look first in `packages/project1/node_modules` and then if the module was not found there look in `root/node_modules` – Sal Jun 02 '22 at 21:53
  • Any idea on this? -> https://stackoverflow.com/questions/72493062/android-release-build-crashes-using-react-native-in-yarn-workspaces-monorepo Currently facing this issue. – Joshua Jun 03 '22 at 17:17
  • No idea as I am not familiar with react-native. Try searching other questions maybe it is a common error. – Sal Jun 06 '22 at 21:14