Add checking of react versions (#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: Ntimneutkens <tim@timneutkens.nl>

* Add err.sh

* Update test-production circleci job name

* Add react error message to next-dev-server

* Update test for new wording

.circleci/config.yml

@@ -31,7 +31,7 @@ jobs:
             JEST_JUNIT_CLASSNAME: '{filepath}'
       - store_test_results:
           path: ~/repo/reports
-  test-production:
+  test-ie11:
     docker:
       - image: circleci/node:8-browsers
     working_directory: ~/repo
@@ -39,7 +39,7 @@ jobs:
       - 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:

errors/invalid-react-version.md

+# 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.

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>} = {

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)

test/unit/handles-incorrect-react.test.js

+/* 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/)
+  })
+})