Repository navigation
@svgr/webpack integration crashes on render inside server component (undefined runtime error) #69545
Description
Link to the code that reproduces this issue
https://github.com/mobeigi/react-next-svgr-bug
To Reproduce
- Clone linked repo
yarn installyarn 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-issueWhich 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).
Activity
[-]@svgr/webpack integration crashes on render inside server component (undefined error)[/-][+]@svgr/webpack integration crashes on render inside server component (undefined runtime error)[/+]mobeigi commentedon Sep 1, 2024
As a temporary workaround you can make the affected components client components using
use clientbut this is obviously a bad workaround and not desirable.I'm not quite sure if this is a Next / React bug, or
@svgr/webpackdue 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-20240730Which points to a possible React bug or incompatibility due to breaking changes.
fix: weird random error about $$typeof
[IVD-28] Notifications (#71)
Add a unit test for deduped owner objects
Add a unit test for deduped owner objects
Resolve references to deduped owner objects (#30549)
github-actions commentedon Oct 10, 2024
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.