Description
Link to the code that reproduces this issue
https://github.com/mobeigi/react-next-svgr-bug
To Reproduce
- Clone linked repo
yarn install
yarn dev
- Visit: http://localhost:3000/good
- Refresh page (multiple times).
- Visit: http://localhost:3000/bad
- 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).