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

oxf4rvwz  于 2023-03-29  发布在  React
关注(0)|答案(1)|浏览(193)

我正在尝试部署一个react native web应用程序,该应用程序是用expo和expo-router构建到Vercel的。这个过程的一部分涉及到使用Webpack捆绑代码。到目前为止,我一直在使用metro进行开发,它一直工作得很好。
我无法使用webpack构建项目。我认为问题在于我的根级别index.js文件和路由器的Groups功能。
expo路由器的文档说在文件的顶部有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() {

文档的troubleshooting page让我相信我应该用下面的内容替换我的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...

This happens even with the most basic of setups.
谢谢你

eqfvzcg8

eqfvzcg81#

截至目前(2023年3月),expo-router不支持与webpack捆绑。这就是导致我看到的错误的原因。
因此,恢复到默认的metro作为bundler和一个只包含import "expo-router/entry";的根级别index.js,为了部署这个应用程序,我所做的是:

  • 在项目的根目录中运行vercel cli命令以设置新项目
  • build command更改为npx expo export -p web
  • 将输出目录更改为./dist
  • 将vercel.json移动到项目的根目录。它应该看起来像这样:

{“routes”:[ {“handle”:“filesystem”},{“src”:“/(.*)",“dest”:“/index.html”} ] }

相关问题