I'm trying to modify my metro.config.js file so that it will not ignore an npm package's main module.
This is the error message I receive at runtime:
error: Error: While trying to resolve module `@apollo/client` from file `<project-directory>/src/ApolloProvider.tsx`, the package `<project-directory>/node_modules/@apollo/client/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`<project-directory>/node_modules/@apollo/client/main.cjs`. Indeed, none of these files exist:
* <project-directory>/node_modules/@apollo/client/main.cjs(.native|.ios.jsx|.native.jsx|.jsx|.ios.js|.native.js|.js|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.|.native.|.|.ios.json|.native.json|.json)
* <project-directory>/node_modules/@apollo/client/main.cjs/index(.native|.ios.jsx|.native.jsx|.jsx|.ios.js|.native.js|.js|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.|.native.|.|.ios.json|.native.json|.json)
at DependencyGraph.resolveDependency (<project-directory>/node_modules/metro/src/node-haste/DependencyGraph.js:311:17)
at Object.resolve (<project-directory>/node_modules/metro/src/lib/transformHelpers.js:129:24)
at resolve (<project-directory>/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:33)
at <project-directory>/node_modules/metro/src/DeltaBundler/traverseDependencies.js:412:26
at Array.reduce (<anonymous>)
at resolveDependencies (<project-directory>/node_modules/metro/src/DeltaBundler/traverseDependencies.js:411:33)
at processModule (<project-directory>/node_modules/metro/src/DeltaBundler/traverseDependencies.js:140:31)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at addDependency (<project-directory>/node_modules/metro/src/DeltaBundler/traverseDependencies.js:230:18)
at async Promise.all (index 3)
I can clearly see that <project-directory>/node_modules/@apollo/client/main.cjs exists, but it appears that the resolver is always trying to append an extension (whereas the main.cjs file described above needs no extension).
The following is my metro.config.js file:
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
}),
},
resolver: {
sourceExts: ['jsx', 'js', 'ts', 'tsx', ''],
},
};
As you can see I've tried adding an empty string to the sourceExts property's Array, but that doesn't solve the issue.
Any idea how to get this Metro to resolve this main.cjs file correctly?
I've recently encountered this error and tried the same solution without success. The reason it doesn't work is because metro will still look for a file named /path/to/file.js and append . followed by the extension defined in the configuration array. Even if it's empty, it appends a . nonetheless.
I'm not sure if this will work for you, but in my case I didn't change anything in the bundler configuration. What fixed my issue was clearing the project's cache for watchman and react-native.
# Clear watchman's cache
yarn watchman watch-del-all
# Clear react-native's cache
yarn react-native start --reset-cache