Closed mobeigi closed 1 month ago
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.
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.
Link to the code that reproduces this issue
https://github.com/mobeigi/react-next-svgr-bug
To Reproduce
yarn install
yarn dev
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:
Provide environment information
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. Version15.0.0-canary.92
and earlier work without issues. React was set to19.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).