Fix SWC dynamic transform with suspense but without ssr #36825

Brooooooklyn · 2022-05-11T05:58:36Z

The Babel plugin works fine, so it seems not a runtime issue.

packages/next-swc/crates/core/src/next_dynamic.rs

ijjk · 2022-05-11T06:26:44Z

Stats from current PR

Default Build (Decrease detected ✓)

General

	vercel/next.js canary	vercel/next.js dynamic-suspense-without-ssr	Change
buildDuration	16.1s	16.1s	-33ms
buildDurationCached	6.7s	6.6s	-39ms
nodeModulesSize	478 MB	478 MB	✓

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js dynamic-suspense-without-ssr	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.875	3.906	⚠️ +0.03
/ avg req/sec	645.17	640.11	⚠️ -5.06
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.369	1.385	⚠️ +0.02
/error-in-render avg req/sec	1826.58	1804.61	⚠️ -21.97

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js dynamic-suspense-without-ssr	Change
925.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	28.7 kB	28.7 kB	✓
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	72.4 kB	72.4 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js dynamic-suspense-without-ssr	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js dynamic-suspense-without-ssr	Change
_app-HASH.js gzip	1.36 kB	1.36 kB	✓
_error-HASH.js gzip	193 B	193 B	✓
amp-HASH.js gzip	308 B	308 B	✓
css-HASH.js gzip	327 B	327 B	✓
dynamic-HASH.js gzip	2.7 kB	2.7 kB	✓
head-HASH.js gzip	359 B	359 B	✓
hooks-HASH.js gzip	920 B	920 B	✓
image-HASH.js gzip	5.71 kB	5.71 kB	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.65 kB	2.65 kB	✓
routerDirect..HASH.js gzip	320 B	320 B	✓
script-HASH.js gzip	391 B	391 B	✓
withRouter-HASH.js gzip	318 B	318 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	15.9 kB	15.9 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js dynamic-suspense-without-ssr	Change
_buildManifest.js gzip	458 B	458 B	✓
Overall change	458 B	458 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js dynamic-suspense-without-ssr	Change
index.html gzip	532 B	532 B	✓
link.html gzip	544 B	544 B	✓
withRouter.html gzip	527 B	527 B	✓
Overall change	1.6 kB	1.6 kB	✓

Default Build with SWC (Increase detected ⚠️)

General

	vercel/next.js canary	vercel/next.js dynamic-suspense-without-ssr	Change
buildDuration	18.4s	18.5s	⚠️ +98ms
buildDurationCached	6.5s	6.7s	⚠️ +293ms
nodeModulesSize	478 MB	478 MB	✓

Page Load Tests Overall increase ✓

	vercel/next.js canary	vercel/next.js dynamic-suspense-without-ssr	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.93	3.949	⚠️ +0.02
/ avg req/sec	636.1	633.09	⚠️ -3.01
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.369	1.358	-0.01
/error-in-render avg req/sec	1826.75	1840.51	+13.76

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js dynamic-suspense-without-ssr	Change
925.HASH.js gzip	178 B	178 B	✓
framework-HASH.js gzip	42.7 kB	42.7 kB	✓
main-HASH.js gzip	29.2 kB	29.2 kB	✓
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	73.5 kB	73.5 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js dynamic-suspense-without-ssr	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js dynamic-suspense-without-ssr	Change
_app-HASH.js gzip	1.35 kB	1.35 kB	✓
_error-HASH.js gzip	179 B	179 B	✓
amp-HASH.js gzip	311 B	311 B	✓
css-HASH.js gzip	324 B	324 B	✓
dynamic-HASH.js gzip	2.89 kB	2.89 kB	✓
head-HASH.js gzip	357 B	357 B	✓
hooks-HASH.js gzip	920 B	920 B	✓
image-HASH.js gzip	5.8 kB	5.8 kB	✓
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	2.77 kB	2.77 kB	✓
routerDirect..HASH.js gzip	322 B	322 B	✓
script-HASH.js gzip	392 B	392 B	✓
withRouter-HASH.js gzip	317 B	317 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	16.3 kB	16.3 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js dynamic-suspense-without-ssr	Change
_buildManifest.js gzip	457 B	457 B	✓
Overall change	457 B	457 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js dynamic-suspense-without-ssr	Change
index.html gzip	532 B	532 B	✓
link.html gzip	547 B	547 B	✓
withRouter.html gzip	528 B	528 B	✓
Overall change	1.61 kB	1.61 kB	✓

