Web workers fail at creation time if they include react components

[cramt]

I'm using React Router as a...

framework

Reproduction

i've made a minimal github repo for easy reproduction https://github.com/cramt/react-router-worker-bug-repro, clicking the button mounts the worker and sends a postmessage to it which fails

System Info

System:
    OS: Linux 6.13 cpe:/o:nixos:nixos:25.05 25.05 (Warbler)
    CPU: (12) x64 13th Gen Intel(R) Core(TM) i7-1355U
    Memory: 23.57 GB / 31.03 GB
    Container: Yes
    Shell: 5.9 - /run/current-system/sw/bin/zsh
  Binaries:
    Node: 23.6.1 - ~/.nix-profile/bin/node
    Yarn: 1.22.22 - ~/.nix-profile/bin/yarn
    npm: 10.9.2 - ~/.nix-profile/bin/npm
    pnpm: 10.4.1 - ~/.nix-profile/bin/pnpm
  npmPackages:
    @react-router/dev: ^7.2.0 => 7.2.0 
    @react-router/node: ^7.2.0 => 7.2.0 
    @react-router/serve: ^7.2.0 => 7.2.0 
    react-router: ^7.2.0 => 7.2.0 
    vite: ^5.4.11 => 5.4.14

Used Package Manager

npm

Expected Behavior

The worker gets mounted successfully without error

Actual Behavior

the hmr-runtime fails with ReferenceError: window is not defined

[timdorr]

This is because Vite is detecting the use of JSX and injecting the HMR code to support hot reload, which is built to assume there is a DOM.

The easiest fix for this is to remove any JSX and rename the files to just plain .ts files. We can likely guard our module-reloading code to prevent uses of window when it is not available, similar to the embedded React HMR plugin:

react-router/packages/react-router-dev/vite/plugin.ts

Line 2066 in 5aab2a6

const inWebWorker = typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope;