React Native中Property 'require'不存在错误求助

我在开发React Native时遇到了「Property 'require' doesn't exist」错误，推测该错误来自Metro Bundler，错误截图如下：

我已经尝试了React Native官方GitHub issue中的所有解决方案，包括：

• 删除node_modules
• 重启缓存

但终端没有显示任何错误，仅在设备端抛出该错误，恳请提供解决帮助。

项目配置文件 #

babel.config.js #

module.exports = {
  presets: ['module:metro-react-native-babel-preset', '@babel/preset-typescript','@babel/preset-env'],
  plugins: [
    ['@babel/plugin-proposal-class-properties'],
    ['module:react-native-dotenv',
      {
        moduleName: '@env',
        path: '.env',
      },
    ],
    'react-native-reanimated/plugin',
    [
      'module-resolver',
      {
        root: ['./src/'],
        alias: {
          '@assets': './src/assets',
          '@components': './src/components',
          '@constants': './src/constants',
          '@navigation': './src/navigations',
          '@screens': './src/screens',
          '@utils': './src/utils',
          '@styles': './src/styles',
          '@redux': './src/redux',
          '@config': './src/config',
        },
      },
    ],
  ],
};

metro.config.js #

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  }, 
};

jestConfig.ts #

import mockAsyncStorage from '@react-native-async-storage/async-storage/jest/async-storage-mock';
import 'react-native-gesture-handler/jestSetup';

jest.mock('react-native/Libraries/EventEmitter/NativeEventEmitter');

jest.mock('react-native-keyboard-controller', () => ({}));
jest.mock('react-native-bootsplash', () => {
  return {
    hide: jest.fn(),
    show: jest.fn(),
  };
});

jest.mock('@notifee/react-native', () => ({}));

jest.mock('@react-native-async-storage/async-storage', () => mockAsyncStorage);

jest.mock('axios', () => {
  return {
    create: () => {
      return {
        get: jest.fn(),
        post: jest.fn(),
        put: jest.fn(),
        interceptors: {
          request: {eject: jest.fn(), use: jest.fn()},
          response: {eject: jest.fn(), use: jest.fn()},
        },
      };
    },
  };
});

export {};

package.json #

{
  "name": "name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
  },
  "dependencies": {
    "@notifee/react-native": "^7.2.0",
    "@react-native-async-storage/async-storage": "^1.17.10",
    "@react-native-masked-view/masked-view": "^0.2.8",
    "@react-navigation/bottom-tabs": "^6.4.0",
    "@react-navigation/native": "^6.0.13",
    "@react-navigation/native-stack": "^6.9.1",
    "@reduxjs/toolkit": "^1.8.6",
    "@shopify/flash-list": "^1.3.1",
    "@types/lodash": "^4.14.191",
    "axios": "^1.2.1",
    "babel-plugin-module-resolver": "^4.1.0",
    "native-base": "^3.4.22",
    "react": "18.1.0",
    "react-native": "0.70.6",
    "react-native-bootsplash": "^4.3.2",
    "react-native-dotenv": "^3.4.2",
    "react-native-fast-image": "^8.6.3",
    "react-native-gesture-handler": "^2.7.1",
    "react-native-keyboard-controller": "^1.4.2",
    "react-native-modal": "^13.0.1",
    "react-native-pager-view": "^6.1.2",
    "react-native-pusher-push-notifications": "^2.5.1",
    "react-native-reanimated": "^2.11.0",
    "react-native-responsive-screen": "^1.4.2",
    "react-native-safe-area-context": "3.3.2",
    "react-native-screens": "^3.18.2",
    "react-native-svg": "12.1.1",
    "react-native-tab-view": "^3.3.4",
    "react-native-vector-icons": "^9.2.0",
    "react-native-webview": "^11.26.0",
    "react-redux": "^8.0.4",
    "redux": "^4.2.0",
    "redux-logger": "^3.0.6",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.4.2",
    "ts-jest": "^29.0.3"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "@babel/preset-typescript": "^7.18.6",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "@tsconfig/react-native": "^2.0.2",
    "@types/jest": "29.0.3",
    "@types/react": "^18.0.21",
    "@types/react-native": "^0.70.6",
    "@types/react-native-dotenv": "^0.2.0",
    "@types/react-native-vector-icons": "^6.4.12",
    "@types/react-test-renderer": "^18.0.0",
    "@types/redux-logger": "^3.0.9",
    "@types/redux-persist": "^4.3.1",
    "@typescript-eslint/eslint-plugin": "^5.37.0",
    "@typescript-eslint/parser": "^5.37.0",
    "babel-jest": "29.0.3",
    "babel-plugin-transform-require-context": "^0.1.1",
    "eslint": "^7.32.0",
    "jest": "29.0.3",
    "metro-react-native-babel-preset": "0.72.3",
    "react-native-typescript-transformer": "^1.2.13",
    "react-test-renderer": "18.1.0",
    "typescript": "^4.8.3"
  },
  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ],
    "setupFiles": [
      "./jestConfig.ts"
    ],
    "transformIgnorePatterns": [
      "node_modules/node_modules/react-native-responsive-screen/index.js"
    ]
  }
}

排查与解决建议 #

1. 修复TypeScript类型配置 #

这个错误基本是TypeScript无法识别全局require变量导致的。在tsconfig.json中确保包含React Native和Node的类型声明：

{
  "extends": "@tsconfig/react-native/tsconfig.json",
  "compilerOptions": {
    "types": ["react-native", "node"]
  }
}

如果项目没有tsconfig.json，直接创建并添加上述内容。

2. 调整Babel预设顺序 #

你的babel.config.js中预设顺序可能冲突，@babel/preset-env可能覆盖React Native的内置配置。尝试把module:metro-react-native-babel-preset放在最后：

presets: ['@babel/preset-typescript', '@babel/preset-env', 'module:metro-react-native-babel-preset'],

3. 关闭Metro的inlineRequires #

inlineRequires可能导致require解析异常，修改metro.config.js：

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false, // 改为false
      },
    }),
  }, 
};

4. 彻底清理缓存并重建 #

执行以下命令完全清理缓存后重新构建：

# 重置Metro缓存
npx react-native start --reset-cache

# iOS环境额外操作
cd ios && pod deintegrate && pod install && cd ..

# Android环境额外操作
cd android && ./gradlew clean && cd ..

# 重装依赖
rm -rf node_modules package-lock.json yarn.lock
npm install

5. 检查代码中的require用法 #

排查代码里是否有错误的require调用，比如在TypeScript文件中使用require导入模块时的类型不兼容问题，可尝试将部分require替换为ES6 import语法测试。

内容的提问来源于stack exchange，提问作者Govind Maheshwari