Skip to content

Issue with NextJS >= 13.0.7 with react-ssr-prepass and dynamic components #44727

Description

@LiahMartens

Verify canary release

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

Provide environment information

Operating System:
Platform: linux
Arch: x64
Version: #202210290932166906205022.04~d94609a SMP PREEMPT_DYNAMIC Mon N
Binaries:
Node: 16.17.1
npm: 8.15.0
Yarn: 1.22.19
pnpm: 7.5.2
Relevant packages:
next: 13.0.7
eslint-config-next: 13.0.3
react: 18.2.0
react-dom: 18.2.0

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

Dynamic imports (next/dynamic)

Link to the code that reproduces this issue

https://github.com/LiamMartens/nextjs-13-prepass-dynamic-import-reproduction

To Reproduce

  • Create a new NextJS project (>=13.0.5)
  • Add react-ssr-prepass and set it up with getStaticProps (very simply add await ssrPrepass(<Home />) to the getStaticProps function in the homepage)
  • Add a dynamic component on the homepage

Describe the Bug

From Next 13.0.7 onwards it looks like the updated dynamic breaks react-ssr-prepass. I understand prepass should probably be removed in favor of native suspense and fetching methods, however we have projects that extensively use prepass at the this time.

If the official guidance is to deprecate this way of data fetching, it would be great to have guidance as to how to upgrade from a prepass fetching strategy to something like server components. Although, as far as I'm aware this is not ready for production yet anyways so it would be better to keep support for prepass.

Expected Behavior

This works up until NextJS 13.0.6; the dynamic components should just work.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugIssue was opened via the bug report template.linear: nextConfirmed issue that is tracked by the Next.js team.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions