Prerender leads to Server build file not found in manifest

[WillSmithTE]

I'm using React Router as a...

framework

Reproduction

Use pre-rendering with this react-reacter-config:

{
    "ssr": true,
    "prerender": [
      "/blog/1628547526",
      "/blog/1667507119",
      "/blog/1714263603",
      "/blog/1715288039",
      "/blog/1715555712",
      "/blog/1716494080",
      "/blog/1717459808",
      "/blog/1717625585",
      "/blog/1720311647",
      "/blog/1728694664",
      "/blog/1738164926",
      "/blog/1740504399"
    ]
  }

The file:

import type { Config } from '@react-router/dev/config'
import { blogIds } from './app/blogs/blogIds'

export default {
	ssr: true,
	prerender: Object.keys(blogIds).map(it => `/blog/${it}`),
} satisfies Config

Then run npm run build.

package.json:

{
  "name": "blog",
  "private": true,
  "sideEffects": false,
  "type": "module",
  "scripts": {
    "build": "react-router build",
    "deploy": "npm run build && wrangler deploy",
    "dev": "concurrently \"partykit dev --define DEVMODE=true\" \"react-router dev\" --kill-others-on-fail",
    "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
    "start": "wrangler dev",
    "typecheck": "react-router typegen",
    "typegen": "wrangler types",
    "preview": "npm run build && wrangler dev",
    "cf-typegen": "wrangler types",
    "e2e": "NODE_OPTIONS='' npx playwright test"
  },
  "dependencies": {
    "@epic-web/client-hints": "^1.3.2",
    "@epic-web/invariant": "^1.0.0",
    "@hookform/resolvers": "^3.9.0",
    "@prisma/adapter-d1": "^5.16.1",
    "@prisma/client": "^5.16.1",
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-dialog": "^1.1.1",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-menubar": "^1.1.1",
    "@radix-ui/react-navigation-menu": "^1.2.0",
    "@radix-ui/react-progress": "^1.1.0",
    "@radix-ui/react-radio-group": "^1.1.3",
    "@radix-ui/react-select": "^2.0.0",
    "@radix-ui/react-separator": "^1.1.0",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-tabs": "^1.1.0",
    "@radix-ui/react-toast": "^1.2.1",
    "@radix-ui/react-tooltip": "^1.1.2",
    "@react-router/cloudflare": "^7.3.0",
    "@react-router/fs-routes": "^7.3.0",
    "@sentry/vite-plugin": "^2.20.1",
    "@tanstack/react-table": "^8.17.3",
    "@willsmithte/feedback-widget": "^0.0.3",
    "chart.js": "^4.4.2",
    "chartjs-plugin-annotation": "^3.0.1",
    "chartjs-plugin-zoom": "^2.0.1",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "framer-motion": "^11.3.17",
    "isbot": "^5.1.6",
    "localforage": "^1.10.0",
    "lucide-react": "^0.372.0",
    "miniflare": "^3.20240404.0",
    "moment": "^2.30.1",
    "partymix": "^0.0.16",
    "partysocket": "^1.0.1",
    "react": "^18.2.0",
    "react-chartjs-2": "^5.2.0",
    "react-dom": "^18.2.0",
    "react-google-charts": "^4.0.1",
    "react-hook-form": "^7.51.3",
    "react-router": "^7.3.0",
    "react-router-dom": "^7.3.0",
    "recharts": "^2.13.0",
    "remix-themes": "^1.3.1",
    "spin-delay": "^2.0.0",
    "statistics.js": "^1.0.0",
    "tailwind-merge": "^2.3.0",
    "tailwindcss-animate": "^1.0.7",
    "toucan-js": "^3.4.0",
    "vaul": "^0.9.1",
    "victory": "^37.0.2",
    "vite-plugin-commonjs": "^0.10.4",
    "zod": "^3.23.6"
  },
  "devDependencies": {
    "@anthropic-ai/sdk": "^0.24.3",
    "@cloudflare/workers-types": "^4.20240419.0",
    "@imgly/background-removal": "^1.5.3",
    "@imgly/background-removal-node": "^1.4.5",
    "@playwright/test": "^1.43.1",
    "@react-router/dev": "^7.0.0",
    "@squoosh/cli": "^0.7.3",
    "@squoosh/lib": "^0.5.3",
    "@types/react": "^18.2.20",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.7.4",
    "@typescript-eslint/parser": "^6.7.4",
    "autoprefixer": "^10.4.19",
    "concurrently": "^8.2.2",
    "eslint": "^8.38.0",
    "eslint-import-resolver-typescript": "^3.6.1",
    "eslint-plugin-import": "^2.28.1",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "install": "^0.13.0",
    "node-fetch": "^3.3.2",
    "npm": "^10.8.1",
    "partykit": "^0.0.108",
    "postcss": "^8.4.38",
    "prisma": "^5.16.1",
    "tailwindcss": "^3.4.3",
    "typescript": "^5.1.6",
    "vite": "^5.1.0",
    "vite-tsconfig-paths": "^4.2.1",
    "wrangler": "^3.48.0"
  },
  "engines": {
    "node": ">=18.0.0"
  }
}