Commit: 53a5cdf

bkyerv · 2022-05-11T08:39:43Z

what is the fix? what needs to be done for the issue to be fixed? reinstall swc? reinstall latest next?

Brooooooklyn · 2022-05-11T10:51:55Z

@bkyerv you'll need to wait for this pr merged, and the new canary version published. Then install the latest canary version next.js

ijjk · 2022-05-11T16:36:02Z

Failing test suites

Commit: 0fdfb7a

yarn testheadless test/e2e/dynamic-with-suspense/index.test.ts

dynamic with suspense > should render server-side
dynamic with suspense > should render client-side

Expand output

● dynamic with suspense › should render server-side

expect(received).toContain(expected) // indexOf

Expected substring: "Next.js Example"
Received string:    "<!DOCTYPE html><html><head><style data-next-hide-fouc=\"true\">body{display:none}</style><noscript data-next-hide-fouc=\"true\"><style>body{display:block}</style></noscript><meta charSet=\"utf-8\"/><meta name=\"viewport\" content=\"width=device-width\"/><meta name=\"next-head-count\" content=\"2\"/><noscript data-n-css=\"\"></noscript><script defer=\"\" nomodule=\"\" src=\"/_next/static/chunks/polyfills.js?ts=1652286940821\"></script><script src=\"/_next/static/chunks/webpack.js?ts=1652286940821\" defer=\"\"></script><script src=\"/_next/static/chunks/main.js?ts=1652286940821\" defer=\"\"></script><script src=\"/_next/static/chunks/pages/_app.js?ts=1652286940821\" defer=\"\"></script><script src=\"/_next/static/chunks/pages/_error.js?ts=1652286940821\" defer=\"\"></script><script src=\"/_next/static/development/_buildManifest.js?ts=1652286940821\" defer=\"\"></script><script src=\"/_next/static/development/_ssgManifest.js?ts=1652286940821\" defer=\"\"></script><script src=\"/_next/static/development/_middlewareManifest.js?ts=1652286940821\" defer=\"\"></script><noscript id=\"__next_css__DO_NOT_USE__\"></noscript></head><body><div id=\"__next\" data-reactroot=\"\"></div><script src=\"/_next/static/chunks/react-refresh.js?ts=1652286940821\"></script><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{\"statusCode\":500}},\"page\":\"/_error\",\"query\":{\"__NEXT_PAGE\":\"/\"},\"buildId\":\"development\",\"isFallback\":false,\"err\":{\"name\":\"Error\",\"message\":\"Invalid suspense option usage in next/dynamic. Read more: https://nextjs.org/docs/messages/invalid-dynamic-suspense\",\"stack\":\"Error: Invalid suspense option usage in next/dynamic. Read more: https://nextjs.org/docs/messages/invalid-dynamic-suspense\\n    at dynamic (webpack-internal:///./node_modules/next/dist/shared/lib/dynamic.js:51:15)\\n    at eval (webpack-internal:///./pages/index.js:14:66)\\n    at Object../pages/index.js (/tmp/next-install-1652286919427/.next/server/pages/index.js:33:1)\\n    at __webpack_require__ (/tmp/next-install-1652286919427/.next/server/webpack-runtime.js:33:42)\\n    at __webpack_exec__ (/tmp/next-install-1652286919427/.next/server/pages/index.js:86:39)\\n    at /tmp/next-install-1652286919427/.next/server/pages/index.js:87:28\\n    at Object.\\u003canonymous\\u003e (/tmp/next-install-1652286919427/.next/server/pages/index.js:90:3)\\n    at Module._compile (node:internal/modules/cjs/loader:1105:14)\\n    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)\\n    at Module.load (node:internal/modules/cjs/loader:981:32)\"},\"gip\":true,\"scriptLoader\":[]}</script></body></html>"

  40 |   it('should render server-side', async () => {
  41 |     const html = await renderViaHTTP(next.url, '/')
> 42 |     expect(html).toContain('Next.js Example')
     |                  ^
  43 |     expect(html).toContain('Thing')
  44 |   })
  45 |

  at Object.<anonymous> (e2e/dynamic-with-suspense/index.test.ts:42:18)

