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


        

Answer 1

After a long research MetroJS bundler default not compile .ts and .tsx extension files we need tell MetroJS bundler to compiles .ts and .tsx files i solved this error by edit metro.config.js file in root project folder by following

module.exports = {

  resolver: {
   sourceExts: ['jsx','js','ts','tsx'] //add here 
  },
};

Answer 2

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 3

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