From 9995f5d5183b39de7d055b5872671b7c700e113f Mon Sep 17 00:00:00 2001
From: JJ Kasper <jj@jjsweb.site>
Date: Thu, 4 Apr 2019 16:47:17 -0500
Subject: [PATCH] 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: timneutkens <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                      |  6 +++---
 errors/invalid-react-version.md           |  9 +++++++++
 packages/next/bin/next.ts                 |  6 ++++++
 packages/next/server/next-dev-server.js   |  6 ++++++
 test/unit/handles-incorrect-react.test.js | 15 +++++++++++++++
 5 files changed, 39 insertions(+), 3 deletions(-)
 create mode 100644 errors/invalid-react-version.md
 create mode 100644 test/unit/handles-incorrect-react.test.js

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 227627b956083..89a3dd934056a 100644
--- a/.circleci/config.yml
+++ b/.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:
diff --git a/errors/invalid-react-version.md b/errors/invalid-react-version.md
new file mode 100644
index 0000000000000..4746d60e56508
--- /dev/null
+++ 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
index 2a3c8d8130e54..c0294b36d0821 100755
--- 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
index 436a268b98655..71d29c820044c 100644
--- 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
new file mode 100644
index 0000000000000..496259d8c9e48
--- /dev/null
+++ 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/)
+  })
+})