vite.config.ts:

import { reactRouter } from '@react-router/dev/vite'
import { cloudflareDevProxy } from '@react-router/dev/vite/cloudflare'
import { defineConfig } from 'vite'
import commonjs from 'vite-plugin-commonjs'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig(({ isSsrBuild }) => {
	const env = process.env
	return {
		optimizeDeps: {
			include: ['@prisma/debug', '@prisma/client'],
		},
		build: {
			commonjsOptions: {
				transformMixedEsModules: true,
			},
			rollupOptions: isSsrBuild
				? {
						input: './workers/app.ts',
				  }
				: undefined,
		},
		ssr: {
			target: 'webworker',
			// noExternal: true,
			resolve: {
				conditions: ['workerd', 'browser'],
			},
			optimizeDeps: {
				include: ['react', 'react/jsx-runtime', 'react/jsx-dev-runtime', 'react-dom', 'react-dom/server', 'react-router'],
			},
		},
		plugins: [
			commonjs(),
			cloudflareDevProxy({}),
			reactRouter(),
			tsconfigPaths(),
			// sentryVitePlugin({
			//   org: env.SENTRY_ORG,
			//   project: env.SENTRY_PROJECT,
			//   authToken: env.SENTRY_AUTH_TOKEN,
			// }),
		],
	}
})

System Info

System:
    OS: macOS 14.5
    CPU: (11) arm64 Apple M3 Pro
    Memory: 107.06 MB / 18.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.9.2 - ~/projects/blog/node_modules/.bin/npm
    Watchman: 2023.12.04.00 - /usr/local/bin/watchman
  Browsers:
    Chrome: 134.0.6998.89
    Safari: 17.5
  npmPackages:
    @react-router/cloudflare: ^7.3.0 => 7.3.0 
    @react-router/dev: ^7.0.0 => 7.3.0 
    @react-router/fs-routes: ^7.3.0 => 7.3.0 
    react-router: ^7.3.0 => 7.3.0 
    vite: ^5.1.0 => 5.4.14

Used Package Manager

npm

Expected Behavior

A successful build

Actual Behavior

