TanStack / TanStack/router

ssr build failing when using vite-plugin-node-polyfills

Open
#6,922 3 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
15.1k
Forks
1.9k
Avg merge
1d 20h
Merged PRs (30d)
143

Description

Which project does this relate to?

Start

Describe the bug

I have a small project would like to migrate to tanstack start.

Currently have some issues that during when using vite-plugin-node-polyfills it will failed the ssr build.

import { defineConfig } from 'vite'
import { devtools } from '@tanstack/devtools-vite'
import tsconfigPaths from 'vite-tsconfig-paths'

import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { nodePolyfills } from "vite-plugin-node-polyfills"

import viteReact from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
import { nitro } from 'nitro/vite'

const config = defineConfig(({ isSsrBuild }) => {

  console.log({ isSsrBuild })
  return {
    plugins: [
      devtools(),
      nodePolyfills(),
      nitro({ rollupConfig: { external: [/^@sentry\//] } }),
      tsconfigPaths({ projects: ['./tsconfig.json'] }),
      tailwindcss(),
      tanstackStart(),
      viteReact(),
    ],
  }
})

export default config

> tanstack-ssr-test@ build /xxx/Sources/tanstack-ssr-test
> vite build

{ isSsrBuild: false }
vite v7.3.1 building client environment for production...
transforming (67) node_modules/.pnpm/@tanstack+react-router@1.166.7_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/@tanstack/react-router/dist/esm/utils.js
[@tanstack/devtools-vite] Removed devtools code from: /src/routes/__root.tsx

✓ 2286 modules transformed.
.output/public/assets/styles-BEQyFsJk.css             56.35 kB │ gzip:  10.51 kB
.output/public/assets/strapi._articleId-CN6mysxj.js    0.69 kB │ gzip:   0.41 kB
.output/public/assets/about-BbT8b7rL.js                0.69 kB │ gzip:   0.42 kB
.output/public/assets/strapi-image-BLDBQWXh.js         0.72 kB │ gzip:   0.44 kB
.output/public/assets/posthog-vLEN5sE3.js              1.89 kB │ gzip:   0.84 kB
.output/public/assets/index-CYJtjxX1.js                3.20 kB │ gzip:   1.34 kB
.output/public/assets/tanstack-query-bHbdHAP4.js       9.68 kB │ gzip:   3.66 kB
.output/public/assets/strapi-BgylA342.js              11.59 kB │ gzip:   3.98 kB
.output/public/assets/strapi._articleId-DxRpRXfI.js  163.33 kB │ gzip:  49.46 kB
.output/public/assets/main-BVHxiZ7x.js               611.95 kB │ gzip: 193.07 kB

(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
✓ built in 2.09s
vite v7.3.1 building ssr environment for production...
✓ 49 modules transformed.
✗ Build failed in 97ms
error during build:
[vite:load-fallback] Could not load /xxx/Sources/tanstack-ssr-test/node_modules/.pnpm/stream-browserify@3.0.0/node_modules/stream-browserify/web (imported by node_modules/.pnpm/@tanstack+router-core@1.166.7/node_modules/@tanstack/router-core/dist/esm/ssr/transformStreamWithRouter.js): ENOENT: no such file or directory, open '/xxx/Sources/tanstack-ssr-test/node_modules/.pnpm/stream-browserify@3.0.0/node_modules/stream-browserify/web'
    at async open (node:internal/fs/promises:642:25)
    at async Object.readFile (node:internal/fs/promises:1279:14)
    at async Object.handler (file:///xxx/Sources/tanstack-ssr-test/node_modules/.pnpm/vite@7.3.1_@types+node@22.19.15_jiti@2.6.1_lightningcss@1.31.1_tsx@4.21.0/node_modules/vite/dist/node/chunks/config.js:33169:21)
    at async PluginDriver.hookFirstAndGetPlugin (file:///xxx/Sources/tanstack-ssr-test/node_modules/.pnpm/rollup@4.59.0/node_modules/rollup/dist/es/shared/node-entry.js:22453:28)
    at async file:///xxx/Sources/tanstack-ssr-test/node_modules/.pnpm/rollup@4.59.0/node_modules/rollup/dist/es/shared/node-entry.js:21445:33
    at async Queue.work (file:///xxx/Sources/tanstack-ssr-test/node_modules/.pnpm/rollup@4.59.0/node_modules/rollup/dist/es/shared/node-entry.js:22681:32)
 ELIFECYCLE  Command failed with exit code 1.
Your Example Website or App

https://github.com/SecretBase/tanstack-start-ssr-test

Steps to Reproduce the Bug or Issue
  1. git clone the repo
  2. pnpm install
  3. pnpm build
Expected behavior

I am kind of getting stuck here.

I try to detect the correct build is it ssr by using the vite config but seem the tanstack start build the app and init config at the start.

anyway I can selective include plugin based on the current build env ?

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Vite configuration shown in the issue and reproduce the failure by cloning the example repository, running pnpm install, and then pnpm build. Inspect the SSR build path and the load-fallback error involving stream-browserify/web and transformStreamWithRouter.js. Done means the example's SSR build completes when vite-plugin-node-polyfills is enabled.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript, vite
Domain
build-system, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.