From 6ba2dc3e9bc3301afb46d5b837b5e4698290aaf6 Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Wed, 9 Oct 2024 15:57:40 +0200 Subject: [PATCH 1/5] Disable server action transform in pages router --- packages/next/src/build/swc/options.ts | 5 ++- .../action-in-pages-router.test.ts | 37 +++++++++++++++++++ .../app-dir/action-in-pages-router/actions.ts | 5 +++ .../action-in-pages-router/pages/foo.tsx | 18 +++++++++ 4 files changed, 63 insertions(+), 2 deletions(-) create mode 100644 test/e2e/app-dir/action-in-pages-router/action-in-pages-router.test.ts create mode 100644 test/e2e/app-dir/action-in-pages-router/actions.ts create mode 100644 test/e2e/app-dir/action-in-pages-router/pages/foo.tsx diff --git a/packages/next/src/build/swc/options.ts b/packages/next/src/build/swc/options.ts index b899db26873ba4..d793d519301eca 100644 --- a/packages/next/src/build/swc/options.ts +++ b/packages/next/src/build/swc/options.ts @@ -6,7 +6,7 @@ import type { StyledComponentsConfig, } from '../../server/config-shared' import type { ResolvedBaseUrl } from '../load-jsconfig' -import { isWebpackServerOnlyLayer } from '../utils' +import { isWebpackServerOnlyLayer, isWebpackBundledLayer } from '../utils' const nextDistPath = /(next[\\/]dist[\\/]shared[\\/]lib)|(next[\\/]dist[\\/]client)|(next[\\/]dist[\\/]pages)/ @@ -82,6 +82,7 @@ function getBaseSWCOptions({ bundleLayer?: WebpackLayerName }) { const isReactServerLayer = isWebpackServerOnlyLayer(bundleLayer) + const isAppRouterLayer = isWebpackBundledLayer(bundleLayer) const parserConfig = getParserOptions({ filename, jsConfig }) const paths = jsConfig?.compilerOptions?.paths const enableDecorators = Boolean( @@ -202,7 +203,7 @@ function getBaseSWCOptions({ } : undefined, serverActions: - serverComponents && !jest + isAppRouterLayer && !jest ? { // always enable server actions // TODO: remove this option diff --git a/test/e2e/app-dir/action-in-pages-router/action-in-pages-router.test.ts b/test/e2e/app-dir/action-in-pages-router/action-in-pages-router.test.ts new file mode 100644 index 00000000000000..57c3f4b756ce57 --- /dev/null +++ b/test/e2e/app-dir/action-in-pages-router/action-in-pages-router.test.ts @@ -0,0 +1,37 @@ +import { nextTestSetup } from 'e2e-utils' +import { assertNoRedbox, retry } from 'next-test-utils' + +describe('app-dir - action-in-pages-router', () => { + const { next, isNextStart } = nextTestSetup({ + files: __dirname, + }) + + it('should not error on fake server action in pages router', async () => { + const browser = await next.browser('/foo') + const button = await browser.elementByCss('button') + await button.click() + + await retry(async () => { + const browserLogText = (await browser.log()) + .map((item) => item.message) + .join('') + // This is a fake server action, a simple function so it can still work + expect(browserLogText).toContain('action:foo') + await assertNoRedbox(browser) + }) + }) + + if (isNextStart && !process.env.TURBOPACK) { + it('should not contain server action in page bundle', async () => { + const pageBundle = await next.readFile('.next/server/pages/foo.js') + // Should not contain the RSC client import source for the server action + expect(pageBundle).not.toContain('react-server-dom-webpack/client') + }) + + it('should not contain server action in manifest', async () => { + expect( + await next.hasFile('.next/server/server-reference-manifest.json') + ).toBe(false) + }) + } +}) diff --git a/test/e2e/app-dir/action-in-pages-router/actions.ts b/test/e2e/app-dir/action-in-pages-router/actions.ts new file mode 100644 index 00000000000000..436b6e7ed4cde6 --- /dev/null +++ b/test/e2e/app-dir/action-in-pages-router/actions.ts @@ -0,0 +1,5 @@ +'use server' + +export async function actionFoo() { + return 'action:foo' +} diff --git a/test/e2e/app-dir/action-in-pages-router/pages/foo.tsx b/test/e2e/app-dir/action-in-pages-router/pages/foo.tsx new file mode 100644 index 00000000000000..703cff9d937d83 --- /dev/null +++ b/test/e2e/app-dir/action-in-pages-router/pages/foo.tsx @@ -0,0 +1,18 @@ +import { actionFoo } from '../actions' + +export default function Page() { + return ( + + ) +} + +// Keep route as dynamic +export async function getServerSideProps() { + return { props: {} } +} From 19a36c65dd9b0fe08b8e81de9e1493c412159066 Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Wed, 9 Oct 2024 16:09:58 +0200 Subject: [PATCH 2/5] comment for turbopack --- .../action-in-pages-router.test.ts | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/test/e2e/app-dir/action-in-pages-router/action-in-pages-router.test.ts b/test/e2e/app-dir/action-in-pages-router/action-in-pages-router.test.ts index 57c3f4b756ce57..478d704c450ebb 100644 --- a/test/e2e/app-dir/action-in-pages-router/action-in-pages-router.test.ts +++ b/test/e2e/app-dir/action-in-pages-router/action-in-pages-router.test.ts @@ -21,12 +21,15 @@ describe('app-dir - action-in-pages-router', () => { }) }) - if (isNextStart && !process.env.TURBOPACK) { - it('should not contain server action in page bundle', async () => { - const pageBundle = await next.readFile('.next/server/pages/foo.js') - // Should not contain the RSC client import source for the server action - expect(pageBundle).not.toContain('react-server-dom-webpack/client') - }) + if (isNextStart) { + // Disabling for turbopack because the chunk path are different + if (!process.env.TURBOPACK) { + it('should not contain server action in page bundle', async () => { + const pageBundle = await next.readFile('.next/server/pages/foo.js') + // Should not contain the RSC client import source for the server action + expect(pageBundle).not.toContain('react-server-dom-webpack/client') + }) + } it('should not contain server action in manifest', async () => { expect( From 69382e296c7408186682ed79e677a9a07863a355 Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Wed, 9 Oct 2024 16:34:39 +0200 Subject: [PATCH 3/5] create new util for app pages --- packages/next/src/build/swc/options.ts | 6 +++--- packages/next/src/build/utils.ts | 6 ++++++ packages/next/src/lib/constants.ts | 7 +++++++ .../action-in-pages-router.test.ts | 13 ++++++++++--- 4 files changed, 26 insertions(+), 6 deletions(-) diff --git a/packages/next/src/build/swc/options.ts b/packages/next/src/build/swc/options.ts index d793d519301eca..bea53512660dc0 100644 --- a/packages/next/src/build/swc/options.ts +++ b/packages/next/src/build/swc/options.ts @@ -6,7 +6,7 @@ import type { StyledComponentsConfig, } from '../../server/config-shared' import type { ResolvedBaseUrl } from '../load-jsconfig' -import { isWebpackServerOnlyLayer, isWebpackBundledLayer } from '../utils' +import { isWebpackServerOnlyLayer, isWebpackAppPagesLayer } from '../utils' const nextDistPath = /(next[\\/]dist[\\/]shared[\\/]lib)|(next[\\/]dist[\\/]client)|(next[\\/]dist[\\/]pages)/ @@ -82,7 +82,7 @@ function getBaseSWCOptions({ bundleLayer?: WebpackLayerName }) { const isReactServerLayer = isWebpackServerOnlyLayer(bundleLayer) - const isAppRouterLayer = isWebpackBundledLayer(bundleLayer) + const isAppRouterPagesLayer = isWebpackAppPagesLayer(bundleLayer) const parserConfig = getParserOptions({ filename, jsConfig }) const paths = jsConfig?.compilerOptions?.paths const enableDecorators = Boolean( @@ -203,7 +203,7 @@ function getBaseSWCOptions({ } : undefined, serverActions: - isAppRouterLayer && !jest + isAppRouterPagesLayer && !jest ? { // always enable server actions // TODO: remove this option diff --git a/packages/next/src/build/utils.ts b/packages/next/src/build/utils.ts index efa434c7b4bc4d..aa5bf19ea8efd7 100644 --- a/packages/next/src/build/utils.ts +++ b/packages/next/src/build/utils.ts @@ -2274,6 +2274,12 @@ export function isWebpackBundledLayer( return Boolean(layer && WEBPACK_LAYERS.GROUP.bundled.includes(layer as any)) } +export function isWebpackAppPagesLayer( + layer: WebpackLayerName | null | undefined +): boolean { + return Boolean(layer && WEBPACK_LAYERS.GROUP.appPages.includes(layer as any)) +} + export function collectMeta({ status, headers, diff --git a/packages/next/src/lib/constants.ts b/packages/next/src/lib/constants.ts index f562772564eec2..e45195dc763cff 100644 --- a/packages/next/src/lib/constants.ts +++ b/packages/next/src/lib/constants.ts @@ -171,6 +171,13 @@ const WEBPACK_LAYERS = { WEBPACK_LAYERS_NAMES.shared, WEBPACK_LAYERS_NAMES.instrument, ], + appPages: [ + // app router pages and layouts + WEBPACK_LAYERS_NAMES.reactServerComponents, + WEBPACK_LAYERS_NAMES.actionBrowser, + WEBPACK_LAYERS_NAMES.appMetadataRoute, + WEBPACK_LAYERS_NAMES.serverSideRendering, + ], }, } diff --git a/test/e2e/app-dir/action-in-pages-router/action-in-pages-router.test.ts b/test/e2e/app-dir/action-in-pages-router/action-in-pages-router.test.ts index 478d704c450ebb..e83a54c18f6f7d 100644 --- a/test/e2e/app-dir/action-in-pages-router/action-in-pages-router.test.ts +++ b/test/e2e/app-dir/action-in-pages-router/action-in-pages-router.test.ts @@ -32,9 +32,16 @@ describe('app-dir - action-in-pages-router', () => { } it('should not contain server action in manifest', async () => { - expect( - await next.hasFile('.next/server/server-reference-manifest.json') - ).toBe(false) + if (process.env.TURBOPACK) { + const manifest = JSON.parse( + await next.readFile('.next/server/server-reference-manifest.json') + ) + expect(Object.keys(manifest.node)).toBe(0) + } else { + expect( + await next.hasFile('.next/server/server-reference-manifest.json') + ).toBe(false) + } }) } }) From 27e76583b5d8d01b1fea263ab369e02c8dbb84a1 Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Wed, 9 Oct 2024 17:04:29 +0200 Subject: [PATCH 4/5] fix layer --- packages/next/src/lib/constants.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/next/src/lib/constants.ts b/packages/next/src/lib/constants.ts index e45195dc763cff..8d90635743ca49 100644 --- a/packages/next/src/lib/constants.ts +++ b/packages/next/src/lib/constants.ts @@ -174,9 +174,9 @@ const WEBPACK_LAYERS = { appPages: [ // app router pages and layouts WEBPACK_LAYERS_NAMES.reactServerComponents, - WEBPACK_LAYERS_NAMES.actionBrowser, - WEBPACK_LAYERS_NAMES.appMetadataRoute, WEBPACK_LAYERS_NAMES.serverSideRendering, + WEBPACK_LAYERS_NAMES.appPagesBrowser, + WEBPACK_LAYERS_NAMES.actionBrowser, ], }, } From 6aa2e8cea0a255995cb2b1789c5d0bf0a9c50dd3 Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Wed, 9 Oct 2024 17:18:08 +0200 Subject: [PATCH 5/5] fix turbopack test --- .../action-in-pages-router/action-in-pages-router.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/app-dir/action-in-pages-router/action-in-pages-router.test.ts b/test/e2e/app-dir/action-in-pages-router/action-in-pages-router.test.ts index e83a54c18f6f7d..5e8553945d543e 100644 --- a/test/e2e/app-dir/action-in-pages-router/action-in-pages-router.test.ts +++ b/test/e2e/app-dir/action-in-pages-router/action-in-pages-router.test.ts @@ -36,7 +36,7 @@ describe('app-dir - action-in-pages-router', () => { const manifest = JSON.parse( await next.readFile('.next/server/server-reference-manifest.json') ) - expect(Object.keys(manifest.node)).toBe(0) + expect(Object.keys(manifest.node).length).toBe(0) } else { expect( await next.hasFile('.next/server/server-reference-manifest.json')