13.0.7 - minified react error #421 (does not happen in 13.0.6)

[wadehammes]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 22.2.0: Fri Nov 11 02:03:51 PST 2022; root:xnu-8792.61.2~4/RELEASE_ARM64_T6000
Binaries:
Node: 16.18.1
npm: 8.19.2
Yarn: 1.22.19
pnpm: N/A
Relevant packages:
next: 13.0.6
eslint-config-next: 13.0.6
react: 18.2.0
react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue

To Reproduce

Have a site running 13.0.7 with SSR, dynamic routes, and transpiled modules.

Describe the Bug

Recieve the below console error in both preview and local.

https://reactjs.org/docs/error-decoder.html/?invariant=421

Expected Behavior

No suspense boundary error as in 13.0.6

Which browser are you using? (if relevant)

Firefox

How are you deploying your application? (if relevant)

Vercel

[gusfune]

Can confirm the same issue here. The full error is:

Error: This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering. The usual way to fix this is to wrap the original update in startTransition.

Happens even in blank components all random in the latest NextJS version.

[wegeberg]

Same happens here in multiple apps when running in production.
Debian 11 - Node 16.18.1 - x86_64
Downgrading to Next 13.0.6 removes the error in all apps.

[kachkaev]

Also seeing this in 13.0.7.

yarn dev

next/dynamic + ssr: true (default)

react-dom.development.js?ac89:20702 Uncaught Error: This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering. The usual way to fix this is to wrap the original update in startTransition.
    at updateDehydratedSuspenseComponent (react-dom.development.js?ac89:20702:1)

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

next/dynamic + ssr: false

no warnings

yarn build && yarn start

next/dynamic + ssr: true (default)

Uncaught Error: Minified React error #421; visit https://reactjs.org/docs/error-decoder.html?invariant=421 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

next/dynamic + ssr: false

Uncaught Error: Minified React error #419; visit https://reactjs.org/docs/error-decoder.html?invariant=419 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Reverting to 13.0.6 helps.

[github-actions]

We cannot recreate the issue with the provided information. Please add a reproduction in order for us to be able to investigate.

Why was this issue marked with the please add a complete reproduction label?

To be able to investigate, we need access to a reproduction to identify what triggered the issue. We prefer a link to a public GitHub repository (template), but you can also use a tool like CodeSandbox or StackBlitz.

To make sure the issue is resolved as quickly as possible, please make sure that the reproduction is as minimal as possible. This means that you should remove unnecessary code, files, and dependencies that do not contribute to the issue.

Please test your reproduction against the latest version of Next.js (next@canary) to make sure your issue has not already been fixed.

I added a link, why was it still marked?

Ensure the link is pointing to a codebase that is accessible (e.g. not a private repository). "example.com", "n/a", "will add later", etc. are not acceptable links -- we need to see a public codebase. See the above section for accepted links.

What happens if I don't provide a sufficient minimal reproduction?

Issues with the please add a complete reproduction label that receives no meaningful activity (e.g. new comments with a reproduction link) are automatically closed and locked after 30 days.

If your issue has not been resolved in that time and it has been closed/locked, please open a new issue with the required reproduction.

I did not open this issue, but it is relevant to me, what can I do to help?

Anyone experiencing the same issue is welcome to provide a minimal reproduction following the above steps. Furthermore, you can upvote the issue using the 👍 reaction on the topmost comment (please do not comment "I have the same issue" without repro steps). Then, we can sort issues by votes to prioritize.

I think my reproduction is good enough, why aren't you looking into it quicker?

We look into every Next.js issue and constantly monitor open issues for new comments.

However, sometimes we might miss one or two due to the popularity/high traffic of the repository. We apologize, and kindly ask you to refrain from tagging core maintainers, as that will usually not result in increased priority.

Upvoting issues to show your interest will help us prioritize and address them as quickly as possible. That said, every issue is important to us, and if an issue gets closed by accident, we encourage you to open a new one linking to the old issue and we will look into it.

Useful Resources

• How to Contribute to Open Source (Next.js)
• How to create a Minimal, Complete, and Verifiable example
• Reporting a Next.js bug
• Next.js Triaging issues

[huozhi]

The link in the PR description is not accessible with password protected. Could someone provide a mini reproduction repo for this?

[wadehammes]

Ive started to work on a reproduction here -> https://codesandbox.io/s/awesome-hermann-gu8kmj?file=/pages/index.tsx

It appears to be caused (for my use case anyways) trying to dynamically load a styled-component with next/dynamice.

[huozhi]

