Skip to content

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

Closed
@mobeigi

Description

@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).

Metadata

Metadata

Assignees

Labels

RuntimeRelated to Node.js or Edge Runtime with Next.js.UpstreamRelated to using Next.js with a third-party dependency. (e.g., React, UI/icon libraries, etc.).bugIssue was opened via the bug report template.locked

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions