Make sure to handle "next" import gracefully (#11733)

* Make sure to handle "next" import gracefully

* Update test file

packages/next/build/webpack-config.ts

@@ -473,10 +473,17 @@ export default async function getBaseWebpackConfig(
   )
   let webpackConfig: webpack.Configuration = {
     externals: !isServer
-      ? undefined
+      ? // make sure importing "next" is handled gracefully for client
+        // bundles in case a user imported types and it wasn't removed
+        // TODO: should we warn/error for this instead?
+        ['next']
       : !isServerless
       ? [
           (context, request, callback) => {
+            if (request === 'next') {
+              return callback(undefined, `commonjs ${request}`)
+            }
+
             const notExternalModules = [
               'next/app',
               'next/document',

test/integration/production/pages/next-import.js

@@ -0,0 +1,14 @@
+import Link from 'next/link'
+// Leave below import, testing that importing "next"
+// doesn't stall the build
+// eslint-disable-next-line no-unused-vars
+import next from 'next'
+
+export default () => (
+  <div>
+    <Link href="/about">
+      <a>About Page</a>
+    </Link>
+    <p className="index-page">Hello World</p>
+  </div>
+)