React Native无法解析@babel/runtime模块错误求助（v0.74.6）

React Native版本：0.74.6

遇到错误：Unable to resolve module @babel/runtime/helpers/interopRequireDefault，尝试多种方法均未解决，恳请帮助。

babel.config.js #

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        alias: {
          '@env': './env.config.js',
          '@api': './src/api',
          '@assets': './src/assets',
          '@comp': './src/components',
          '@hooks': './src/hooks',
          '@providers': './src/providers',
          '@screens': './src/screens',
          '@search': './src/search',
          '@services': './src/services',
          '@stores': './src/stores',
          '@styles': './src/styles',
          '@utils': './src/utils',
          '@navigation': './src/navigation',
          '@constants': './src/constants',
        },
      },
    ],
    'react-native-reanimated/plugin',
    // 为babel runtime添加的插件
    '@babel/plugin-transform-runtime'
  ],
};

metro.config.js #

const path = require('path');
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

console.log(__dirname,"__dirname");

const defaultConfig = getDefaultConfig(__dirname);
const {
  resolver: { sourceExts, assetExts },
} = defaultConfig;

const config = {
  transformer: {
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
    minifierPath: 'metro-minify-terser',
    minifierConfig: {
      compress: {
        drop_console: false,
        drop_debugger: false,
      },
    },
  },
  resolver: {
    assetExts: [
      ...assetExts.filter(ext => ext !== 'svg'),
      'png',
      'jpg',
      'jpeg',
      'gif',
      'webp',
    ],
    sourceExts: [
      ...sourceExts,
      'svg',
      'js',
      'jsx',
      'json',
      'ts',
      'tsx',
      'cjs',
      'mjs',
    ],
    resolverMainFields: ['react-native', 'browser', 'main'],
    blockList: [
      /.*\/node_modules\/.*\/node_modules\/react-native\/.*/,
      /^\.(git|hg|svn)$/,
      /^\.git/,
      /^\.hg/,
      /\android\/.*/,
      /\ios\/.*/,
    ],
    platforms: ['ios', 'android', 'web'],
    disableHierarchicalLookup: true,
  },
  watchFolders: [
    path.resolve(__dirname, './node_modules'),
    path.resolve(__dirname),
  ],
  cacheStores: [
    new (require('metro-cache').FileStore)({
      root: path.join(__dirname, 'metro-cache'),
    }),
  ],
  maxWorkers: 4,
  resetCache: true,
  server: {
    port: 8081,
  },
};

module.exports = mergeConfig(defaultConfig, config);

模拟器错误截图：

解决建议 #

• 安装缺失的依赖：执行 npm install @babel/runtime --save 或 yarn add @babel/runtime
• 清除Metro缓存：执行 npx react-native start --reset-cache
• 调整Metro配置：尝试移除metro.config.js中resolver下的disableHierarchicalLookup: true，该配置可能导致模块层级查找异常
• 重装依赖：删除node_modules文件夹和package-lock.json/yarn.lock文件，重新执行npm install或yarn install后重启项目
• 检查Babel插件顺序：确保@babel/plugin-transform-runtime放在其他插件之后（当前配置已符合，可确认顺序是否正确）

内容的提问来源于stack exchange，提问作者Mehmet Erdoğan