window is not defined with SSR to false

[merojosa]

I'm using React Router as a...

framework

Reproduction

https://codesandbox.io/p/devbox/intelligent-worker-v84j77

System Info

(I think it applies to every single environment)
  System:
    OS: macOS 15.3.2
    CPU: (10) arm64 Apple M1 Pro
    Memory: 1.61 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.12.0 - ~/Library/Caches/fnm_multishells/26866_1741979904189/bin/node
    Yarn: 1.22.22 - ~/Library/Caches/fnm_multishells/26866_1741979904189/bin/yarn
    npm: 10.9.0 - ~/Library/Caches/fnm_multishells/26866_1741979904189/bin/npm
    pnpm: 10.6.1 - ~/Library/Caches/fnm_multishells/26866_1741979904189/bin/pnpm
  Browsers:
    Chrome: 134.0.6998.89
    Edge: 134.0.3124.62
    Safari: 18.3.1
  npmPackages:
    @react-router/dev: 7.3.0 => 7.3.0 
    @react-router/fs-routes: 7.3.0 => 7.3.0 
    @react-router/node: 7.3.0 => 7.3.0 
    @react-router/remix-routes-option-adapter: 7.3.0 => 7.3.0 
    @react-router/serve: 7.3.0 => 7.3.0 
    react-router: 7.3.0 => 7.3.0 
    vite: 5.4.14 => 5.4.14

Used Package Manager

yarn

Expected Behavior

In SPA mode, we should be able to use browser-only APIs no matter where the file comes from.

Actual Behavior

I'm migrating a legacy project to react-router 7. My project has multiple global contexts with multple helpers. Some of those contexts use browser-only APIs such as window. So, when I start the application and a context is using some of those browser APIs, it throws errors such as window is not defined.

While I was making the reproduction, I realized that, if I use the browser APIs inside of the context, everything works as expected. On the other hand, if they are outside the context (same file) or in a different file as a helper, it does not work.

A couple things I'm aware of:

1. This discussion ssr flag is ignored in react-router v7 #12360 and that @brophdawg11 said this was fixed. However, I'm using 7.3.0 and the error still happens.
2. .client modules: I checked with some of the contexts I'm having issues, and if I rename the helpers to .client.ts, it works. However, renaming every single helper to .client while I'm in SPA mode seems counterintuitive in my opinion. Correct me If I'm wrong, but do you expect us to rename every single file that uses browser-only APIs to .client?

I'm not sure if this is a bug or a feature request. As a new react-router user, this seems to be a bug.

Thanks for this awesome project and hopefully I won't contribute to unnecessary noise.

[kevinbailey25]

Take a look at the docs here: https://reactrouter.com/how-to/spa

They talk more about how using react router in framework mode as a SPA works and things you'll need to do if you have code that isn't server render safe.

[timdorr]

Correct, this is already mentioned as a limitation of SPA mode because we need to render the index.html file during the build process. You can split things with client modules, as you mentioned.