update server layer detection

vercel · May 7, 2024 · 9c5991e · 9c5991e
1 parent 35c0c2b
commit 9c5991e
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 21 deletions.
diff --git a/packages/next/src/build/swc/options.ts b/packages/next/src/build/swc/options.ts
@@ -6,6 +6,7 @@ import type {
   StyledComponentsConfig,
 } from '../../server/config-shared'
 import type { ResolvedBaseUrl } from '../load-jsconfig'
+import { isWebpackServerOnlyLayer } from '../utils'
 
 const nextDistPath =
   /(next[\\/]dist[\\/]shared[\\/]lib)|(next[\\/]dist[\\/]client)|(next[\\/]dist[\\/]pages)/
@@ -78,8 +79,7 @@ function getBaseSWCOptions({
   serverComponents?: boolean
   bundleLayer?: WebpackLayerName
 }) {
-  const isReactServerLayer =
-    bundleLayer === WEBPACK_LAYERS.reactServerComponents
+  const isReactServerLayer = isWebpackServerOnlyLayer(bundleLayer)
   const parserConfig = getParserOptions({ filename, jsConfig })
   const paths = jsConfig?.compilerOptions?.paths
   const enableDecorators = Boolean(

diff --git 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: true,
+      serverComponents: false,
       bundleLayer: WEBPACK_LAYERS.middleware,
     }),
     babelLoader,
@@ -560,7 +560,7 @@ export default async function getBaseWebpackConfig(
   const apiRoutesLayerLoaders =
     hasAppDir && useSWCLoader
       ? getSwcLoader({
-          serverComponents: true,
+          serverComponents: false,
           bundleLayer: WEBPACK_LAYERS.api,
         })
       : defaultLoaders.babel
@@ -1203,7 +1203,10 @@ export default async function getBaseWebpackConfig(
         // Alias server-only and client-only to proper exports based on bundling layers
         {
           issuerLayer: {
-            or: WEBPACK_LAYERS.GROUP.serverOnly,
+            or: [
+              ...WEBPACK_LAYERS.GROUP.serverOnly,
+              ...WEBPACK_LAYERS.GROUP.neutralTarget,
+            ],
           },
           resolve: {
             // Error on client-only but allow server-only
@@ -1212,7 +1215,10 @@ export default async function getBaseWebpackConfig(
         },
         {
           issuerLayer: {
-            not: WEBPACK_LAYERS.GROUP.serverOnly,
+            not: [
+              ...WEBPACK_LAYERS.GROUP.serverOnly,
+              ...WEBPACK_LAYERS.GROUP.neutralTarget,
+            ],
           },
           resolve: {
             // Error on server-only but allow client-only
@@ -1241,7 +1247,10 @@ export default async function getBaseWebpackConfig(
           ],
           loader: 'next-invalid-import-error-loader',
           issuerLayer: {
-            not: WEBPACK_LAYERS.GROUP.serverOnly,
+            not: [
+              ...WEBPACK_LAYERS.GROUP.serverOnly,
+              ...WEBPACK_LAYERS.GROUP.neutralTarget,
+            ],
           },
           options: {
             message:
@@ -1258,7 +1267,7 @@ export default async function getBaseWebpackConfig(
           ],
           loader: 'empty-loader',
           issuerLayer: {
-            not: WEBPACK_LAYERS.GROUP.serverOnly,
+            or: WEBPACK_LAYERS.GROUP.neutralTarget,
           },
         },
         ...(hasAppDir

diff --git a/packages/next/src/lib/constants.ts b/packages/next/src/lib/constants.ts
@@ -169,6 +169,9 @@ const WEBPACK_LAYERS = {
       WEBPACK_LAYERS_NAMES.appRouteHandler,
       WEBPACK_LAYERS_NAMES.instrument,
       WEBPACK_LAYERS_NAMES.middleware,
+    ],
+    neutralTarget: [
+      // pages api
       WEBPACK_LAYERS_NAMES.api,
     ],
     clientOnly: [

diff --git a/test/e2e/module-layer/module-layer.test.ts b/test/e2e/module-layer/module-layer.test.ts
@@ -112,15 +112,10 @@ describe('module layer', () => {
         await next.patchFile(pagesApiFile, pagesApiContent)
       })
 
-      it('should error when import client packages in pages/api', async () => {
-        const existingCliOutputLength = next.cliOutput.length
+      it('should not error when import client packages in pages/api', async () => {
         await retry(async () => {
-          await next.fetch('/api/mixed')
-          const newCliOutput = next.cliOutput.slice(existingCliOutputLength)
-          expect(newCliOutput).toContain('./pages/api/mixed.js')
-          expect(newCliOutput).toContain(
-            `'client-only' cannot be imported from a Server Component module. It should only be used from a Client Component.`
-          )
+          const { status } = await next.fetch('/api/mixed')
+          expect(status).toBe(200)
         })
       })
     })

diff --git a/test/e2e/module-layer/pages/api/hello.js b/test/e2e/module-layer/pages/api/hello.js
@@ -1,9 +1,5 @@
 import 'server-only'
-import React from 'react'
 
 export default function handler(req, res) {
-  if (React.useState) {
-    throw new Error('React.useState should not be defined in server layer')
-  }
-  return res.send('pages/api/hello.js:')
+  return res.send('pages/api/hello.js')
 }