React Native项目启动报错：Dev Server配置选项不符合API schema

问题重现 #

执行以下命令创建并配置Expo项目：

npx create-expo-app rate-repository-app --template expo-template-blank@sdk-46

npx expo install react-native-web@~0.18.7 react-dom@18.2.0 @expo/webpack-config@^0.17.0

启动项目时出现错误：

ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'mimeTypes'. These properties are valid:
   object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }

解决方案 #

这个错误源于@expo/webpack-config@^0.17.0与webpack-dev-server新版本不兼容，mimeTypes配置项已被移除，可通过以下步骤修复：

• 降级@expo/webpack-config版本
  卸载当前版本，安装适配Expo SDK 46的指定版本：

  npm uninstall @expo/webpack-config
  npm install @expo/webpack-config@0.16.26 --save-dev
  

  该版本为SDK 46官方推荐的兼容版本，可规避webpack-dev-server的配置冲突。

• 锁定依赖版本并重新安装
  打开package.json，确保相关依赖版本匹配：

  {
    "dependencies": {
      "react-native-web": "~0.18.7",
      "react-dom": "18.2.0"
    },
    "devDependencies": {
      "@expo/webpack-config": "0.16.26"
    }
  }
  

  执行npm install重新同步依赖。

• 清除缓存后重启项目
  执行命令清除Expo和npm缓存：

  npx expo start --clear
  npm cache clean --force
  

  之后重新启动项目即可正常运行。

内容的提问来源于stack exchange，提问作者Julius Goddard