Dev mode not working (for SPA) with base/basename set to "/app/"

[brophdawg11]

Discussed in #9375

^{Originally posted by dimw May 4, 2024}
I'm trying to run an SPA with the base set to /app/. Therefore, I'm following the Remix' SPA Mode doc as well as the Deploying Remix to GitHub Pages tutorial from @brookslybrand.

The steps are:

1. Bootstrapping a project from a template:

   npx create-remix@latest --template remix-run/remix/templates/spa spa-test

2. Changing the base and basename to /app/ (to make accessible the SPA from http://example.com/app/):

   // vite.config.ts
   export default defineConfig({
     base: "/app/",   // <-- This line is new
     plugins: [
       remix({
         ssr: false,
         basename: "/app/",  // <-- This line is new
       }),
       tsconfigPaths(),
     ],
   });

When I now build (npm run build) and execute the preview (npm run preview), the page is working as expected under http://localhost:4173/app/.

Issue

However, when running in the dev mode (npm run dev) and opening the provided URL (http://localhost:5173/app/), the dev server retrieves an internal server error while I'm seeing the following error messages on the console.

[vite] Pre-transform error: Failed to load url /root.tsx (resolved id: /root.tsx) in virtual:remix/server-build. Does the file exist?
[vite] Pre-transform error: Failed to load url /routes/foo.tsx (resolved id: /routes/foo.tsx) in virtual:remix/server-build. Does the file exist?
[vite] Pre-transform error: Failed to load url /routes/_index.tsx (resolved id: /routes/_index.tsx) in virtual:remix/server-build. Does the file exist?
[vite] Error when evaluating SSR module virtual:remix/server-build: failed to import "/root.tsx"
|- Error: Failed to load url /root.tsx (resolved id: /root.tsx) in virtual:remix/server-build. Does the file exist?
    at loadAndTransform (file:///<redacted>/spa-test/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:53884:21)
    at async instantiateModule (file:///<redacted>/spa-test/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:54954:10)

[vite] Internal server error: Failed to load url /root.tsx (resolved id: /root.tsx) in virtual:remix/server-build. Does the file exist?

The same error is happening with dev when a regular Remix app (with SSR enabled) is used.

I tried to remove the Vite base option but this leads to assets being loaded from the root instead of /app/. This would require more effort in server config when bringing the app to a server and I would like to avoid that.

Workaround

For now, I ended up having two Vite configurations:

• Default (dev) config (vite.config.ts) with no base set
• Build config (_vite.config.build.ts) which is extending the default config and setting the base on top:

  // vite.config.build.ts
  export default mergeConfig(defaultConfig, {
    base: "/app/",
  });

  Which is then executed from package.json as following:

  {
    "scripts": {
      "build": "remix vite:build --config ./vite.config.build.ts",
      // ...
    }
  }

Does anyone have a hint what I'm missing here in the Vite config or is that a bug?

Versions

• @remix-run/dev: 2.9.1
• vite: 5.1.0

Related to

• feat(remix-dev/vite, remix-react, remix-server-runtime): support custom basename #8145