Add warning when importing "next" directly (#35884)

* Add warning when importing "next" directly * Apply suggestions from code review Co-authored-by: Balázs Orbán <info@balazsorban.com> * Apply suggestions from code review Co-authored-by: Steven <steven@ceriously.com> * add example Co-authored-by: Balázs Orbán <info@balazsorban.com> Co-authored-by: Steven <steven@ceriously.com>
vercel · Apr 5, 2022 · b1a7b88 · b1a7b88
1 parent 384953b
commit b1a7b88
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 0 deletions.
diff --git a/errors/import-next.md b/errors/import-next.md
@@ -0,0 +1,17 @@
+# Invalid "next" Import
+
+#### Why This Error Occurred
+
+Somewhere in your application, you imported `next` directly which is only meant to be used with legacy custom servers.
+
+You should not import `next` inside of pages or components.
+
+#### Possible Ways to Fix It
+
+Ensure any usage of `import next from "next"` is specific to custom server usage and isn't included in your pages or components.
+
+Also ensure any type imports are kept inside of TypeScript files e.g. ensure `import { PageConfig } from 'next'` isn't used in JavaScript files.
+
+### Useful Links
+
+- [Custom Server Documentation](https://nextjs.org/docs/advanced-features/custom-server)
diff --git a/errors/manifest.json b/errors/manifest.json
@@ -641,6 +641,10 @@
         {
           "title": "client-flush-effects",
           "path": "/errors/client-flush-effects.md"
+        },
+        {
+          "title": "import-next",
+          "path": "/errors/import-next.md"
         }
       ]
     }

diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
@@ -841,6 +841,12 @@ export default async function getBaseWebpackConfig(
       // absolute paths.
       (process.platform === 'win32' && path.win32.isAbsolute(request))
 
+    // make sure import "next" shows a warning when imported
+    // in pages/components
+    if (request === 'next') {
+      return `commonjs next/dist/lib/import-next-warning`
+    }
+
     // Relative requires don't need custom resolution, because they
     // are relative to requests we've already resolved here.
     // Absolute requires (require('/foo')) are extremely uncommon, but

diff --git a/packages/next/lib/import-next-warning.ts b/packages/next/lib/import-next-warning.ts
@@ -0,0 +1,5 @@
+import * as Log from '../build/output/log'
+
+Log.warn(
+  `"next" should not be imported directly, imported in ${module.parent?.filename}\nSee more info here: https://nextjs.org/docs/messages/import-next`
+)
diff --git a/test/production/required-server-files.test.ts b/test/production/required-server-files.test.ts
@@ -19,6 +19,7 @@ describe('should set-up next', () => {
   let server
   let appPort
   let errors = []
+  let stderr = ''
   let requiredFilesManifest
 
   beforeAll(async () => {
@@ -109,6 +110,7 @@ describe('should set-up next', () => {
           if (msg.includes('top-level')) {
             errors.push(msg)
           }
+          stderr += msg
         },
       }
     )
@@ -118,6 +120,14 @@ describe('should set-up next', () => {
     if (server) await killApp(server)
   })
 
+  it('should warn when "next" is imported directly', async () => {
+    await renderViaHTTP(appPort, '/gssp')
+    await check(
+      () => stderr,
+      /"next" should not be imported directly, imported in/
+    )
+  })
+
   it('`compress` should be `true` by default', async () => {
     expect(
       await fs.readFileSync(join(next.testDir, 'standalone/server.js'), 'utf8')

diff --git a/test/production/required-server-files/pages/gssp.js b/test/production/required-server-files/pages/gssp.js
@@ -1,5 +1,7 @@
 import fs from 'fs'
 import path from 'path'
+// eslint-disable-next-line
+import next from 'next' // force a warning during `next build`
 import { useRouter } from 'next/router'
 
 export async function getServerSideProps({ res }) {