Reputation: 557
I have an existing React native app. I would like to create another and share some code between them.
I made use of Metro extraNodeModules
to import the shared code into either app.
In either app, I expect to be able to do for example:
// MyApp1/src\navigation\app.navigator.js
import { someUtilModule } from 'shared';
Unfortunately when the app bundle is loading on my development device, it fails with:
error: Error: Unable to resolve module `shared` from `src\navigation\app.navigator.js`: shared could not be found within the project or in these directories:
C:\path\to\my\project
If you are sure the module exists, try these steps:
1. Clear watchman watches: watchman watch-del-all
2. Delete node_modules: rm -rf node_modules and run yarn install
3. Reset Metro's cache: yarn start --reset-cache
4. Remove the cache: rm -rf /tmp/metro-*
at ModuleResolver.resolveDependency (C:\path\to\my\project\MyApp1\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:186:15)
at ResolutionRequest.resolveDependency (C:\path\to\my\project\MyApp1\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:52:18)
at DependencyGraph.resolveDependency (C:\path\to\my\project\MyApp1\node_modules\metro\src\node-haste\DependencyGraph.js:287:16)
at Object.resolve (C:\path\to\my\project\MyApp1\node_modules\metro\src\lib\transformHelpers.js:267:42)
at C:\path\to\my\project\MyApp1\node_modules\metro\src\DeltaBundler\traverseDependencies.js:434:31
at Array.map (<anonymous>)
at resolveDependencies (C:\path\to\my\project\MyApp1\node_modules\metro\src\DeltaBundler\traverseDependencies.js:431:18)
at C:\path\to\my\project\MyApp1\node_modules\metro\src\DeltaBundler\traverseDependencies.js:275:33
at Generator.next (<anonymous>)
at asyncGeneratorStep (C:\path\to\my\project\MyApp1\node_modules\metro\src\DeltaBundler\traverseDependencies.js:87:24)
Folder Structure (The shared
folder exists - this is output from tree
):
C:\path\to\my\project
├── MyApp1
│ └── src
│ ├── app
│ ├── assets
│ ├── components
│ ├── core
│ ├── navigation
│ ├── scenes
│ └── services
├── MyApp2
│ └── src
│ ├── app
│ ├── assets
│ ├── components
│ ├── core
│ ├── navigation
│ ├── scenes
│ └── services
└── shared
├── assets
├── components
├── navigation
├── scenes
└── services
My metro configuration:
// ...
const sharedDir = path.resolve(`${__dirname}/../shared`);
const extraNodeModules = {
shared: sharedDir,
};
const watchFolders = [sharedDir];
module.exports = {
transformer: /*...*/,
resolver: {
extraNodeModules: new Proxy(extraNodeModules, {
get: (target, name) => {
// redirects dependencies referenced from shared/ to local node_modules
return name in target
? target[name]
: path.join(process.cwd(), `node_modules/${name.toString()}`);
},
}),
},
watchFolders,
}
Upvotes: 5
Views: 3096
Reputation: 557
I ultimately got around this by creating a dummy package.json
file in the shared/
:
{
"name": "shared",
"version": "0.0.1"
}
At a much later date I removed that file and the project continued to work...
Right now, it might be worth completely emptying cache, temp files, etc. before resorting to a dummy package.json
Upvotes: 1