React-native: this package itself specifies a main module field that could not be resolved ... Indeed, none of these files exist

[jwoo9928]

I applied unstable_enablePackageExports: true in metro.config.js, but the problem still occurs in react-native.

environment

"react-native": "0.72.4"

metro.config.js

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

const { getDefaultConfig } = require('metro-config');

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig();

  return {
    presets: [
      [
        'module:metro-react-native-babel-preset',
        {
          unstable_transformProfile: 'hermes-stable',
        },
      ],
    ],
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
    },
    resolver: {
      unstable_enablePackageExports: true,
      extraNodeModules: {
        stream: require.resolve('stream-browserify'),
        _stream_transform: require.resolve('readable-stream'),
      },
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg', 'cjs'],
    },
    dependencies: {
      'react-native-vector-icons': {
        platforms: {
          ios: null,
        },
      },
      'react-native-aes-crypto-forked': {
        platforms: {
          ios: null, // disable Android platform, other platforms will still autolink if provided
        },
      },
    },
  };
})();

bable.config.js

module.exports = function (api) {
  api.cache(true);

  return {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: [
      ['@babel/plugin-transform-private-methods', { loose: true }],
      ['react-native-reanimated/plugin'],
      ['@babel/plugin-proposal-decorators', { legacy: true }],
      [
        'module-resolver',
        {
          root: ['./src'],
          extensions: [
            '.ios.ts',
            '.android.ts',
            '.ts',
            '.ios.tsx',
            '.android.tsx',
            '.tsx',
            '.jsx',
            '.js',
            '.json',
          ],
          alias: {
            '@': './src',
            '@assets': './src/assets',
            '@components': './src/components',
            '@constants': './src/constants',
            '@core': './src/core',
            '@pages': './src/pages',
            '@atomStates': './src/atomStates',
            '@lib': './src/lib',
            '@models': './src/models',
            '@store': './src/store',
            '@reducers': './src/reducers',
            '@scripts': './src/scripts',
            '@styles': './src/styles',
            '@types': './src/types',
            '@utils': './src/utils',
            '@translate': './src/translate',
          },
        },
      ],
      [
        'module:react-native-dotenv',
        {
          moduleName: '@env',
          path: '.env',
          blocklist: null,
          allowlist: null,
          safe: false,
          allowUndefined: false,
        },
      ],
    ],
    env: {
      production: {
        plugins: ['transform-remove-console'],
      },
    },
  };
};

Error

error: Error: While trying to resolve module `helia` from file `/Users/jaewoopark/Desktop/multi_wallet/src/components/screens/login/index.tsx`, the package `/Users/jaewoopark/Desktop/multi_wallet/node_modules/helia/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/jaewoopark/Desktop/multi_wallet/node_modules/helia/index`. Indeed, none of these files exist:

  * /Users/jaewoopark/Desktop/multi_wallet/node_modules/helia/index(.native|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.svg|.native.svg|.svg|.ios.cjs|.native.cjs|.cjs)
  * /Users/jaewoopark/Desktop/multi_wallet/node_modules/helia/index/index(.native|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.svg|.native.svg|.svg|.ios.cjs|.native.cjs|.cjs)
    at DependencyGraph.resolveDependency (/Users/jaewoopark/Desktop/multi_wallet/node_modules/metro/src/node-haste/DependencyGraph.js:289:17)
    at Object.resolve (/Users/jaewoopark/Desktop/multi_wallet/node_modules/metro/src/lib/transformHelpers.js:169:21)
    at Graph._resolveDependencies (/Users/jaewoopark/Desktop/multi_wallet/node_modules/metro/src/DeltaBundler/Graph.js:473:35)
    at Graph._processModule (/Users/jaewoopark/Desktop/multi_wallet/node_modules/metro/src/DeltaBundler/Graph.js:261:38)
    at async Graph._traverseDependenciesForSingleFile (/Users/jaewoopark/Desktop/multi_wallet/node_modules/metro/src/DeltaBundler/Graph.js:249:5)
    at async Graph.traverseDependencies (/Users/jaewoopark/Desktop/multi_wallet/node_modules/metro/src/DeltaBundler/Graph.js:157:9)
    at async DeltaCalculator._getChangedDependencies (/Users/jaewoopark/Desktop/multi_wallet/node_modules/metro/src/DeltaBundler/DeltaCalculator.js:281:42)
    at async DeltaCalculator.getDelta (/Users/jaewoopark/Desktop/multi_wallet/node_modules/metro/src/DeltaBundler/DeltaCalculator.js:112:16)
    at async DeltaBundler.getDelta (/Users/jaewoopark/Desktop/multi_wallet/node_modules/metro/src/DeltaBundler.js:67:12)
    at async IncrementalBundler.updateGraph (/Users/jaewoopark/Desktop/multi_wallet/node_modules/metro/src/IncrementalBundler.js:224:19)