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

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