diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index 1a0378004daec..e2bc55d487252 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -563,6 +563,10 @@ export default async function getBaseWebpackConfig(
     rewrites.afterFiles.length > 0 ||
     rewrites.fallback.length > 0
 
+  const hasAppDir = !!config.experimental.appDir
+  const hasConcurrentFeatures = hasReactRoot
+  const hasServerComponents = hasAppDir
+
   // Only error in first one compiler (client) once
   if (isClient) {
     if (!hasReactRoot) {
@@ -572,11 +576,13 @@ export default async function getBaseWebpackConfig(
         )
       }
     }
+    if (hasAppDir) {
+      throw new Error(
+        '`experimental.appDir` requires React 18 to be installed.'
+      )
+    }
   }
 
-  const hasAppDir = !!config.experimental.appDir
-  const hasConcurrentFeatures = hasReactRoot
-  const hasServerComponents = hasAppDir
   const disableOptimizedLoading = hasConcurrentFeatures
     ? true
     : config.experimental.disableOptimizedLoading