react native - 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:XXXXXExamplesrcRouter.jsx`, the package `C:XXXXXExample
ode_modules@react-navigation
ativepackage.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:XXXXXExample
ode_modules@react-navigation
ativesrcindex.tsx`. Indeed, none of these files exist:

error: bundling failed: Error: While trying to resolve module `react-native-safe-area-context` from file `C:XXXXXExampleApp.js`, the package `C:XXXXXExample
ode_modules
eact-native-safe-area-contextpackage.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:XXXXXExample
ode_modules
eact-native-safe-area-contextsrcindex.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:XXXXXExample
ode_modules
eact-navigation-stacklibmodulevendorviewsStackStackView.js`, the package `C:XXXXXExample
ode_modules
eact-native-safe-area-contextpackage.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:XXXXXExample
ode_modules
eact-native-safe-area-contextsrcindex.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.

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