Add checking of react versions (vercel#6892)

* Add checking of react versions to make sure it meets the minimum set in peerDependencies * Simplify react check * Update error wording Co-Authored-By: timneutkens <[email protected]> * Add err.sh * Update test-production circleci job name * Add react error message to next-dev-server * Update test for new wording
imekinox · Apr 4, 2019 · 9995f5d · 9995f5d
1 parent 682b3ed
commit 9995f5d
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 3 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -31,15 +31,15 @@ jobs:
             JEST_JUNIT_CLASSNAME: '{filepath}'
       - store_test_results:
           path: ~/repo/reports
-  test-production:
+  test-ie11:
     docker:
       - image: circleci/node:8-browsers
     working_directory: ~/repo
     steps:
       - attach_workspace:
           at: .
       - run:
-          name: Production Tests
+          name: Test in ie11
           command: 'if [[ ! -z $BROWSERSTACK_USERNAME ]]; then yarn testall test/integration/production/; else echo "Not running for PR"; fi'
           environment:
             BROWSERSTACK: 'true'
@@ -68,7 +68,7 @@ workflows:
       - test:
           requires:
             - build
-      - test-production:
+      - test-ie11:
           requires:
             - build
       - deploy:

diff --git a/errors/invalid-react-version.md b/errors/invalid-react-version.md
@@ -0,0 +1,9 @@
+# Invalid React Version
+
+#### Why This Error Occurred
+
+You tried running `next` in a project with an incompatible react version. Next.js uses certain react features that when are unavailable show this error since it can't work without them.
+
+#### Possible Ways to Fix It
+
+Run `npm i react@latest react-dom@latest` or `yarn add react@latest react-dom@latest` in your project and then try running `next` again.
diff --git a/packages/next/bin/next.ts b/packages/next/bin/next.ts
@@ -11,6 +11,12 @@ import arg from 'next/dist/compiled/arg/index.js'
   }
 })
 
+const React = require('react')
+
+if (typeof React.Suspense === 'undefined') {
+  throw new Error(`The version of React you are using is lower than the minimum required version needed for Next.js. Please upgrade "react" and "react-dom": "npm install --save react react-dom" https://err.sh/zeit/next.js/invalid-react-version`)
+}
+
 const defaultCommand = 'dev'
 export type cliCommand = (argv?: string[]) => void
 const commands: {[command: string]: () => Promise<cliCommand>} = {

diff --git a/packages/next/server/next-dev-server.js b/packages/next/server/next-dev-server.js
@@ -7,6 +7,12 @@ import ErrorDebug from './error-debug'
 import AmpHtmlValidator from 'amphtml-validator'
 import { ampValidation } from '../build/output/index'
 
+const React = require('react')
+
+if (typeof React.Suspense === 'undefined') {
+  throw new Error(`The version of React you are using is lower than the minimum required version needed for Next.js. Please upgrade "react" and "react-dom": "npm install --save react react-dom" https://err.sh/zeit/next.js/invalid-react-version`)
+}
+
 export default class DevServer extends Server {
   constructor (options) {
     super(options)

diff --git a/test/unit/handles-incorrect-react.test.js b/test/unit/handles-incorrect-react.test.js
@@ -0,0 +1,15 @@
+/* eslint-env jest */
+import path from 'path'
+
+jest.mock('react', () => ({
+  Suspense: undefined
+}))
+
+const nextDir = path.dirname(require.resolve('next/package'))
+const nextBin = path.join(nextDir, 'dist/bin/next')
+
+describe('Handles Incorrect React Version', () => {
+  it('should throw an error when building with next', async () => {
+    expect(() => require(nextBin)).toThrow(/The version of React you are using is lower than the minimum required version needed for Next\.js\. Please upgrade "react" and "react-dom": "npm install --save react react-dom" https:\/\/err\.sh/)
+  })
+})