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

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

react-native react-navigation

Solution 1:^[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.

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
  resolver: {
    sourceExts: ['jsx', 'js', 'ts', 'tsx'], //add here
  },
};

Solution 2:^[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.

Solution 3:^[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'],
  },
};

Solution 4:^[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!!!

Solution 5:^[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'],
       },
   };

Solution 6:^[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'], 
  },
};

Solution 7:^[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 
   },
};

Solution 8:^[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.

Solution 9:^[9]

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.

Solution 10:^[10]

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;

Solution 11:^[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');

Solution 12:^[12]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Harsha
Solution 3	Byron
Solution 4	Shamxeed
Solution 5	Slycreator
Solution 6	MertStack
Solution 7	Amit Kumar Trivedi
Solution 8	localhost_3000
Solution 9	user9042204
Solution 10	Thomas HagstrÃ¶m
Solution 11	Muhammad Muaz
Solution 12	surhidamatya

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]