ReferenceError: __reactRouterDataRouter is not defined after adding entry.server.tsx #13031
Description
I'm using React Router as a...
framework
Reproduction
$ git clone https://github.com/orzechowskid/rr-entry-server$ cd rr-entry-server$ npm install$ npm run dev- navigate to localhost:5173
- edit app/welcome/welcome.tsx and add or modify a style rule in the CSS-in-JS block
System Info
System:
OS: Linux 6.8 Ubuntu 24.04.2 LTS 24.04.2 LTS (Noble Numbat)
CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
Memory: 25.77 GB / 31.06 GB
Container: Yes
Shell: 5.2.21 - /bin/bash
Binaries:
Node: 22.14.0 - ~/.nvm/versions/node/v22.14.0/bin/node
Yarn: 1.22.22 - ~/.nvm/versions/node/v22.14.0/bin/yarn
npm: 11.1.0 - ~/.nvm/versions/node/v22.14.0/bin/npm
pnpm: 10.4.0 - ~/.nvm/versions/node/v22.14.0/bin/pnpm
Browsers:
Chromium: 132.0.6834.83
npmPackages:
@react-router/dev: ^7.1.5 => 7.1.5
@react-router/node: ^7.1.5 => 7.1.5
@react-router/serve: ^7.1.5 => 7.1.5
react-router: ^7.1.5 => 7.1.5
vite: ^5.4.11 => 5.4.14Used Package Manager
npm
Expected Behavior
classnames and style tags should be collected on the server and present at first render in the browser to prevent FOUC.
modifying a source file should result in updates made to the DOM in the browser with no errors.
Actual Behavior
with an entry.server.tsx file in my app/ dir, classnames and style tags are collected on the server and are present at first render in the browser 👍 . editing a source file results in the following error being thrown in my browser console:
Uncaught (in promise) ReferenceError: __reactRouterDataRouter is not defined at hmr-runtime:726:5
(anonymous) @ hmr-runtime:726
setTimeout
(anonymous) @ hmr-runtime:668
validateRefreshBoundaryAndEnqueueUpdate @ hmr-runtime:790
(anonymous) @ welcome.tsx?t=1739656398739:30
(anonymous) @ client:34
(anonymous) @ client:218
(anonymous) @ client:193
queueUpdate @ client:193
await in queueUpdate
(anonymous) @ client:642
handleMessage @ client:640
(anonymous) @ client:550
without an entry.server.tsx file, classnames and style tags do not get collected on the server, but do get applied on the client after a FOUC 👎 . editing a source file results in the expected changes being applied to the DOM 👍 .