I've set up a react-native app as workspace in a monorepo. I did this because I want to share some react components I've created between my mobile and web apps.
The basic structure of my repo is:
root/
package.json (with nohoist: ["**/expoapp/**"])
modules/
...shared modules, some simple JS, some react
apps/
web/ (cra-based web app)
mobile/
package.json
metro.config.js (addes watchFolders and extraNodeModules)
App.js
I am able to import simple JS modules into my mobile app from the modules directory.
But when I try to import one of my react components, I get this error:
Unable to resolve module @babel/runtime/helpers/interopRequireDefault from /Users/jim/development/.../modules/dumb-module/index.js: @babel/runtime/helpers/interopRequireDefault could not be found within the project.
The error message in the console points to the first line of my react component:
iOS Bundling failed 3378ms
Unable to resolve module @babel/runtime/helpers/interopRequireDefault from /Users/jim/development/.../modules/dumb-module/index.js: @babel/runtime/helpers/interopRequireDefault could not be found within the project.
If you are sure the module exists, try these steps:
1. Clear watchman watches: watchman watch-del-all
2. Delete node_modules and run yarn install
3. Reset Metro's cache: yarn start --reset-cache
4. Remove the cache: rm -rf /tmp/metro-*
> 1 | import React from 'react';
2 |
3 | const DumbModule = () => {
4 | return (
DumbModule
is an intentionally simple react component:
import React from 'react';
const DumbModule = () => {
return (
<div>I am useless.</div>
);
};
export default DumbModule;
I add it to App.js like so:
import DumbModule from '@mymodules/dumb-module';
The dependencies in my react-native app are:
"devDependencies": {
"@babel/runtime": "^7.15.4",
"@react-navigation/native": "^6.0.2",
"@react-navigation/native-stack": "^6.2.0",
"react": "17.0.2",
"react-native": "0.65.1",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "^3.7.2",
"@babel/core": "^7.12.9",
"@react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.6.3",
"eslint": "7.14.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.66.0",
"react-native-codegen": "^0.0.7",
"react-test-renderer": "17.0.2"
},
If I disable the import into App.js, the app runs fine. If I enable it, I get the above message pointing at the first line of my component.
I've been through every suggestion I can find. No luck.
Any ideas?
We were able to work around this problem by adding the path to the project's node_modules
directory to the nodeModulesPaths
array in metro.config.js
. It would appear that when metro is resolving the dependencies of the external module (dumb-module) it didn't automatically know to look in the project's own node_modules
, so it couldn't find react.
Of course, it would have been helpful if the error message didn't refer to an unrelated babel file.
Here's my updated metro.config.js
:
const path = require('path');
const extraNodeModules = {
'modules': path.resolve(path.join(__dirname, '../../modules'))
};
const watchFolders = [
path.resolve(path.join(__dirname, '../../modules'))
];
const nodeModulesPaths = [path.resolve(path.join(__dirname, './node_modules'))];
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: true,
inlineRequires: true,
},
}),
},
resolver: {
extraNodeModules,
nodeModulesPaths
},
watchFolders
};