From 2bc067f20f380386384f78a1f38c3935ce33263e Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Wed, 18 Aug 2021 01:41:23 +0800 Subject: [PATCH 1/4] Document usage of suspense option of next/dynamic --- docs/advanced-features/dynamic-import.md | 22 ++++++++++++++++++++++ errors/invalid-dynamic-suspense.md | 13 +++++++++++++ packages/next/shared/lib/dynamic.tsx | 2 +- 3 files changed, 36 insertions(+), 1 deletion(-) create mode 100644 errors/invalid-dynamic-suspense.md diff --git a/docs/advanced-features/dynamic-import.md b/docs/advanced-features/dynamic-import.md index 9bd60726971b592..6439a4d72712494 100644 --- a/docs/advanced-features/dynamic-import.md +++ b/docs/advanced-features/dynamic-import.md @@ -156,3 +156,25 @@ function Home() { export default Home ``` + +## With suspense + +Option `suspense` let you to load component lazily as `React.lazy` and `` with React 18. Note that it only works on client side and server side will render `fallback` component yet. Fully SSR support in concurrent mode is working in progress. + +```jsx +import dynamic from 'next/dynamic' + +const DynamicLazyComponent = dynamic(() => import('../components/hello4'), { + suspense: true, +}) + +function Home() { + return ( +
+ + + +
+ ) +} +``` diff --git a/errors/invalid-dynamic-suspense.md b/errors/invalid-dynamic-suspense.md new file mode 100644 index 000000000000000..822a17f82360126 --- /dev/null +++ b/errors/invalid-dynamic-suspense.md @@ -0,0 +1,13 @@ +# Invalid Usage of `suspense` Option of `next/dynamic` + +#### Why This Error Occurred + +`` is not allowed under legacy render mode without using React versions above 18. + +#### Possible Ways to Fix It + +Remove `suspense: true` option in `next/dynamic` usages. + +### Useful Links + +- [Dynamic Import Suspense Usage](https://nextjs.org/docs/advanced-features/dynamic-import#with-suspense) diff --git a/packages/next/shared/lib/dynamic.tsx b/packages/next/shared/lib/dynamic.tsx index 771e4b5aaa375a3..8c1f5b3df916d50 100644 --- a/packages/next/shared/lib/dynamic.tsx +++ b/packages/next/shared/lib/dynamic.tsx @@ -119,7 +119,7 @@ export default function dynamic

( if (!process.env.__NEXT_REACT_ROOT && suspenseOptions.suspense) { // TODO: add error doc when this feature is stable throw new Error( - `Disallowed suspense option usage with next/dynamic in blocking mode` + `Invalid suspense option usage in next/dynamic. Read more: https://nextjs.org/docs/messages/invalid-dynamic-suspense` ) } } From 1d390e77b7aaaa021b05bd1564267fae4f987082 Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Wed, 18 Aug 2021 01:49:12 +0800 Subject: [PATCH 2/4] add error to manifest --- errors/manifest.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/errors/manifest.json b/errors/manifest.json index fc6a3ebb010ebf7..5645b9cd13e89bc 100644 --- a/errors/manifest.json +++ b/errors/manifest.json @@ -151,6 +151,10 @@ "title": "invalid-assetprefix", "path": "/errors/invalid-assetprefix.md" }, + { + "title": "invalid-dynamic-suspense", + "path": "/errors/invalid-dynamic-suspense.md" + }, { "title": "invalid-external-rewrite", "path": "/errors/invalid-external-rewrite.md" From e32ca02023b9a86579675267609dd580a1e39ce6 Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Wed, 18 Aug 2021 01:53:39 +0800 Subject: [PATCH 3/4] Apply suggestions from code review Co-authored-by: Steven --- docs/advanced-features/dynamic-import.md | 2 +- errors/invalid-dynamic-suspense.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/advanced-features/dynamic-import.md b/docs/advanced-features/dynamic-import.md index 6439a4d72712494..fd92848067e9958 100644 --- a/docs/advanced-features/dynamic-import.md +++ b/docs/advanced-features/dynamic-import.md @@ -159,7 +159,7 @@ export default Home ## With suspense -Option `suspense` let you to load component lazily as `React.lazy` and `` with React 18. Note that it only works on client side and server side will render `fallback` component yet. Fully SSR support in concurrent mode is working in progress. +Option `suspense` allows you to lazy-load a component, similar to `React.lazy` and `` with React 18. Note that it only works on client-side or server-side with `fallback`. Full SSR support in concurrent mode is still a work-in-progress. ```jsx import dynamic from 'next/dynamic' diff --git a/errors/invalid-dynamic-suspense.md b/errors/invalid-dynamic-suspense.md index 822a17f82360126..11e4d6134d732fa 100644 --- a/errors/invalid-dynamic-suspense.md +++ b/errors/invalid-dynamic-suspense.md @@ -2,7 +2,7 @@ #### Why This Error Occurred -`` is not allowed under legacy render mode without using React versions above 18. +`` is not allowed under legacy render mode when using React older than v18. #### Possible Ways to Fix It From c24da9f57233c40879afa7774226c0854482d0f6 Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Wed, 18 Aug 2021 02:25:59 +0800 Subject: [PATCH 4/4] update test --- test/integration/react-18/test/index.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/integration/react-18/test/index.test.js b/test/integration/react-18/test/index.test.js index a63d78b92372c84..1b5fef5360a8683 100644 --- a/test/integration/react-18/test/index.test.js +++ b/test/integration/react-18/test/index.test.js @@ -87,7 +87,7 @@ describe('React 18 Support', () => { }) expect(code).toBe(1) expect(stderr).toContain( - 'Disallowed suspense option usage with next/dynamic' + 'Invalid suspense option usage in next/dynamic. Read more: https://nextjs.org/docs/messages/invalid-dynamic-suspense' ) }) }) @@ -130,7 +130,7 @@ describe('Basics', () => { const html = await renderViaHTTP(appPort, '/suspense/unwrapped') unwrappedPage.restore() await killApp(app) - // expect(html).toContain('Disallowed suspense option usage with next/dynamic') + expect(html).toContain( 'A React component suspended while rendering, but no fallback UI was specified' )