Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dynamic import with suspense:true will disable ssr:false #39609

Closed
1 task done
meotimdihia opened this issue Aug 15, 2022 · 3 comments · Fixed by #39676
Closed
1 task done

Dynamic import with suspense:true will disable ssr:false #39609

meotimdihia opened this issue Aug 15, 2022 · 3 comments · Fixed by #39676
Labels
bug Issue was opened via the bug report template.

Comments

@meotimdihia
Copy link

meotimdihia commented Aug 15, 2022

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 21.6.0: Sat Jun 18 17:07:22 PDT 2022; root:xnu-8020.140.41~1/RELEASE_ARM64_T6000
Binaries:
  Node: 16.16.0
  npm: 8.11.0
  Yarn: 1.22.15
  pnpm: 6.11.0
Relevant packages:
  next: 12.2.6-canary.0
  eslint-config-next: 12.2.5
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Chrome 104.0.5112.79

How are you deploying your application? (if relevant)

yarn dev

Describe the Bug

Uncaught Error: window is not defined

    at updateDehydratedSuspenseComponent (react-dom.development.js?ac89:20662:1)
    at updateSuspenseComponent (react-dom.development.js?ac89:20362:1)
    at beginWork (react-dom.development.js?ac89:21624:1)
    at beginWork$1 (react-dom.development.js?ac89:27426:1)
    at performUnitOfWork (react-dom.development.js?ac89:26557:1)
    at workLoopSync (react-dom.development.js?ac89:26466:1)
    at renderRootSync (react-dom.development.js?ac89:26434:1)
    at performConcurrentWorkOnRoot (react-dom.development.js?ac89:25738:1)
    at workLoop (scheduler.development.js?bcd2:266:1)
    at flushWork (scheduler.development.js?bcd2:239:1)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js?bcd2:533:1)

Expected Behavior

ssr: false should work.

Link to reproduction

It is too easy to reproduce.

To Reproduce

const WarningDomain = dynamic(
  () => import("@components/index/warning_domain"),
  { ssr: false, suspense: true }
)

It is related to this issue #36636.

@meotimdihia meotimdihia added the bug Issue was opened via the bug report template. label Aug 15, 2022
@meotimdihia meotimdihia changed the title dynamic import with suspense:true will disable ssr:false Dynamic import with suspense:true will disable ssr:false Aug 15, 2022
SukkaW added a commit to SukkaW/next.js that referenced this issue Aug 17, 2022
SukkaW added a commit to SukkaW/next.js that referenced this issue Aug 17, 2022
SukkaW added a commit to SukkaW/next.js that referenced this issue Aug 17, 2022
@huozhi
Copy link
Member

huozhi commented Aug 18, 2022

As #36636 (comment) you can't opt into suspense mode with other options including ssr: false option now. You have to remove either of them to fully delegate to React.lazy or use the non suspense dynamic

SukkaW added a commit to SukkaW/next.js that referenced this issue Aug 18, 2022
@kodiakhq kodiakhq bot closed this as completed in #39676 Aug 18, 2022
kodiakhq bot pushed a commit that referenced this issue Aug 18, 2022
Currently, `next/dynamic` will opt-in to `React.lazy` if `{ suspense: true }` is used. And React 18 will always resolve the `Suspense` boundary on the server-side, effectively ignoring the `ssr` option.

The PR fixes #39609 by showing a warning message when `{ suspense: true, ssr: false }` is detected. The error documentation and the corresponding test case has also been updated.

In the future, Next.js could implement a custom version of `React.lazy` that could suspense without executing the lazy-loaded component on the server-side.

cc @huozhi 

## Bug

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [x] Errors have helpful link attached, see `contributing.md`
@huozhi
Copy link
Member

huozhi commented Aug 18, 2022

The PR which closes this issue will provide more error message in the future, but it's still need to tweak a bit the change to pick the suspency dynamic or the previous dynamic eaither for now.

@github-actions
Copy link
Contributor

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.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Sep 18, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Issue was opened via the bug report template.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants