However, this package itself specifies a `main` module field that could not be resolved - react-native

Question

I am new to react-native but not ReactJs iam going to mad about this error from 2 days
error: bundling failed: Error: While trying to resolve module `#react-navigation/native` from file `C:\XXXXX\Example\src\Router.jsx`, the package `C:\XXXXX\Example\node_modules\#react-navigation\native\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:\XXXXX\Example\node_modules\#react-navigation\native\src\index.tsx`. Indeed, none of these files exist:
error: bundling failed: Error: While trying to resolve module `react-native-safe-area-context` from file `C:\XXXXX\Example\App.js`, the package `C:\XXXXX\Example\node_modules\react-native-safe-area-context\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:\XXXXX\Example\node_modules\react-native-safe-area-context\src\index.tsx`. Indeed, none of these files exist:
This is my package.json
{
"name": "Example",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "react-native start",
"test": "jest"
},
"dependencies": {
"#react-native-community/masked-view": "^0.1.6",
"#react-navigation/native": "^5.0.0",
"#react-navigation/stack": "^5.0.0",
"eslint": "^6.8.0",
"jetifier": "^1.6.5",
"native-base": "^2.13.8",
"prop-types": "^15.7.2",
"react": "16.8.6",
"react-native": "0.60.0",
"react-native-camera": "^3.16.0",
"react-native-gesture-handler": "^1.5.6",
"react-native-image-crop-picker": "^0.28.0",
"react-native-reanimated": "^1.7.0",
"react-native-safe-area-context": "^0.7.2",
"react-native-safe-area-view": "^1.0.0",
"react-native-screens": "^2.0.0-beta.2",
"react-native-svg": "^11.0.1",
"react-native-vector-icons": "^6.6.0"
},
"devDependencies": {
"#babel/core": "^7.3.3",
"#babel/runtime": "^7.3.1",
"#react-native-community/eslint-config": "^0.0.3",
"babel-jest": "^24.1.0",
"jest": "^24.1.0",
"metro-react-native-babel-preset": "^0.54.1",
"react-test-renderer": "16.8.6"
},
"jest": {
"preset": "react-native"
}
}
I am downgrade the react-navigation version to react-navigation 4 and react-navigation-stack
the error become
error: bundling failed: Error: While trying to resolve module `react-native-safe-area-context` from file `C:\XXXXX\Example\node_modules\react-navigation-stack\lib\module\vendor\views\Stack\StackView.js`, the package `C:\XXXXX\Example\node_modules\react-native-safe-area-context\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:\XXXXX\Example\node_modules\react-native-safe-area-context\src\index.tsx`. Indeed, none of these files exist:
I am also deleted node_modules ,clear cache and install again but no use same errors appear

Answer 1

After a long research MetroJS bundler default not compile typescript .ts and .tsx extension files.
We need tell MetroJS bundler to compile .ts and .tsx files
i solved this error by edit metro.config.js file in root project folder by following.
Edited on September 2022
Added cjx and json extensions to below snippet
All extensions listed below not required it's depend on what language you choose javascript or typescript, and your dependencies
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
resolver: {
sourceExts: ['jsx', 'js', 'ts', 'tsx', 'cjs', 'json'] //add here
},
};

Answer 2

The above answers did not work for me. Turns out there was nothing wrong with my files.
I simply had to terminate the react-native metro that was running on the terminal and restarted it, it worked fine.

Answer 3

Adding to the accepted answer by Jogi, this issue was acknowledged by the Apollo developers at https://github.com/apollographql/apollo-client/blob/main/CHANGELOG.md#apollo-client-354-2021-11-19
I was unable to resolve the issue with Jogi's answer alone, but after adding 'cjs' to the array, as recommended in the linked changelog, my app was able to start up as expected.
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
}),
},
resolver: {
sourceExts: ['jsx', 'js', 'ts', 'tsx', 'cjs'],
},
};

Answer 4

For me, I'm using two terminals to run my app. 1st terminal: react-native start, 2nd: react-native run android, which builds the app and starts it on my physical device. I got the same error above when I installed a new package and rebuild my app not knowing that I had to restart the react-native server.
So what I just did is went back to 1st terminal, killed it, and re-run react-native start then rebuilt my app in the second terminal and everything is working as expected!!!

Answer 5

here is how my metro.config.js it looks like after configuring. i am using react-navigato 5*
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
/** include this below (remove this comment too)*/
resolver: {
sourceExts: ['jsx', 'js', 'ts', 'tsx'],
},
};

Answer 6

I got the same error with react-native-gesture-handler package.Changing metro.config.js file has worked for me.
/**
* Metro configuration for React Native
* https://github.com/facebook/react-native
*
* #format
*/
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
resolver: {
sourceExts: ['jsx', 'js', 'ts', 'tsx'],
},
};

Answer 7

This has worked for me.
* Metro configuration for React Native
* https://github.com/facebook/react-native
*
* #format
*/
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
resolver: {
sourceExts: ['jsx','js','ts','tsx'] //add here
},
};

Answer 8

As many of them already mentioned to customize your metro.config.js file. If it is not there create it in the root directory of your project and then add the code as everyone said. Now even after adding the code in metro.config.js file error is there, then you have to stop your expo server and restart with command
expo start -c
This works for me. Hope it will help you too.

Answer 9

For Expo, this version worked
https://github.com/firebase/firebase-js-sdk/issues/6253#issuecomment-1123923581
const { getDefaultConfig } = require("#expo/metro-config");
const defaultConfig = getDefaultConfig(__dirname);
defaultConfig.resolver.assetExts.push("cjs");
module.exports = defaultConfig;

Answer 10

Sometimes, you get this error because you install an npm package that has a main script that's not correctly integrated with your project. This could be because you have named your files differently, you have nested your file a layer deeper and causes a script to break, etc.
Check the package.json file of the package the error message tells you "main" is incorrect and see if it is correctly pointing to the app entry in the package.json of the root directory.
Doing this fixed the error for me.

Answer 11

for me none of the above worked but this did:
go to :
node_modules\deprecated-react-native-prop-types\DeprecatedColorPropType.js
find this line :
const normalizeColor = require('#react-native/normalize-color');
and change it to this:
const normalizeColor = require('#react-native/normalize-color/base');

Answer 12

I tried all the solutions above but none worked. so i did yarn install instead of npm and it worked

Answer 13

For me, It was to kill my metro cmd
Deleted my app from the emulator then,
run npx react-native run-android or
if you're using expo run
npm start
Error is gone

Answer 14

kill the already running terminal and start the project by running this command:
npx react-native start it will start your app as expected

Answer 15

I got the same issue.I am using yarn as my package manager. Resolved the issue by following the below steps.
Stop the metro bundler(In my case i closed terminal which terminated metro bundler).
Restart it using yarn start --reset-cache.
Run yarn android.

Answer 16

In my case the error was due to the cache. I followed following steps:
Navigate to android folder
cd android
after that clean the build folder
./gradlew clean
and to generate the apk file
./gradlew assembleRelease -x bundleReleaseJsAndAssets
use this to generate aab
./gradlew bundleRelease -x bundleReleaseJsAndAssets
I hope these commands will help others as well.