ssr: false: build script creates a server bundle and deletes it

[Hawmex]

I'm using React Router as a...

framework

Reproduction

Prior to v7, we used v6 and component routes. After upgrading to v7 as a framework and setting ssr: false, we faced some problems including:

• @mui/icons-material imports started to fail. So we added this to vite.config.ts:

  ...
  resolve: {
    alias: {
      '@mui/icons-material': '@mui/icons-material/esm'
    }
  }
  ...
  

• the build script started to fail. The client bundle would be created with no errors. However, the build script would try to create a server bundle and face import resolution errors with @mui/utils (this is used in @mui packages' internals).
  We currently have solved this issue by using the current vite.config.ts:

  ...
  ssr: {
    noExternal: command === 'build' ? true : [],
  }
  ...
  

  The interesting thing is that with the current setting, the server bundle will be created successfully and then it gets deleted. What is the reason to this?
• We also have problems using client side components in ErrorBoundary when facing 404 error. It complains about the unavailability of browser globals such as local storage. I had assumed that upgrading to v7 and using the SPA mode would be seamless. I have set SSR to false and yet I am facing problems here and there regarding SSR in the prod and dev environments.

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (6) x64 Intel(R) Core(TM) i5-8400 CPU @ 2.80GHz
    Memory: 5.96 GB / 15.78 GB
  Binaries:
    Node: 22.12.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.1 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.15.0 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Edge: Chromium (131.0.2903.86)
    Internet Explorer: 11.0.26100.1882
  npmPackages:
    @react-router/dev: ^7.0.2 => 7.0.2
    @react-router/fs-routes: ^7.0.2 => 7.0.2
    @react-router/node: ^7.0.2 => 7.0.2
    @react-router/serve: ^7.0.2 => 7.0.2
    react-router: ^7.0.2 => 7.0.2
    vite: ^5.4.11 => 5.4.11

Used Package Manager

pnpm

Expected Behavior

Having a complete client-side router that gives us the option of using file-based routing, in case ssr: false.

Actual Behavior

Server bundle generation during build, and import resolution errors that didn't exist with v6.

[pfe-nazaries]

Im facing something similar with rxjs and ant design where the SSR build (sometimes in dev mode too) cannot find some modules

[vite] Internal server error: Cannot find module '/Users/pfe/WebstormProjects/rtr-admin/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/rc-util/es/omit' imported from /Users/pfe/WebstormProjects/rtr-admin/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/antd/es/layout/layout.js
[VITE] Did you mean to import "rc-util/es/omit.js"?

And i not using ssr at all, just spa mode (ssr:false)

[nakah]

Same issue here but even worse. I changed the "buildDirectory" in react-router.config.js to be a parent folder (wwwroot). When building for production, SPA assets are generated under wwwroot/client. Then it starts the server build (event with ssr: false), but this time it ends in error :
[react-router] Cannot find package 'react' imported from wwwroot\server\index.mjs
at packageResolve (node:internal/modules/esm/resolve:854:9)
at moduleResolve (node:internal/modules/esm/resolve:927:18)
at defaultResolve (node:internal/modules/esm/resolve:1169:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:383:12)
at ModuleLoader.resolve (node:internal/modules/esm/loader:352:25)
at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:227:38)
at ModuleWrap. (node:internal/modules/esm/module_job:87:39)
at link (node:internal/modules/esm/module_job:86:36) {
code: 'PLUGIN_ERROR',
pluginCode: 'ERR_MODULE_NOT_FOUND',
plugin: 'react-router',
hook: 'writeBundle'

[TimurTimergalin]

I encountered the same issue when working with styled components. They require special configuration to work with SSR. Because react-router tries to create a server build even when ssr: false is present raises an error.

[jmho]

I encountered the same issue when working with styled components. They require special configuration to work with SSR. Because react-router tries to create a server build even when ssr: false is present raises an error.

Hey @TimurTimergalin I was able to get styled-components working with react-router-7 client rendering using the named styled component import (import { styled } from "styled-components"} instead of the traditional one (import styled from "styled-components"). Not sure why this is the case and I haven't tested thoroughly with other features of styled-components, but this was enough for me to get basic styling working :) (Repo example here if needed)

[TimurTimergalin]

Thank you, @jmho, I appreciate your effort. Seems odd indeed. I also asked about this on StackOverflow and the proposed solution worked for me - for anyone who comes across the same issue.

[brophdawg11]

We're working to improve the docs around the nuances here, but the important thing to note is that ssr:false disables runtime server rendering, but it still has to perform build-time server rendering in order to generate the index.html. This is done by passing a new Request() to your server handler at build time and saving the resulting HTML to disk.

This is why we still generate a server build, which is deleted upon successful index.html creation. It is also why you need to use SSR-safe libraries in your route modules. We may eventually try to make the SPA mode server build smarter and never even load routes below the root since they don't get rendered but the build is not doing any advanced logic around that currently.

I'm going to close this out since the original question is expected behavior and without a reproduction I don't think there's much more to do to triage. If there are specific libraries you are having trouble using in SPA mode, please open a new issue with a minimal reproduction (https://reactrouter.com/new) that we can look into.

[Monu18765]

Thanks for the update @brophdawg11
I am facing one issue related to ssr is that I can't use the loader function without enabling ssr even if my project is on pre-render + spa pattern. I can understand why it is but it would be nice if we could use loader for pre-rendering pages without enabling ssr because then in development we might see different behavior than production. It is a bit hassle to turn off and on ssr.

A parameter like onlyPrerenderSSR will be helpful. So far I love what I can achieve in terms of performance and SEO.

Love you all 💚💚💚.

[brophdawg11]

That was a bug and is fixed by #12948 - that will be release in a 7.2.0 release soon

[Monu18765]

Honestly, I am somewhat new to the full-stack framework. I have always worked with single-page applications using React and Vue. In fact, I almost considered deleting the comment because it seemed like an unreasonable request.

Thank you and team.