@svgr/webpack integration crashes on render inside server component (undefined runtime error)

[mobeigi]

Link to the code that reproduces this issue

https://github.com/mobeigi/react-next-svgr-bug

To Reproduce

1. Clone linked repo
2. yarn install
3. yarn dev
4. Visit: http://localhost:3000/good
5. Refresh page (multiple times).
6. Visit: http://localhost:3000/bad
7. Refresh page (multiple times).

The repository provided is a barebones Next 15 + React 19 + Typescript + Yarn app created with create-next-app.
It also has SVGR intregration via @svfr/webpack following instructions from here: https://react-svgr.com/docs/next/

Current vs. Expected behavior

Behaviour

It is expected that both the good and bad pages from the reproduction repo will load fine without issue and refreshes should also load fine.

The good page (with only 1 distinct SVG) loads fine without issues.
However, the bad page (with 2+ distinct SVGs) only renders fine for initial load. A reload of the page triggers a crash and produces a (unhandled Runtime Error).

Exception

Example exception from Chrome:

TypeError: Cannot read properties of undefined (reading '$$typeof')
    at getOutlinedModel (react-server-dom-webpack-client.browser.development.js:1056:1)
    at parseModelString (react-server-dom-webpack-client.browser.development.js:1249:1)
    at Object.eval (react-server-dom-webpack-client.browser.development.js:1833:1)
    at JSON.parse (<anonymous>)
    at initializeModelChunk (react-server-dom-webpack-client.browser.development.js:881:1)
    at getOutlinedModel (react-server-dom-webpack-client.browser.development.js:1046:1)
    at parseModelString (react-server-dom-webpack-client.browser.development.js:1249:1)
    at Array.eval (react-server-dom-webpack-client.browser.development.js:1833:1)
    at JSON.parse (<anonymous>)
    at initializeModelChunk (react-server-dom-webpack-client.browser.development.js:881:1)
    at getOutlinedModel (react-server-dom-webpack-client.browser.development.js:1046:1)
    at parseModelString (react-server-dom-webpack-client.browser.development.js:1249:1)
    at Array.eval (react-server-dom-webpack-client.browser.development.js:1833:1)
    at JSON.parse (<anonymous>)
    at initializeModelChunk (react-server-dom-webpack-client.browser.development.js:881:1)
    at resolveModelChunk (react-server-dom-webpack-client.browser.development.js:858:1)
    at processFullBinaryRow (react-server-dom-webpack-client.browser.development.js:1823:1)
    at progress (react-server-dom-webpack-client.browser.development.js:1974:1)

The above error occurred in the <NotFoundErrorBoundary> component.

React will try to recreate this component tree from scratch using the error boundary you provided, ReactDevOverlay.

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
  Available memory (MB): 65459
  Available CPU cores: 24
Binaries:
  Node: 20.16.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 15.0.0-canary.93 // There is a newer canary version (15.0.0-canary.137) available, please upgrade!
  eslint-config-next: 15.0.0-canary.93
  react: 19.0.0-rc-e56f4ae3-20240830
  react-dom: 19.0.0-rc-e56f4ae3-20240830
  typescript: 5.5.4
Next.js Config:
  output: N/A
 ⚠ There is a newer canary version (15.0.0-canary.137) available, please upgrade! 
   Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
   Read more - https://nextjs.org/docs/messages/opening-an-issue

Which area(s) are affected? (Select all that apply)

Runtime

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

I have confirmed this issue is present is version 15.0.0-canary.93 and all following versions.
Version 15.0.0-canary.92 and earlier work without issues.
React was set to 19.0.0-rc-e56f4ae3-20240830 for all tests (however, I tested many React 19 RC versions from 4 months ago to date and it seemed to not affect the occurrence of the bug).

[mobeigi]

As a temporary workaround you can make the affected components client components using use client but this is obviously a bad workaround and not desirable.

I'm not quite sure if this is a Next / React bug, or @svgr/webpack due to breaking changes.

From https://github.com/vercel/next.js/releases/tag/v15.0.0-canary.93, the main relevant change is:
Update React from 6230622a1a-20240610 to 3208e73e-20240730

Which points to a possible React bug or incompatibility due to breaking changes.

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.