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

[bonesoul]

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,
  }
);

[imranbarbhuiya]

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]

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

[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.