Fix bundling of Server Actions

packages/next/src/build/webpack-config.ts

@@ -1385,7 +1385,7 @@ export default async function getBaseWebpackConfig(
       // so that the DefinePlugin can inject process.env values.
 
       // Treat next internals as non-external for server layer
-      if (layer === WEBPACK_LAYERS.server) {
+      if (layer === WEBPACK_LAYERS.server || layer === WEBPACK_LAYERS.action) {
         return
       }
 
@@ -1520,7 +1520,7 @@ export default async function getBaseWebpackConfig(
       (isEsm && isAppLayer)
 
     if (/node_modules[/\\].*\.[mc]?js$/.test(res)) {
-      if (layer === WEBPACK_LAYERS.server) {
+      if (layer === WEBPACK_LAYERS.server || layer === WEBPACK_LAYERS.action) {
         // All packages should be bundled for the server layer if they're not opted out.
         // This option takes priority over the transpilePackages option.
 

test/e2e/app-dir/actions/app-action.test.ts

@@ -14,6 +14,7 @@ createNextDescribe(
     files: __dirname,
     dependencies: {
       react: 'latest',
+      nanoid: 'latest',
       'react-dom': 'latest',
       'server-only': 'latest',
     },
@@ -281,6 +282,14 @@ createNextDescribe(
           }
         })
       })
+
+      it('should bundle external libraries if they are on the action layer', async () => {
+        await next.fetch('/client')
+        const pageBundle = await fs.readFile(
+          join(next.testDir, '.next', 'server', 'app', 'client', 'page.js')
+        )
+        expect(pageBundle.toString()).toContain('node_modules/nanoid/index.js')
+      })
     }
 
     describe('Edge SSR', () => {

test/e2e/app-dir/actions/app/client/actions-lib.js

@@ -0,0 +1,9 @@
+'use server'
+
+// Any arbitrary library just to ensure it's bundled.
+// https://github.com/vercel/next.js/pull/51367
+import nanoid from 'nanoid'
+
+export async function test() {
+  console.log(nanoid)
+}

test/e2e/app-dir/actions/app/client/page.js

@@ -3,6 +3,7 @@
 import { useState } from 'react'
 
 import double, { inc, dec, redirectAction, getHeaders } from './actions'
+import { test } from './actions-lib'
 
 export default function Counter() {
   const [count, setCount] = useState(0)
@@ -58,6 +59,9 @@ export default function Counter() {
           submit
         </button>
       </form>
+      <form action={test}>
+        <button>test</button>
+      </form>
     </div>
   )
 }