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

incorrect warning: "loading" is ignored by next/dynamic because you have enabled "suspense". #40388

Closed
1 task done
bonesoul opened this issue Sep 9, 2022 · 3 comments · Fixed by #40397
Closed
1 task done
Labels
area: next/dynamic Dynamic imports (next/dynamic) kind: bug Confirmed bug that is on the backlog

Comments

@bonesoul
Copy link

bonesoul commented Sep 9, 2022

Verify canary release

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

Provide environment information

λ npx --no-install next info

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
Binaries:
  Node: 18.4.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 12.3.0
  eslint-config-next: 12.3.0
  react: 18.2.0
  react-dom: 18.2.0

warn - Latest canary version not detected, detected: "12.3.0", newest: "12.3.1-canary.0".
Please try the latest canary version (npm install next@canary) to confirm the issue still exists before creating a new issue.
Read more - https://nextjs.org/docs/messages/opening-an-issue

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

getting the error incorrectly:

"loading" is ignored by next/dynamic because you have enabled "suspense". Place your loading element in your suspense boundary's "fallback" prop instead. Read more: https://nextjs.org/docs/messages/invalid-dynamic-suspense"

where my suspense usage is:

import dynamic from "next/dynamic";
import { Suspense } from "react";

export default function Footer({ fluid }: { fluid: boolean }) {
  return (
    <Suspense fallback={null}>
      <FooterLoader fluid={fluid} />
    </Suspense>
  );
}

const FooterLoader = dynamic(
  () => import("components/organism/footer/content"),
  {
    ssr: true,
    suspense: true,
  }
);

According to https://nextjs.org/docs/messages/invalid-dynamic-suspense:

  • I use react 18.
  • I'm not using suspense with ssr: false.
  • I'm not using suspense with loading.

When I add loading: undefined, the error is gone.

const FooterLoader = dynamic(
  () => import("components/organism/footer/content"),
  {
    ssr: true,
    suspense: true,
    loading: undefined,
  }
);

I think the offending PR is this: #39676

Expected Behavior

should not be generate a warning with this usage:

const FooterLoader = dynamic(
  () => import("components/organism/footer/content"),
  {
    ssr: true,
    suspense: true,
  }
);

Link to reproduction

n/a

To Reproduce

import dynamic from "next/dynamic";
import { Suspense } from "react";

export default function Footer({ fluid }: { fluid: boolean }) {
  return (
    <Suspense fallback={null}>
      <FooterLoader fluid={fluid} />
    </Suspense>
  );
}

const FooterLoader = dynamic(
  () => import("components/organism/footer/content"),
  {
    ssr: true,
    suspense: true,
  }
);
@bonesoul bonesoul added the template: bug A user has filled out the bug report template. Issue needs triaging label Sep 9, 2022
@bonesoul bonesoul changed the title "loading" is ignored by next/dynamic because you have enabled "suspense". Place your loading element in your suspense boundary's "fallback" prop instead. Read more: https://nextjs.org/docs/messages/invalid-dynamic-suspense incorrect warning: "loading" is ignored by next/dynamic because you have enabled "suspense". Sep 9, 2022
@imranbarbhuiya
Copy link
Contributor

I can repro this issue. Ig it's causing because of https://github.com/vercel/next.js/blob/canary/packages/next/shared/lib/dynamic.tsx#L70

@SukkaW
Copy link
Contributor

SukkaW commented Sep 9, 2022

I am sorry that my previous PR is causing the issue. I am working on a fix now.

SukkaW added a commit to SukkaW/next.js that referenced this issue Sep 9, 2022
SukkaW added a commit to SukkaW/next.js that referenced this issue Sep 9, 2022
@balazsorban44 balazsorban44 added kind: bug Confirmed bug that is on the backlog area: next/dynamic Dynamic imports (next/dynamic) and removed template: bug A user has filled out the bug report template. Issue needs triaging labels Sep 9, 2022
ijjk pushed a commit that referenced this issue Sep 9, 2022
…uspense (#40397)

The PR fixes #40388.

Currently, `next/dynamic` will try to provide a default `loading` to the
`loadableOptions` even when `suspense` is enabled, thus triggering the
incorrect warning. The PR fixes that. The corresponding integration test
case is also updated.

cc @huozhi 

## Bug

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

Co-authored-by: huozhi <inbox@huozhi.im>
@github-actions
Copy link

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 Oct 10, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area: next/dynamic Dynamic imports (next/dynamic) kind: bug Confirmed bug that is on the backlog
Projects
None yet
4 participants