Expo router and webpack doesn't work. "Multiple files match theh route name". How to deploy expo-router web app?

Expo SDK
1

I’m trying to deploy a react native web app built with expo and expo-router to Vercel. Part of the process involves using Webpack to bundle the code. Up until now I’ve been developing using metro and its been working fine.

I am unable to get the project to build using webpack.

In the index.js file the docs for expo router say to have import "expo-router/entry"; at the top of the file.

If I do this I get the following error:

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() {

The troubleshooting page of the docs leads me to believe I should replace the contents of my index.js file with this:

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

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

registerRootComponent(App);

After doing this I get several errors for

Multiple files match the route name...

This can be reproduced with minimal setup:
example

Thank you

2

As of right now (March 2023) expo-router does not support bundling with webpack. This is what was causing the errors I was seeing.

So reverting back to the default of having metro as the bundler and a root level index.js consisting of just import "expo-router/entry";, to deploy this app what I did was:

  • run the vercel cli command in the root of the project to set up a new project
  • change the build command to npx expo export -p web
  • change the output dir to ./dist
2 Likes
3

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.