Verify 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,
}
);
Verify canary release
Provide environment information
λ npx --no-install next info
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:
According to https://nextjs.org/docs/messages/invalid-dynamic-suspense:
When I add loading: undefined, the error is gone.
I think the offending PR is this: #39676
Expected Behavior
should not be generate a warning with this usage:
Link to reproduction
n/a
To Reproduce