Fix SWC dynamic transform with suspense but without ssr

[Brooooooklyn]

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

fixes #36636

[ijjk]

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]

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

[Brooooooklyn]

@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]

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.

[huozhi]

lgtm on my side