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

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

The answers presented above didn't work for me. I had to [clear the cache of my React Native Project](https://stackoverflow.com/a/51375437/8577483) — Sami, Oct 21 '21 at 23:05

Jogi Prasad Pakki · Accepted Answer · 2022-09-27T11:51:35.223

110

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
  },
};

edited Sep 27 '22 at 11:51

answered Feb 08 '20 at 12:22

Jogi Prasad Pakki

2,013
2
11
21

5

where can I find `metro.config.js` file in my react-native project ? – Versus Apr 23 '20 at 06:13
1

metro.config.js file located at root folder – Jogi Prasad Pakki Jun 17 '20 at 12:12
1

node_modules/metro/src/integration_tests/metro.config.js – NIDHINgL Jul 14 '20 at 06:31
1

Need to create new file => metro.config.js and then add this code into that file which worked for me. – Paresh Thakor Jan 25 '21 at 12:07
1

In my case I had to create the `metro.config.js` file and populate it using the info from Robin Dowling's post below – Andrew Einhorn May 04 '22 at 06:23
I had this same issue with react-chartjs-2. Solved with metro.config.js PLUS adding cjs to sourceExts. Thanks so much, Jogi! – Carlos del Río Francés May 05 '22 at 17:31
Agreed. Make sure to add 'cjs' in there if you are using the latest version of firebase. – trevorhpittman Jun 26 '22 at 03:32
1

React Native 0.70 will have issues with this config as `app.json` will not be resolved. @JogiPrasadPakki if you don't ming please add `json` extension to the array in your snippet. – Alexey Victorov Sep 27 '22 at 11:12

score 50 · Answer 2 · answered Jul 29 '21 at 00:53

50

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.

answered Jul 29 '21 at 00:53

Harsha

1,568
2
19
22

If still doesn't work. uninstall the app in emulator and run again it will work. – Aravind Nov 21 '21 at 12:19

score 22 · Answer 3 · edited Jan 08 '22 at 01:13

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'],
  },
};

score 11 · Answer 4 · answered Jun 12 '21 at 22:48

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!!!

score 3 · Answer 5 · answered Jun 24 '20 at 21:48

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'],
       },
   };

score 3 · Answer 6 · answered May 06 '21 at 19:31

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'], 
  },
};

score 3 · Answer 7 · answered Oct 17 '21 at 06:41

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.

score 2 · Answer 8 · answered Jul 25 '20 at 13:05

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 
   },
};

score 2 · Answer 9 · answered May 13 '23 at 00:44

2

I had to clear watchman to resolve a similar issue

watchman watch-del-all

answered May 13 '23 at 00:44

sushrut619

843
8
20

score 1 · Answer 10 · answered May 12 '22 at 17:23

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;

score 0 · Answer 11 · answered Sep 18 '21 at 13:16

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.

May I ask what you mean by this? – sciffany Dec 15 '21 at 11:52 — sciffany, Dec 15 '21 at 11:52

score 0 · Answer 12 · answered May 25 '22 at 10:13

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');

score 0 · Answer 13 · answered Jul 24 '22 at 10:14

0

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

answered Jul 24 '22 at 10:14

vvspower

49
1
6

score 0 · Answer 14 · edited Aug 11 '22 at 12:36

0

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

edited Aug 11 '22 at 12:36

vimuth

5,064
33
79
116

answered Aug 08 '22 at 12:12

Nnorom prince

15
6

score 0 · Answer 15 · answered Sep 02 '22 at 06:18

0

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

answered Sep 02 '22 at 06:18

Haseeb Rehman

11
1

score 0 · Answer 16 · answered Sep 07 '22 at 18:21

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.

score 0 · Answer 17 · answered Mar 26 '23 at 17:26

I ran into this error when trying to load @angular/core. You carefully need to check your error log (as usual ;)). Apparently there are way more file extensions you should add to your metro.config.js, according to the module you are using.

@angular/core e.g. uses d.ts (because it's index.d.ts in the module's folder) so I needed to add it to the array:

  sourceExts: ['jsx', 'js', 'ts', 'tsx', 'cjs', 'json', 'd.ts']

After that, of course, a fresh restart is recommended

npx react-native start --reset-cache

score 0 · Answer 18 · answered May 25 '23 at 07:37

0

Restart worked for me . just close the terminal and run your project again with npx react-native run-android

answered May 25 '23 at 07:37

Kashinath

194
1
1
8

score -1 · Answer 19 · answered Jan 02 '22 at 04:07

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.

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

19 Answers19

Linked