Expo-router 出现 webpack 错误“多个文件与路由名称匹配”。无法捆绑或部署应用程序

Question

我正在尝试将使用 expo 和 expo-router 构建的 React Native Web 应用程序部署到 Vercel。该过程的一部分涉及使用 Webpack 捆绑代码。到目前为止，我一直在使用 Metro 进行开发，并且运行良好。

我无法使用 webpack 构建项目。我认为问题在于我的根级别 index.js 文件和路由器的组功能。

世博路由器的文档说位于 import "expo-router/entry"; 文件的顶部。

如果我这样做，我会收到以下错误：

Module not found: Can't resolve '..\..\app'
  10 |   typeof window === "undefined" ? React.Fragment : Head.Provider;
  11 |
> 12 | const ctx = require.context(process.env.EXPO_ROUTER_APP_ROOT);
     |            ^
  13 |
  14 | // Must be exported or Fast Refresh won't update the context
  15 | export function App() {

文档的故障排除页面让我相信我应该将 index.js 文件的内容替换为：

import { registerRootComponent } from "expo";
import { ExpoRoot } from "expo-router";

export function App() {
  const ctx = require.context("./app");
  return <ExpoRoot context={ctx} />;
}

registerRootComponent(App);

执行此操作后，我收到几个错误

Multiple files match the route name...

即使使用最基本的设置也会发生这种情况。

谢谢

Answer 1

截至目前（2023 年 3 月），expo-router 不支持与 webpack 捆绑。这就是导致我看到的错误的原因。

因此，恢复为默认情况，将 Metro 作为捆绑器，根级别 index.js 仅由 组成import "expo-router/entry";，部署此应用程序时我所做的是：

• vercel在项目根目录中运行cli 命令来设置一个新项目

• 更改build command为npx expo export -p web

• 将输出目录更改为./dist

• 将 vercel.json 移动到项目的根目录。它应该看起来像这样：

  { "routes": [ { "handle": "文件系统" }, { "src": "/(.*)", "dest": "/index.html" } ] }