● dynamic with suspense › should render client-side

expect(received).toBe(expected) // Object.is equality

Expected: false
Received: true

  46 |   it('should render client-side', async () => {
  47 |     const browser = await webdriver(next.url, '/')
> 48 |     expect(await hasRedbox(browser)).toBe(false)
     |                                      ^
  49 |     await browser.close()
  50 |   })
  51 | })

  at Object.<anonymous> (e2e/dynamic-with-suspense/index.test.ts:48:38)

Read more about building and testing Next.js in contributing.md.

packages/next-swc/crates/core/src/next_dynamic.rs

huozhi

lgtm on my side

Brooooooklyn requested review from timneutkens, ijjk, shuding and huozhi as code owners May 11, 2022 05:58

ijjk added the type: next label May 11, 2022

Brooooooklyn requested a review from kdy1 May 11, 2022 06:18

kdy1 requested changes May 11, 2022

View reviewed changes

packages/next-swc/crates/core/src/next_dynamic.rs Outdated Show resolved Hide resolved

Brooooooklyn force-pushed the dynamic-suspense-without-ssr branch from 0b41fba to 0de3c06 Compare May 11, 2022 06:34

Brooooooklyn requested a review from kdy1 May 11, 2022 06:34

kdy1 previously approved these changes May 11, 2022

View reviewed changes

Brooooooklyn dismissed kdy1’s stale review via 0fdfb7a May 11, 2022 16:15

Brooooooklyn force-pushed the dynamic-suspense-without-ssr branch from 0de3c06 to 0fdfb7a Compare May 11, 2022 16:15

huozhi reviewed May 11, 2022

View reviewed changes

packages/next-swc/crates/core/src/next_dynamic.rs Outdated Show resolved Hide resolved

Fix SWC dynamic transform with suspense but without ssr

2a38e86

Brooooooklyn force-pushed the dynamic-suspense-without-ssr branch from 0fdfb7a to 2a38e86 Compare May 12, 2022 05:50

Brooooooklyn requested a review from huozhi May 12, 2022 06:34

huozhi reviewed May 12, 2022

View reviewed changes

kdy1 approved these changes May 17, 2022

View reviewed changes

huozhi approved these changes May 17, 2022

View reviewed changes

Merge branch 'canary' into dynamic-suspense-without-ssr

53a5cdf

kodiakhq bot merged commit c7f2c63 into canary May 17, 2022

kodiakhq bot deleted the dynamic-suspense-without-ssr branch May 17, 2022 10:41

github-actions bot locked as resolved and limited conversation to collaborators Jun 16, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix SWC dynamic transform with suspense but without ssr #36825

Fix SWC dynamic transform with suspense but without ssr #36825

Brooooooklyn commented May 11, 2022 •

edited

ijjk commented May 11, 2022 •

edited

bkyerv commented May 11, 2022

Brooooooklyn commented May 11, 2022

ijjk commented May 11, 2022

huozhi left a comment

Fix SWC dynamic transform with suspense but without ssr #36825

Fix SWC dynamic transform with suspense but without ssr #36825

Conversation

Brooooooklyn commented May 11, 2022 • edited

ijjk commented May 11, 2022 • edited

Stats from current PR

bkyerv commented May 11, 2022

Brooooooklyn commented May 11, 2022

ijjk commented May 11, 2022

Failing test suites

huozhi left a comment

Choose a reason for hiding this comment

Brooooooklyn commented May 11, 2022 •

edited

ijjk commented May 11, 2022 •

edited