x Build failed in 565ms
[react-router] Server build file not found in manifest
    at invariant (/Users/willy/projects/blog/node_modules/@react-router/dev/dist/vite.js:85:11)
    at getServerBuildFile (/Users/willy/projects/blog/node_modules/@react-router/dev/dist/vite.js:2027:3)
    at Object.handler (/Users/willy/projects/blog/node_modules/@react-router/dev/dist/vite.js:2997:15)
    at async Promise.all (index 0)
    at PluginDriver.hookParallel (file:///Users/willy/projects/blog/node_modules/rollup/dist/es/shared/node-entry.js:21763:9)
    at file:///Users/willy/projects/blog/node_modules/rollup/dist/es/shared/node-entry.js:22812:13
    at catchUnfinishedHookActions (file:///Users/willy/projects/blog/node_modules/rollup/dist/es/shared/node-entry.js:22187:16)
    at Module.build (file:///Users/willy/projects/blog/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:65607:16)
    at buildEnvironment (/Users/willy/projects/blog/node_modules/@react-router/dev/dist/cli/index.js:1529:5)
    at async Promise.all (index 0) {
  code: 'PLUGIN_ERROR',
  plugin: 'react-router',
  hook: 'writeBundle'

Before that I get the usual build output all green

vite v5.4.14 building for production...
✓ 3225 modules transformed.
...
✓ built in 4.11s
...
vite v5.4.14 building SSR bundle for production...
✓ 213 modules transformed.
...

Then the error

[WillSmithTE]

• I confirmed all routes exist & return 200 (e.g. http://localhost:5173/blog/1628547526)
• Tried reverting to 7.2.0 because I saw the error message was introducted in 7.3.0 but get [react-router] Cannot read properties of undefined (reading 'file')

[WillSmithTE]

same error on 7.4.0

[dannylin108]

I have exactly the same error with this configuration:

react-router.confit.ts

import type { Config } from "@react-router/dev/config";

export default {
    ssr: true,
    appDirectory: "src/app",
    prerender: true
} satisfies Config;

vite.config.ts

import { reactRouter } from "@react-router/dev/vite";
import { defineConfig, type PluginOption } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import autoprefixer from "autoprefixer";
import pandacss from "@pandacss/dev/postcss";
import Icons from "unplugin-icons/vite";

export default defineConfig(({ isSsrBuild }) => ({
    build: {
      rollupOptions: isSsrBuild
        ? {
            input: "./src/app/server/index.ts",
          }
        : undefined,
    },
  
    css: {
        postcss: {
            plugins: [pandacss, autoprefixer],
        },
    },
    plugins: [
        Icons({
            compiler: 'jsx',
            jsx: 'react',
        }) as PluginOption,
        reactRouter(),
        tsconfigPaths(),
    ],
}));

It's based on custom-node-server example with customized expressjs.

Without pre-render everything's fine.

[BertrandFritsch]

I also have the same error when using the netlify plugin with prerender enabled.
The error does not happen without the plugin, or without the prerendering the pages.

Versions:

{
  "@netlify/vite-plugin-react-router": "^1.0.0",
  "@react-router/node": "^7.4.0",
  "@react-router/serve": "^7.4.0",
  "@react-router/dev": "^7.4.0",
}

react-router-config.ts

import { type Config } from '@react-router/dev/config'

export default {
  // Config options...
  basename: '/',
  // Server-side render by default, to enable SPA mode set this to `false`
  ssr: true,
  prerender: true,
} satisfies Config

vite.config.ts

import netlifyPlugin from '@netlify/vite-plugin-react-router'
import { reactRouter } from '@react-router/dev/vite'
import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  plugins: [tailwindcss(), reactRouter(), tsconfigPaths(), netlifyPlugin()],
})

react-router build:

> react-router build

vite v6.2.3 building for production...
✓ 531 modules transformed.
build/client/.vite/manifest.json                                5.58 kB │ gzip:  0.86 kB
build/client/assets/root-CO0B-86s.css                          35.83 kB │ gzip:  5.83 kB
build/client/assets/index-DCR6O3WE.js                           0.09 kB │ gzip:  0.10 kB
build/client/assets/siteMetadata-CjlJ6hha.js                    0.13 kB │ gzip:  0.13 kB
build/client/assets/Title-DNEFtvn5.js                           0.24 kB │ gzip:  0.21 kB
build/client/assets/with-props-DoPrsmqa.js                      0.35 kB │ gzip:  0.21 kB
build/client/assets/use-presence-w2VXTEtN.js                    0.63 kB │ gzip:  0.41 kB
build/client/assets/home-CuuPSs-C.js                            0.68 kB │ gzip:  0.44 kB
build/client/assets/presentation-BrCvOXFM.js                    0.88 kB │ gzip:  0.53 kB
build/client/assets/cv-CHKV0UJt.js                              1.04 kB │ gzip:  0.58 kB
build/client/assets/collage-BDndOeej.js                         1.97 kB │ gzip:  1.01 kB
build/client/assets/root-DxaexsNB.js                            2.25 kB │ gzip:  1.13 kB
build/client/assets/index-WENMx82f.js                           3.17 kB │ gzip:  1.54 kB
build/client/assets/index-oH7cf2FQ.js                           3.92 kB │ gzip:  1.54 kB
build/client/assets/collages-C4_OpgEq.js                        4.69 kB │ gzip:  1.61 kB
build/client/assets/rich-text-react-renderer.es5-Bm4UIgDo.js   15.38 kB │ gzip:  4.56 kB
build/client/assets/image-DEx6yZw8.js                          25.58 kB │ gzip:  8.60 kB
build/client/assets/layout-DtkKH7pe.js                         75.29 kB │ gzip: 24.21 kB
build/client/assets/chunk-GNGMS2XR-BsSqUIg9.js                111.55 kB │ gzip: 37.68 kB
build/client/assets/proxy-C2qlru2E.js                         113.96 kB │ gzip: 37.76 kB
build/client/assets/entry.client-DaGWsKpD.js                  176.15 kB │ gzip: 56.15 kB
✓ built in 3.76s
vite v6.2.3 building SSR bundle for production...
✓ 37 modules transformed.
build/server/.vite/manifest.json          0.20 kB
build/server/assets/server-CO0B-86s.css  35.83 kB
build/server/server.js                   60.68 kB
The following error is a bug in React Router; please open an issue! https://github.com/remix-run/react-router/issues/new/choose
✗ Build failed in 374ms
[react-router] Server build file not found in manifest
    at invariant (C:\...\node_modules\.pnpm\@react-router+dev@7.4.0_@react-router+serve@7.4.0_react-router@7.4.0_react-dom@19.0.0_react@1_rskhov63nw7u6rv34c2e6zqs4e\node_modules\@react-router\dev\dist\vite.js:85:11)
    at getServerBuildFile (C:\...\node_modules\.pnpm\@react-router+dev@7.4.0_@react-router+serve@7.4.0_react-router@7.4.0_react-dom@19.0.0_react@1_rskhov63nw7u6rv34c2e6zqs4e\node_modules\@react-router\dev\dist\vite.js:2042:3)
    at Object.handler (C:\...\node_modules\.pnpm\@react-router+dev@7.4.0_@react-router+serve@7.4.0_react-router@7.4.0_react-dom@19.0.0_react@1_rskhov63nw7u6rv34c2e6zqs4e\node_modules\@react-router\dev\dist\vite.js:3055:15)
    at async Promise.all (index 0)
    at PluginDriver.hookParallel (file:///C:/.../node_modules/.pnpm/rollup@4.37.0/node_modules/rollup/dist/es/shared/node-entry.js:21906:9)
    at file:///C:/.../node_modules/.pnpm/rollup@4.37.0/node_modules/rollup/dist/es/shared/node-entry.js:22972:13
    at catchUnfinishedHookActions (file:///C:/.../node_modules/.pnpm/rollup@4.37.0/node_modules/rollup/dist/es/shared/node-entry.js:22330:16)
    at buildEnvironment (file:///C:/.../node_modules/.pnpm/vite@6.2.3_@types+node@22.13.13_jiti@2.4.2_lightningcss@1.29.2_yaml@2.7.0/node_modules/vite/dist/node/chunks/dep-DDxXL6bt.js:51479:16)
    at buildEnvironment (C:\...\node_modules\.pnpm\@react-router+dev@7.4.0_@react-router+serve@7.4.0_react-router@7.4.0_react-dom@19.0.0_react@1_rskhov63nw7u6rv34c2e6zqs4e\node_modules\@react-router\dev\dist\cli\index.js:1522:5)
    at async Promise.all (index 0) {
  code: 'PLUGIN_ERROR',
  plugin: 'react-router',
  hook: 'writeBundle'
}

[Varkoff]

I have exactly the same error in v7.4.0, using React.lazy.

When commenting this code :

// const StripePaymentWrapperLazy = lazy(() =>
//   import("components/UI/PaymentForm").then((module) => ({
//     default: module.StripePaymentWrapper,
//   }))

it pre-renders successfully. But then I get Stripe's 600 kb of JS in the whole app, instead of having it only in the checkout page.

I have encountered other errors preventing me to staticly pre-render my pages, though.

Like tsconfig paths not being detected, environment variables not being detected, among other issues.

[brophdawg11]

Can someone provide a working reproduction of this issue?

[WillSmithTE]

I've stripped down the repo: https://github.com/WillSmithTE/prerender-issue

npm install && npm run build gets this still for me

The following error is a bug in React Router; please open an issue! https://github.com/remix-run/react-router/issues/new/choose
x Build failed in 49ms
[react-router] Server build file not found in manifest
    at invariant (/Users/willy/projects/v2prerender/node_modules/@react-router/dev/dist/vite.js:85:11)
    at getServerBuildFile (/Users/willy/projects/v2prerender/node_modules/@react-router/dev/dist/vite.js:2027:3)
    at Object.handler (/Users/willy/projects/v2prerender/node_modules/@react-router/dev/dist/vite.js:2997:15)
    at async Promise.all (index 0)
    at PluginDriver.hookParallel (file:///Users/willy/projects/v2prerender/node_modules/rollup/dist/es/shared/node-entry.js:21763:9)
    at file:///Users/willy/projects/v2prerender/node_modules/rollup/dist/es/shared/node-entry.js:22812:13
    at catchUnfinishedHookActions (file:///Users/willy/projects/v2prerender/node_modules/rollup/dist/es/shared/node-entry.js:22187:16)
    at Module.build (file:///Users/willy/projects/v2prerender/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:65607:16)
    at buildEnvironment (/Users/willy/projects/v2prerender/node_modules/@react-router/dev/dist/cli/index.js:1529:5)
    at async Promise.all (index 0) {
  code: 'PLUGIN_ERROR',
  plugin: 'react-router',
  hook: 'writeBundle'

[brophdawg11]

I think this is a small gap in the prerender feature when using a custom server. Our initial implementation was for fairly simple happy-path use cases, but when using a custom server there's a few gaps since we don't take the custom server into account and only load the React Router handler from the server build. We'll think a bit more about how best to handle that but for now you can work around this via:

First, you need to add the virtual module to your entry point in the vite config:

export default defineConfig(({ isSsrBuild }) => {
return {
  ...
  build: {
    rollupOptions: isSsrBuild
      ? {
	   input: ['virtual:react-router/server-build', './workers/app.ts'],
      }: undefined,
    ...
}

Second, you have two choices to make prerendering in node work correctly:

Option 1 - Bundle your server deps to avoid issues with importing react

• ssr.noExternal = true

OR

Option 2 - You could add node to the conditions because the prerendering happens in a node process:

• ssr.resolve.conditions: ['workerd', 'browser', 'node']

This second option also requires that you remove any custom entry.server.tsx or change it to use renderToPipeableStream so it works in node and that you enable node_compat in your wrangler.toml.