From 87f369043ec834da7d4debddb9bc0a159707c45c Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Wed, 15 May 2024 15:38:43 +0200 Subject: [PATCH 1/2] error in build for middleware when import client-only --- packages/next/src/build/webpack-config.ts | 2 +- test/e2e/module-layer/module-layer.test.ts | 13 ++----------- 2 files changed, 3 insertions(+), 12 deletions(-) diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts index df2887434db73..6360dcd611118 100644 --- a/packages/next/src/build/webpack-config.ts +++ b/packages/next/src/build/webpack-config.ts @@ -509,7 +509,7 @@ export default async function getBaseWebpackConfig( // This will cause some performance overhead but // acceptable as Babel will not be recommended. getSwcLoader({ - serverComponents: false, + serverComponents: true, bundleLayer: WEBPACK_LAYERS.middleware, }), babelLoader, diff --git a/test/e2e/module-layer/module-layer.test.ts b/test/e2e/module-layer/module-layer.test.ts index bf665e1428df8..3eba8a508f544 100644 --- a/test/e2e/module-layer/module-layer.test.ts +++ b/test/e2e/module-layer/module-layer.test.ts @@ -2,7 +2,7 @@ import { nextTestSetup } from 'e2e-utils' import { getRedboxSource, hasRedbox, retry } from 'next-test-utils' describe('module layer', () => { - const { next, isNextStart, isNextDev, isTurbopack } = nextTestSetup({ + const { next, isNextStart, isNextDev } = nextTestSetup({ files: __dirname, }) @@ -81,22 +81,13 @@ describe('module layer', () => { .replace("// import './lib/mixed-lib'", "import './lib/mixed-lib'") ) - const existingCliOutputLength = next.cliOutput.length await retry(async () => { expect(await hasRedbox(browser)).toBe(true) const source = await getRedboxSource(browser) expect(source).toContain( - `'client-only' cannot be imported from a Server Component module. It should only be used from a Client Component.` + `You're importing a component that imports client-only. It only works in a Client Component but none of its parents are marked with "use client"` ) }) - - if (!isTurbopack) { - const newCliOutput = next.cliOutput.slice(existingCliOutputLength) - expect(newCliOutput).toContain('./middleware.js') - expect(newCliOutput).toContain( - `'client-only' cannot be imported from a Server Component module. It should only be used from a Client Component` - ) - } }) }) } From 6bc0a95d6529d409b8f872f914636f9eaed5f780 Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Wed, 15 May 2024 16:56:30 +0200 Subject: [PATCH 2/2] fix turbopack test --- test/e2e/module-layer/module-layer.test.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/test/e2e/module-layer/module-layer.test.ts b/test/e2e/module-layer/module-layer.test.ts index 3eba8a508f544..2e0e755d43929 100644 --- a/test/e2e/module-layer/module-layer.test.ts +++ b/test/e2e/module-layer/module-layer.test.ts @@ -2,7 +2,7 @@ import { nextTestSetup } from 'e2e-utils' import { getRedboxSource, hasRedbox, retry } from 'next-test-utils' describe('module layer', () => { - const { next, isNextStart, isNextDev } = nextTestSetup({ + const { next, isNextStart, isNextDev, isTurbopack } = nextTestSetup({ files: __dirname, }) @@ -85,7 +85,9 @@ describe('module layer', () => { expect(await hasRedbox(browser)).toBe(true) const source = await getRedboxSource(browser) expect(source).toContain( - `You're importing a component that imports client-only. It only works in a Client Component but none of its parents are marked with "use client"` + isTurbopack + ? `'client-only' cannot be imported from a Server Component module. It should only be used from a Client Component.` + : `You're importing a component that imports client-only. It only works in a Client Component but none of its parents are marked with "use client"` ) }) })