Ive started to work on a reproduction here -> https://codesandbox.io/s/awesome-hermann-gu8kmj?file=/pages/index.tsx
I didn't see warnings in the codesandbox, also when I cloned it and tried with next dev/build/start, they also don't have warnings either.

There was an error Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. beacause you have import('./fact') but fact doesn't have default export

[wadehammes]

You are correct. This is not the same error then. Do you want access to my company repo to look into the error reported?

@huozhi

[wadehammes]

If someone else here is able to create a reproduction that would be great.

[gusfune]

Ok, I have managed to narrow down the culprit. Unfortunately I couldn't create a reproduction for this, but I can confirm the problem is specifically with next/dynamic.

The error occurs on components with dynamic when no option it set, or when the option contains suspense: true.
Changing the dynamic import to ssr: false solves the issue.

[yarigo]

I was able to localize the error in my project and reproduce it (with redux): https://codesandbox.io/p/sandbox/next-13-0-7-swkcsy.
In version 13.0.6 everything works.
In version 13.0.7 if you set ssr: false for component A or import it directly (without dynamic), everything works.

Up 1. When replacing redux with context, everything works without errors.
Up 2. Testing with mobx, everything works without errors.

[wadehammes]

@huozhi see above for a reproduction. This is happening in the current 13.1.0 version as well.

[huozhi]

This error is removed in facebook/react#25692, I tried 18.3.0-next-81d4ee9ca-20221223 of react it doesn't show the warning in codesandbox. Seems 18.3 is going to be released soon

[conquera99]

so its because of react?

I tried simple app, but the error is shown too (using appDir).

package:
nextjs: 13.1.1
react: 18.2.0

https://github.com/conquera99/website

[huozhi]

The error mentioned in #44083 (comment) is removed in react. If it's still happening might be sth else

[huozhi]

@conquera99 your issue is from react-social-icon, in dev mode you can see there's a hydration mistmatch issue, and it asked you to not nested <a> inside <a>. You need to remove the wrapping anchor to react-social-icons, then pass the props on anchor to ScoialLink itself.

[conquera99]

ahh my bad, thank you @huozhi

[phuctm97]

I'm not sure if it is related. next/dynamic imported components inside a Suspense component don't render its fallback, it just doesn't render anything at all when being suspended. The issue happens in 13.0.7 as well as latest version, downgrading to 13.0.6 get rid of the issue.

[oceandrama]

@huozhi As mentioned here facebook/react#25692, underlying issue is still there
Even error is not visible, it leads to full rerendering application on the client side
I have the same error with next/dynamic in Next.js v13.1.1, but not in v 13.0.6
Looks like this PR #42589 is the reason

[wadehammes]

Nice find @oceandrama

[tatethurston]

Echoing gusfune:

Still encountering this issue on Next.js v13.1.1.

Adding { ssr: false } to all next/dynamic call sites temporarily works around the issue -- if only importing dynamic components on the client is acceptable for your use case.

Example:

import dynamic from 'next/dynamic';

const LazyComponent = dynamic(
  () => import('./Component').then((mod) => mod.Component),
  { ssr: false },
);

[tatethurston]

Updating to React 18.3 appears to fix the issue.

[phuctm97]

Updating to React 18.3 appears to fix the issue.

How to get access to React 18.3? I checked on React repository but the latest available version is 18.2.

[tatethurston]

Updating to React 18.3 appears to fix the issue.

How to get access to React 18.3? I checked on React repository but the latest available version is 18.2.

react@next

[wadehammes]

Updating to React 18.3 appears to fix the issue.

This only hides the error, but the issue is still there underlying. See first line of the PR for the change in React 18.3 -> facebook/react#25692

[klarstrup]

This is still the case as of next@13.1.2-canary.4 with react@18.2.

next@13.1.1(and indeed next@13.1.2-canary.4) with react@18.3.0-next-0f4a83596-20230110 quenches the error.

[wadehammes]

This is still the case as of next@13.1.2-canary.4 with react@18.2.

next@13.1.1(and indeed next@13.1.2-canary.4) with react@18.3.0-next-0f4a83596-20230110 quenches the error.

@klarstrup the error is removed, but the problem still exists. I'm personally not planning to upgrade to 13.1.1 or beyond even if 18.3 releases until we get word from the Next team they plan to fix the underlying issue. @balazsorban44 @huozhi

[anjan-kp]

This issue is related to dynamic import in nextjs.
Looks like there is a version compatibility issue between next@latest and react@latest
Working fine in these 2 version combinations of react and nextjs.
next:13.0.6
react:18.2.0
react-dom:18.2.0

