Fix shared action module in two layers

packages/next/src/build/webpack/plugins/flight-client-entry-plugin.ts

@@ -353,9 +353,15 @@ export class ClientReferenceEntryPlugin {
       }
     })
 
+    const createdActions = new Set<string>()
     for (const [name, actionEntryImports] of Object.entries(
       actionMapsPerEntry
     )) {
+      for (const [dep, actionNames] of actionEntryImports) {
+        for (const actionName of actionNames) {
+          createdActions.add(name + '@' + dep + '@' + actionName)
+        }
+      }
       addActionEntryList.push(
         this.injectActionEntry({
           compiler,
@@ -453,16 +459,38 @@ export class ClientReferenceEntryPlugin {
       for (const [name, actionEntryImports] of Object.entries(
         actionMapsPerClientEntry
       )) {
-        addedClientActionEntryList.push(
-          this.injectActionEntry({
-            compiler,
-            compilation,
-            actions: actionEntryImports,
-            entryName: name,
-            bundlePath: name,
-            fromClient: true,
-          })
-        )
+        // If an action method is already created in the server layer, we don't
+        // need to create it again in the action layer.
+        // This is to avoid duplicate action instances and make sure the module
+        // state is shared.
+        let remainingClientImportedActions = false
+        const remainingActionEntryImports = new Map<string, string[]>()
+        for (const [dep, actionNames] of actionEntryImports) {
+          const remainingActionNames = []
+          for (const actionName of actionNames) {
+            const id = name + '@' + dep + '@' + actionName
+            if (!createdActions.has(id)) {
+              remainingActionNames.push(actionName)
+            }
+          }
+          if (remainingActionNames.length > 0) {
+            remainingActionEntryImports.set(dep, remainingActionNames)
+            remainingClientImportedActions = true
+          }
+        }
+
+        if (remainingClientImportedActions) {
+          addedClientActionEntryList.push(
+            this.injectActionEntry({
+              compiler,
+              compilation,
+              actions: remainingActionEntryImports,
+              entryName: name,
+              bundlePath: name,
+              fromClient: true,
+            })
+          )
+        }
       }
 
       return Promise.all(addedClientActionEntryList)

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

@@ -237,6 +237,19 @@ createNextDescribe(
       await check(() => browser.elementByCss('h1').text(), '3')
     })
 
+    it('should support importing the same action module instance in both server and action layers', async () => {
+      const browser = await next.browser('/shared')
+
+      const v = await browser.elementByCss('#value').text()
+      expect(v).toBe('Value = 0')
+
+      await browser.elementByCss('#server-inc').click()
+      await check(() => browser.elementByCss('#value').text(), 'Value = 1')
+
+      await browser.elementByCss('#client-inc').click()
+      await check(() => browser.elementByCss('#value').text(), 'Value = 2')
+    })
+
     if (isNextStart) {
       it('should not expose action content in sourcemaps', async () => {
         const sourcemap = (

test/e2e/app-dir/actions/app/shared/action.js

@@ -0,0 +1,14 @@
+'use server'
+
+import { revalidatePath } from 'next/cache'
+
+let x = 0
+
+export async function inc() {
+  ++x
+  revalidatePath('/shared')
+}
+
+export async function get() {
+  return x
+}

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

@@ -0,0 +1,13 @@
+'use client'
+
+import { inc } from './action'
+
+export function Client() {
+  return (
+    <form>
+      <button id="client-inc" formAction={inc}>
+        Inc
+      </button>
+    </form>
+  )
+}

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

@@ -0,0 +1,13 @@
+import { Server } from './server'
+import { Client } from './client'
+
+export default async function Page() {
+  return (
+    <>
+      <hr />
+      <Server />
+      <hr />
+      <Client />
+    </>
+  )
+}

test/e2e/app-dir/actions/app/shared/server.js

@@ -0,0 +1,15 @@
+import { inc, get } from './action'
+
+export async function Server() {
+  const x = await get()
+  return (
+    <>
+      <h2 id="value">Value = {x}</h2>
+      <form>
+        <button id="server-inc" formAction={inc}>
+          Inc
+        </button>
+      </form>
+    </>
+  )
+}