Importing svg's using svgr/webpack no longer works in the latest canary release when using ppr (error: Cannot read properties of undefined (reading 'stack')) #66137
Labels
bug
Issue was opened via the bug report template.
locked
Partial Prerendering (PPR)
Related to Partial Prerendering.
Webpack
Related to Webpack with Next.js.
Comments
|
Found that you could set |
|
This was introduced in release https://github.com/vercel/next.js/releases/tag/v14.3.0-canary.77. Not sure which PR that is the culprit though. |
|
Try this with the latest canary release, we've made some PPR updates since then and it may have been resolved. |
|
@wyattjoh, in the latest version ( |
|
This is what the complete exception looks like: It's this line that's causing it because of the explicit |
kevva
referenced
this issue
in facebook/react
Jun 19, 2024
…ks (#29632) We have three kinds of stacks that we send in the RSC protocol: - The stack trace where a replayed `console.log` was called on the server. - The JSX callsite that created a Server Component which then later called another component. - The JSX callsite that created a Host or Client Component. These stack frames disappear in native stacks on the client since they're executed on the server. This evals a fake file which only has one call in it on the same line/column as the server. Then we call through these fake modules to "replay" the callstack. We then replay the `console.log` within this stack, or call `console.createTask` in this stack to recreate the stack. The main concern with this approach is the performance. It adds significant cost to create all these eval:ed functions but it should eventually balance out. This doesn't yet apply source maps to these. With source maps it'll be able to show the server source code when clicking the links. I don't love how these appear. - Because we haven't yet initialized the client module we don't have the name of the client component we're about to render yet which leads to the `<...>` task name. - The `(async)` suffix Chrome adds is still a problem. - The VMxxxx prefix is used to disambiguate which is noisy. Might be helped by source maps. - The continuation of the async stacks end up rooted somewhere in the bootstrapping of the app. This might be ok when the bootstrapping ends up ignore listed but it's kind of a problem that you can't clear the async stack. <img width="927" alt="Screenshot 2024-05-28 at 11 58 56 PM" src="https://github.com/facebook/react/assets/63648/1c9d32ce-e671-47c8-9d18-9fab3bffabd0"> <img width="431" alt="Screenshot 2024-05-28 at 11 58 07 PM" src="https://github.com/facebook/react/assets/63648/52f57518-bbed-400e-952d-6650835ac6b6"> <img width="327" alt="Screenshot 2024-05-28 at 11 58 31 PM" src="https://github.com/facebook/react/assets/63648/d311a639-79a1-457f-9a46-4f3298d07e65"> <img width="817" alt="Screenshot 2024-05-28 at 11 59 12 PM" src="https://github.com/facebook/react/assets/63648/3aefd356-acf4-4daa-bdbf-b8c8345f6d4b">
unstubbable
added a commit
to unstubbable/next.js
that referenced
this issue
Jun 21, 2024
When using a custom webpack loader like `@svgr/webpack` to transform svg files into React components, we need to make sure that these components use the bundled React instance so that owner stacks are properly defined. Otherwise, the React Flight Client would fail in `buildFakeCallStack` with `[TypeError]: Cannot read properties of undefined (reading 'split')`. https://github.com/facebook/react/blob/57279287711cab628916ea7242055f89190aa47e/packages/react-client/src/ReactFlightClient.js#L1932 fixes vercel#66137
unstubbable
added a commit
to unstubbable/next.js
that referenced
this issue
Jun 22, 2024
When using a custom webpack loader like `@svgr/webpack` to transform svg files into React components, we need to make sure that these components use the bundled React so that owner stacks are properly defined. Otherwise, the React Flight Client would fail in `buildFakeCallStack` with `[TypeError]: Cannot read properties of undefined (reading 'split')`. https://github.com/facebook/react/blob/57279287711cab628916ea7242055f89190aa47e/packages/react-client/src/ReactFlightClient.js#L1932 fixes vercel#66137
|
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. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Link to the code that reproduces this issue
https://github.com/sceppi/svgbug
To Reproduce
See example github code to reproduce.
TypeError: Cannot read properties of undefined (reading 'stack')
at stringify ()
at AsyncLocalStorage.run (node:async_hooks:346:14)
digest: "2015626987"
Setting ppr to false resolves the error, so it is related to ppr
The issue only occurs when importing an svg. Just placing an svg directly in the code works fine
Current vs. Expected behavior
Importing an svg like this worked find in next 14.3.0-canary.70 (with ppr enabled) but no longer works in next 14.3.0-canary.79
Provide environment information
Which area(s) are affected? (Select all that apply)
Not sure, Webpack
Which stage(s) are affected? (Select all that apply)
next dev (local)
Additional context
Issue only occurs in development mode. It does not occur in Next 14.3.0-canary.70 but it occurs in 14.3.0-canary.79 (maybe also some earlier versions)
The text was updated successfully, but these errors were encountered: