Skip to content

HMR crashes with "Cannot access 'routes' before initialization" when editing large .mdx files using virtual:react-router/server-buildΒ #13531

Open
@nikolailehbrink

Description

@nikolailehbrink

I'm using React Router as a...

framework

Reproduction

https://stackblitz.com/edit/github-pvha4jzr?file=app%2Froutes%2Fblog%2Fshort-article-without-error.mdx

  1. Start the dev server.
  2. Navigate to /blog/long-article or click on the Long Article with HMR error link on the homepage
  3. Add content to long-article-with-error.mdx route file (e.g., repeated paragraphs).
  4. Save the file.
  5. Observe crash:
    ReferenceError: Cannot access 'routes' before initialization
    

Important

The crash sometimes does not occur after every save

This only happens when the MDX file exceeds a certain content length. Smaller files do not trigger this issue. To test this, you can do the same thing with /blog/short-article

Note

The getPosts function used in the loader of layout.tsx is not causing the error as I initially suspected, even though it imports virtual:react-router/server-build. This part can be removed from the repro, but I included it to show how it's set up in a real-world scenario.

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (16) x64 AMD Ryzen 7 5800X 8-Core Processor
    Memory: 50.57 GB / 63.93 GB
  Binaries:
    Node: 22.14.0 - C:\nvm4w\nodejs\node.EXE
    npm: 10.9.2 - C:\nvm4w\nodejs\npm.CMD
    pnpm: 9.5.0 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Edge: Chromium (133.0.3065.59)
    Internet Explorer: 11.0.26100.1882
  npmPackages:
    @react-router/dev: ^7.5.3 => 7.5.3
    @react-router/node: ^7.5.3 => 7.5.3
    @react-router/serve: ^7.5.3 => 7.5.3
    react-router: ^7.5.3 => 7.5.3
    vite: ^6.3.3 => 6.3.4

Used Package Manager

pnpm

Expected Behavior

Hot Module Reloading should:

  • Reload the changed .mdx file.
  • Update the browser without full reload or crashing.
  • Not throw any errors from virtual:react-router/server-build.

Actual Behavior

When the .mdx file exceeds a certain size:

  • The app crashes after saving the file, disabling HMR.

  • Console error shows:

    ReferenceError: Cannot access 'routes' before initialization
    
  • Stack trace indicates virtual:react-router/server-build is being accessed too early during HMR cycle.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions