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.

Sign up for GitHub

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

Jump to bottom

prevent "loading" is ignored by next/dynamic because you have enabled "suspense" warning, when loading is undefined #41630

Closed
wants to merge 2 commits into from
Closed

prevent "loading" is ignored by next/dynamic because you have enabled "suspense" warning, when loading is undefined #41630

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
57249fa
prevent false warning
hacknlove Oct 21, 2022
6845aa1
Merge branch 'canary' into canary
hacknlove Nov 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
46 changes: 26 additions & 20 deletions packages/next/shared/lib/dynamic.tsx
View file
Open in desktop
Expand Up @@ -60,36 +60,39 @@ export function noSSR<P = {}>(
)
}

const defaultLoading = ({ error, isLoading, pastDelay }: DynamicOptionsLoadingProps) => {
if (!pastDelay) return null
if (process.env.NODE_ENV === 'development') {
if (isLoading) {
return null
}
if (error) {
return (
<p>
{error.message}
<br />
{error.stack}
</p>
)
}
}

return null
}

export default function dynamic<P = {}>(
dynamicOptions: DynamicOptions<P> | Loader<P>,
options?: DynamicOptions<P>
): React.ComponentType<P> {
let loadableFn: LoadableFn<P> = Loadable


let loadableOptions: LoadableOptions<P> = options?.suspense
? {}
: // only provide a default loading component when suspense is disabled
{
// A loading component is not required, so we default it
loading: ({ error, isLoading, pastDelay }) => {
if (!pastDelay) return null
if (process.env.NODE_ENV === 'development') {
if (isLoading) {
return null
}
if (error) {
return (
<p>
{error.message}
<br />
{error.stack}
</p>
)
}
}

return null
},
loading: defaultLoading,
}

// Support for direct import(), eg: dynamic(import('../hello-world'))
Expand Down Expand Up @@ -124,7 +127,10 @@ export default function dynamic<P = {}>(
)
}

if (loadableOptions.loading != null) {
if (loadableOptions.loading === defaultLoading) {
loadableOptions.loading = undefined
} else if (loadableOptions.loading != null) {
loadableOptions.loading = undefined
console.warn(
`"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`
)
Expand Down