And

next@latest
react@next
react-dom@next

[wadehammes]

Im guessing there will not be a fix for this. Still happening in 13.1.3.

[huozhi]

@wadehammes can you provide your mini reproduction? since the problems for above ones are resolved. need a repro for seeing how the prod error is triggered

[wescopeland]

Can confirm this is still happening in 13.1.6. Caused by PR #42589. This is quite a breaking change, I'm surprised it was shipped in a minor release.

People are avoiding upgrading their Next.js version or downgrading altogether to get around this issue, which is ironic because the PR was supposed to make upgrading/migration to the app folder easier. It may be appropriate to revisit the changes in this PR.

[phuctm97]

People are avoiding upgrading their Next.js version or downgrading altogether to get around this issue, which is ironic because the PR was supposed to make upgrading/migration to the app folder easier. It may be appropriate to revisit the changes in this PR.

I can't agree more. This is a big breaking change for all of my Next.js apps. Can't upgrade at all since 13.0.7.

[leerob]

Can confirm this is still happening in 13.1.6. Caused by PR #42589. This is quite a breaking change, I'm surprised it was shipped in a minor release.

@wescopeland This is not (and is not designed to be) a breaking change. If there is a bug, we will patch it. Unfortunately, it has been hard to get a consistent reproduction of the issue (seems each case has been a little different based on the conversation above). We are trying out best here. Can you create a minimal reproduction please?

People are avoiding upgrading their Next.js version or downgrading altogether to get around this issue, which is ironic because the PR was supposed to make upgrading/migration to the app folder easier. It may be appropriate to revisit the changes in this PR.

It is okay to watch to upgrade or downgrade minor or patch versions while a bug is being fixed. Based on the 16 thumbs up on this issue, it is definitely happening to some folks (and we want to continue looking into this with reproductions) but not a majority.

I can't agree more. This is a big breaking change for all of my Next.js apps. Can't upgrade at all since 13.0.7.

@phuctm97 this is not a breaking change – it seems there is a bug. Can you create a minimal reproduction please?

[wescopeland]

We are trying out best here.

I understand and this is appreciated; nice new website btw.

it is definitely happening to some folks (and we want to continue looking into this with reproductions) but not a majority.

My perception is this is not happening on simple sites, but more complex webapps, which the majority of users are not building. This is also likely why it is harder to get a consistent repro and/or why each case has had subtle differences.

@phuctm97 Do you have a repro you can share? I am only able to repro this in more-complex apps that are unfortunately locked down.

[phuctm97]

Thanks for proceeding on this @leerob & @wescopeland. I have reproduced the issue here: https://github.com/phuctm97/repro-next-44083.

The repository is created using yarn create next-app --ts, all with latest version. There are comments in the repo explaining the issues.

Please search for "[BUG]" when you open the repo, you'll see the comments pointing you through the issue.

Thank you!

[huozhi]

@phuctm97 I can see the issue in the reproduction, it's because the nested next/dynamic is not preloaded, we were aware of that issue and exploring solution is ongoing. But seems I couldn't repro the minified react error or any error in dev mode, I wonder it's caused by sth else

[phuctm97]

Thanks for updating @huozhi. Any suggested workaround or issue to track that issue. It is a big breaking blocker for me at the moment.

[huozhi]

@phuctm97 Since we introduced a layer of Suspense in dynamic, you don't have to wrap extra Suspense boundary to it. And you can put the Fallback component in loading option

[phuctm97]

Thanks @huozhi! That works for simple fallback but if <Example /> takes some props and <Fallback /> needs some of these props to render a higher fidelity fallback UI, a React context will need to be used for each instance of this pattern. Using <Suspense /> is more natural & flexible. Just a feedback, using context should work for now!

[huozhi]

needs some of these props to render a higher fidelity fallback UI, a React context will need to be used for each instance of this pattern. Using is more natural & flexible
@phuctm97 I would recommend to use React.lazy and Suspense together, but it also requires some change like converting to static html rendering for pages/, which we have planned to put it in later releases.

Meanwhile, #45565 should resolve the problem since it reverts to the original implementation of dynamic for pages

[huozhi]

Got the fix out in v13.1.7-canary.5, can you try that version to see if it works for you? Thanks 🙏

[KittySparkles]

I can confirm this appears to be fixed with v13.1.7-canary.5. ✨

[phuctm97]

I can confirm the issue appears to be fixed with v13.1.7-canary.5 too! Thank you!

[icekhab]

It works without Suspense boundary error with v13.1.7-canary.5, thanks!

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.