每当运行 npx expo start 时，如何修复 Cannot find module 'babel-preset-metro-react-native-babel-preset' 错误？

Question

每次运行 npx expo start 时，都会收到此错误并且无法加载我的应用程序：

error: node_modules/expo-router/entry.js: Cannot find module 'babel-preset-metro-react-native-babel-preset'
Require stack:
- /Users/oliviazhang/den_app/den/node_modules/@babel/core/lib/config/files/plugins.js
- /Users/oliviazhang/den_app/den/node_modules/@babel/core/lib/config/files/index.js
- /Users/oliviazhang/den_app/den/node_modules/@babel/core/lib/index.js
- /Users/oliviazhang/den_app/den/node_modules/@expo/metro-config/build/transform-worker/metro-transform-worker.js
- /Users/oliviazhang/den_app/den/node_modules/@expo/metro-config/build/transform-worker/transform-worker.js
- /Users/oliviazhang/den_app/den/node_modules/metro/src/DeltaBundler/Worker.flow.js
- /Users/oliviazhang/den_app/den/node_modules/metro/src/DeltaBundler/Worker.js
- /Users/oliviazhang/den_app/den/node_modules/jest-worker/build/workers/processChild.js
- If you want to resolve "metro-react-native-babel-preset", use "module:metro-react-native-babel-preset"

Make sure that all the Babel plugins and presets you are using
are defined as dependencies or devDependencies in your package.json
file. It's possible that the missing plugin is loaded by a preset
you are using that forgot to add the plugin to its dependencies: you
can workaround this problem by explicitly adding the missing package
to your top-level package.json.

这是我的 package.json 文件：

{
  "name": "den",
  "main": "expo-router/entry",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start",
    "reset-project": "node ./scripts/reset-project.js",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "test": "jest --watchAll",
    "lint": "expo lint"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@babel/runtime": "^7.24.8",
    "@clerk/clerk-expo": "^1.2.3",
    "@expo/vector-icons": "^14.0.2",
    "@react-native-async-storage/async-storage": "^1.24.0",
    "@react-native-community/slider": "^4.5.2",
    "@react-native-firebase/app": "^20.1.0",
    "@react-native-firebase/storage": "^20.1.0",
    "@react-navigation/native": "^6.1.17",
    "@react-navigation/stack": "^6.4.0",
    "@react-three/drei": "^9.108.3",
    "@react-three/fiber": "^8.16.8",
    "axios": "^1.7.2",
    "babel-plugin-module-resolver": "^5.0.2",
    "domexception": "^4.0.0",
    "expo": "~51.0.17",
    "expo-av": "~14.0.6",
    "expo-constants": "~16.0.2",
    "expo-font": "~12.0.7",
    "expo-gl": "~14.0.2",
    "expo-haptics": "~13.0.1",
    "expo-linear-gradient": "~13.0.2",
    "expo-linking": "~6.3.1",
    "expo-router": "~3.5.17",
    "expo-secure-store": "^13.0.2",
    "expo-splash-screen": "~0.27.5",
    "expo-status-bar": "~1.12.1",
    "expo-system-ui": "~3.0.6",
    "expo-three": "^2.2.1",
    "expo-web-browser": "~13.0.3",
    "express": "^4.19.2",
    "firebase": "^10.12.3",
    "glob": "^11.0.0",
    "querystring": "^0.2.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.74.2",
    "react-native-3d-model-view": "^1.2.0",
    "react-native-animated-circular-progress": "^1.0.6",
    "react-native-circular-progress": "^1.4.0",
    "react-native-gesture-handler": "~2.16.1",
    "react-native-gl-model-view": "^1.6.0",
    "react-native-linear-gradient": "^2.8.3",
    "react-native-ratings": "^8.1.0",
    "react-native-reanimated": "~3.10.1",
    "react-native-safe-area-context": "^4.10.1",
    "react-native-screens": "^3.31.1",
    "react-native-svg": "^15.2.0",
    "react-native-track-player": "^4.1.1",
    "react-native-video": "^6.4.0",
    "react-native-web": "~0.19.10",
    "rimraf": "^6.0.1",
    "text-encoding": "^0.7.0",
    "three": "^0.166.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/plugin-transform-private-property-in-object": "^7.24.7",
    "@babel/preset-env": "^7.24.8",
    "@babel/preset-react": "^7.24.7",
    "@types/express": "^4.17.21",
    "@types/jest": "^29.5.12",
    "@types/node": "^20.14.10",
    "@types/react": "~18.2.45",
    "@types/react-test-renderer": "^18.0.7",
    "jest": "^29.2.1",
    "jest-expo": "~51.0.3",
    "metro-react-native-babel-preset": "^0.77.0",
    "react-test-renderer": "18.2.0",
    "typescript": "~5.3.3"
  },
  "private": true
}

这是我的 babel.config.js 文件：

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo', 'metro-react-native-babel-preset'],
  };
};

我尝试删除node_modules和package-lock.json并重新安装、重新安装依赖项、安装缺少的预设，但没有任何效果。请帮忙！

Answer 1

我相信你不需要 babel.config.js 文件中的

metro-react-native-babel-preset

。只需使用

babel-preset-expo

就可以正常运行，因为据我所知

expo

已经捆绑了相关的

react-native

工具。