属性 \'require\' 不存在反应本机 Metro 捆绑器答案

【问题标题】：Property 'require' doesn't exist react native metro bundler属性 \'require\' 不存在反应本机 Metro 捆绑器
【发布时间】：2022-11-04 17:27:50
【问题描述】：

此问题与 Metro 捆绑器无法将 JS 捆绑到设备有关。我运行npm run start，它在浏览器上显示良好（即“我浏览到http://localhost:8081）但是，当我加载npm run ios 时，它会失败并显示以下内容：

error Image

另外，我有一个以前工作的项目，然后导入了另一个有这个问题的项目，现在导致工作项目失败。

我尝试更改端口并重置缓存，但设备找不到要捆绑的 url。
这个问题不是特定于设备的，因为我在 android 上遇到了同样的问题

我试过删除节点模块并运行 npm install

有什么帮助吗？

{
  "name": "venueApp",
  "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": {
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/plugin-proposal-private-methods": "^7.18.6",
    "@testing-library/react-native": "^11.2.0",
    "babel-loader": "^8.2.5",
    "formik": "^2.2.9",
    "jest": "^29.1.1",
    "react": "18.1.0",
    "react-native": "0.70.1",
    "react-native-safe-area-context": "^4.4.0",
    "react-native-vector-icons": "^9.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.19.3",
    "@babel/preset-env": "^7.19.3",
    "@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": "^26.0.23",
    "@types/react-native": "^0.70.0",
    "@types/react-native-vector-icons": "^6.4.12",
    "@types/react-test-renderer": "^18.0.0",
    "@typescript-eslint/eslint-plugin": "^5.37.0",
    "@typescript-eslint/parser": "^5.37.0",
    "babel-jest": "^26.6.3",
    "eslint": "^7.32.0",
    "metro": "^0.72.3",
    "metro-core": "^0.72.3",
    "metro-react-native-babel-preset": "^0.72.1",
    "react-native-mock": "^0.3.1",
    "react-test-renderer": "18.1.0",
    "typescript": "^4.8.3"
  },
  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ],
    "transformIgnorePatterns": [
      "node_modules/(?!((jest-)?react-native(-.*)?|@react-native(-vector-icons)?)/)"
    ]
  }
}

更新：

我发现 index.bundle 文件与工作项目的不同，所以不确定 Metro 为何选择不同的文件。

【问题讨论】：

用于文件导入的“要求”在这里不起作用。所以在代码中查找并使用“import”而不是“require”。
这是一个捆绑文件，如果您 npm run start 并浏览到 http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=yyou.app.package 您可以观察到行号失败

标签： reactjs react-native react-typescript tsx

【解决方案1】：

我有一个类似的问题。我不知道是什么修复了它，但我对这些文件进行了更改。

.watchmanconfig
babel.config.js
metro.config.js

从那以后，我恢复了更改并恢复了生机，但它可能是包括清除 gradle 和删除 node_modules 等的组合。

希望这将帮助您缩小问题的范围。

【讨论】：