warn to use experimental react to enable actions

vercel · Apr 5, 2023 · 5190a4c · 5190a4c
1 parent 1fbbba6
commit 5190a4c
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 4 deletions.
diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts
@@ -2248,6 +2248,7 @@ export default async function getBaseWebpackConfig(
               appDir,
               dev,
               isEdgeServer,
+              useExperimentalReact,
             })),
       hasAppDir &&
         !isClient &&

diff --git a/packages/next/src/build/webpack/plugins/flight-client-entry-plugin.ts b/packages/next/src/build/webpack/plugins/flight-client-entry-plugin.ts
@@ -32,11 +32,13 @@ import {
 import { traverseModules, forEachEntryModule } from '../utils'
 import { normalizePathSep } from '../../../shared/lib/page-path/normalize-path-sep'
 import { getProxiedPluginState } from '../../build-context'
+import { warnOnce } from '../../../shared/lib/utils/warn-once'
 
 interface Options {
   dev: boolean
   appDir: string
   isEdgeServer: boolean
+  useExperimentalReact: boolean
 }
 
 const PLUGIN_NAME = 'ClientEntryPlugin'
@@ -75,11 +77,13 @@ export class ClientReferenceEntryPlugin {
   dev: boolean
   appDir: string
   isEdgeServer: boolean
+  useExperimentalReact: boolean
 
   constructor(options: Options) {
     this.dev = options.dev
     this.appDir = options.appDir
     this.isEdgeServer = options.isEdgeServer
+    this.useExperimentalReact = options.useExperimentalReact
   }
 
   apply(compiler: webpack.Compiler) {
@@ -241,6 +245,11 @@ export class ClientReferenceEntryPlugin {
       }
 
       if (actionEntryImports.size > 0) {
+        if (!this.useExperimentalReact) {
+          warnOnce(
+            '\nServer Actions require `experimental.experimentalReact` option to be enabled in your Next.js config.\n'
+          )
+        }
         addActionEntryList.push(
           this.injectActionEntry({
             compiler,

diff --git a/test/e2e/app-dir/actions/app/server/form.js b/test/e2e/app-dir/actions/app/server/form.js
@@ -14,16 +14,14 @@ export default function Form() {
   return (
     <>
       <hr />
-      <form action="" method="POST">
+      <form method="POST" action={action}>
         <input type="text" name="name" id="name" required />
-        <input type="text" name="$$id" value={action.$$id} hidden readOnly />
         <button type="submit" id="submit">
           Submit
         </button>
       </form>
       <hr />
-      <form action="" method="POST">
-        <input type="text" name="$$id" value={nowhere.$$id} hidden readOnly />
+      <form method="POST" action={nowhere}>
         <button type="submit" id="nowhere">
           Go nowhere
         </button>

diff --git a/test/e2e/app-dir/actions/next.config.js b/test/e2e/app-dir/actions/next.config.js
@@ -1,5 +1,7 @@
+/** @type {import('next').NextConfig} */
 module.exports = {
   experimental: {
     appDir: true,
+    experimentalReact: true,
   },
 }