BREAKING CHANGE: Remove React 17 (#41629)

Next.js 13 will require React 18. In this PR I've only updated the peerDependency and removed the test runs in GH actions. Further cleanup will follow later, this allows us to remove the code supporting it later. ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have a helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have a helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm lint` - [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md) Co-authored-by: Jiachi Liu <4800338+huozhi@users.noreply.github.com>
vercel · Oct 21, 2022 · 14c9376 · 14c9376
1 parent 7102050
commit 14c9376
Show file tree

Hide file tree

Showing 45 changed files with 45 additions and 517 deletions.
diff --git a/.github/workflows/build_test_deploy.yml b/.github/workflows/build_test_deploy.yml
@@ -316,82 +316,6 @@ jobs:
           path: |
             test/traces
 
-  testDevReact17:
-    name: Test Development (react v17)
-    runs-on: ubuntu-latest
-    needs: [build, build-native-test]
-    env:
-      NEXT_TELEMETRY_DISABLED: 1
-      NEXT_TEST_JOB: 1
-      NEXT_TEST_REACT_VERSION: ^17
-    strategy:
-      fail-fast: false
-      matrix:
-        group: [1, 2]
-    steps:
-      - name: Setup node
-        uses: actions/setup-node@v3
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-        with:
-          node-version: 16
-          check-latest: true
-
-      - run: echo ${{needs.build.outputs.docsChange}}
-
-      # https://github.com/actions/virtual-environments/issues/1187
-      - name: tune linux network
-        run: sudo ethtool -K eth0 tx off rx off
-
-      - uses: actions/cache@v3
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-        id: restore-build
-        with:
-          path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}
-
-      - uses: actions/download-artifact@v3
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-        with:
-          name: next-swc-test-binary
-          path: packages/next-swc/native
-
-      - run: npm i -g pnpm@${PNPM_VERSION}
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-
-      - run: npm i -g playwright-chromium@1.22.2 && npx playwright install-deps
-        timeout-minutes: 10
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-
-      - run: npx @replayio/playwright install chromium
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-
-      - run: node run-tests.js --type development --timings -g ${{ matrix.group }}/2
-        name: Run test/development
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-        env:
-          RECORD_REPLAY_METADATA_TEST_RUN_TITLE: testDevReact17 / Group ${{ matrix.group }}
-          RECORD_ALL_CONTENT: 1
-          RECORD_REPLAY: 1
-          RECORD_REPLAY_TEST_METRICS: 1
-          RECORD_REPLAY_WEBHOOK_URL: ${{ secrets.RECORD_REPLAY_WEBHOOK_URL }}
-
-      - uses: replayio/action-upload@v0.4.5
-        if: always()
-        with:
-          api-key: rwk_iKsQnEoQwKd31WAJxgN9ARPFuAlyXlVrDH4uhYpRnti
-          public: true
-          filter: ${{ 'function($v) { $v.metadata.test.result = "failed" }' }}
-
-      - name: Upload test trace
-        if: always()
-        uses: actions/upload-artifact@v3
-        with:
-          name: test-trace
-          if-no-files-found: ignore
-          retention-days: 2
-          path: |
-            test/traces
-
   testDevE2E:
     name: Test Development (E2E)
     runs-on: ubuntu-latest
@@ -471,84 +395,6 @@ jobs:
           path: |
             test/traces
 
-  testDevE2EReact17:
-    name: Test Development (E2E) (react v17)
-    runs-on: ubuntu-latest
-    needs: [build, build-native-test]
-    env:
-      NEXT_TELEMETRY_DISABLED: 1
-      NEXT_TEST_JOB: 1
-      NEXT_TEST_REACT_VERSION: ^17
-      TEST_TIMINGS_TOKEN: ${{ secrets.TEST_TIMINGS_TOKEN }}
-    strategy:
-      fail-fast: false
-      matrix:
-        group: [1, 2, 3]
-    steps:
-      - name: Setup node
-        uses: actions/setup-node@v3
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-        with:
-          node-version: 16
-          check-latest: true
-
-      - run: echo ${{needs.build.outputs.docsChange}}
-
-      # https://github.com/actions/virtual-environments/issues/1187
-      - name: tune linux network
-        run: sudo ethtool -K eth0 tx off rx off
-
-      - uses: actions/cache@v3
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-        id: restore-build
-        with:
-          path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}
-
-      - uses: actions/download-artifact@v3
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-        with:
-          name: next-swc-test-binary
-          path: packages/next-swc/native
-
-      - run: npm i -g pnpm@${PNPM_VERSION}
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-
-      - run: npm i -g playwright-chromium@1.22.2 && npx playwright install-deps
-        timeout-minutes: 10
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-
-      - run: npx @replayio/playwright install chromium
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-
-      - run: node run-tests.js --type e2e --timings -g ${{ matrix.group }}/3
-        name: Run test/e2e (dev)
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-        env:
-          RECORD_REPLAY_METADATA_TEST_RUN_TITLE: testDevE2EReact17 / Group ${{ matrix.group }}
-          RECORD_ALL_CONTENT: 1
-          RECORD_REPLAY: 1
-          NEXT_TEST_MODE: dev
-          RECORD_REPLAY_TEST_METRICS: 1
-          RECORD_REPLAY_WEBHOOK_URL: ${{ secrets.RECORD_REPLAY_WEBHOOK_URL }}
-
-      - uses: replayio/action-upload@v0.4.5
-        if: always()
-        with:
-          api-key: rwk_iKsQnEoQwKd31WAJxgN9ARPFuAlyXlVrDH4uhYpRnti
-          public: true
-          filter: ${{ 'function($v) { $v.metadata.test.result = "failed" }' }}
-
-      - name: Upload test trace
-        if: always()
-        uses: actions/upload-artifact@v3
-        with:
-          name: test-trace
-          if-no-files-found: ignore
-          retention-days: 2
-          path: |
-            test/traces
-
   testProd:
     name: Test Production
     runs-on: ubuntu-latest
@@ -616,72 +462,6 @@ jobs:
           public: true
           filter: ${{ 'function($v) { $v.metadata.test.result = "failed" }' }}
 
-  testProdReact17:
-    name: Test Production (react v17)
-    runs-on: ubuntu-latest
-    needs: [build, build-native-test]
-    env:
-      NEXT_TELEMETRY_DISABLED: 1
-      NEXT_TEST_JOB: 1
-      NEXT_TEST_REACT_VERSION: ^17
-    strategy:
-      fail-fast: false
-      matrix:
-        group: [1, 2]
-    steps:
-      - name: Setup node
-        uses: actions/setup-node@v3
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-        with:
-          node-version: 16
-          check-latest: true
-
-      - run: echo ${{needs.build.outputs.docsChange}}
-
-      # https://github.com/actions/virtual-environments/issues/1187
-      - name: tune linux network
-        run: sudo ethtool -K eth0 tx off rx off
-
-      - uses: actions/cache@v3
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-        id: restore-build
-        with:
-          path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}
-
-      - uses: actions/download-artifact@v3
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-        with:
-          name: next-swc-test-binary
-          path: packages/next-swc/native
-
-      - run: npm i -g pnpm@${PNPM_VERSION}
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-
-      - run: npm i -g playwright-chromium@1.22.2 && npx playwright install-deps
-        timeout-minutes: 10
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-
-      - run: npx @replayio/playwright install chromium
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-
-      - run: node run-tests.js --type production --timings -g ${{ matrix.group }}/2
-        name: Run test/production
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-        env:
-          RECORD_REPLAY_METADATA_TEST_RUN_TITLE: testProdReact17 / Group ${{ matrix.group }}
-          RECORD_ALL_CONTENT: 1
-          RECORD_REPLAY: 1
-          RECORD_REPLAY_TEST_METRICS: 1
-          RECORD_REPLAY_WEBHOOK_URL: ${{ secrets.RECORD_REPLAY_WEBHOOK_URL }}
-
-      - uses: replayio/action-upload@v0.4.5
-        if: always()
-        with:
-          api-key: rwk_iKsQnEoQwKd31WAJxgN9ARPFuAlyXlVrDH4uhYpRnti
-          public: true
-          filter: ${{ 'function($v) { $v.metadata.test.result = "failed" }' }}
-
   testProdE2E:
     name: Test Production (E2E)
     runs-on: ubuntu-latest
@@ -751,74 +531,6 @@ jobs:
           public: true
           filter: ${{ 'function($v) { $v.metadata.test.result = "failed" }' }}
 
-  testProdE2EReact17:
-    name: Test Production (E2E) (react v17)
-    runs-on: ubuntu-latest
-    needs: [build, build-native-test]
-    env:
-      NEXT_TELEMETRY_DISABLED: 1
-      NEXT_TEST_JOB: 1
-      NEXT_TEST_REACT_VERSION: ^17
-      TEST_TIMINGS_TOKEN: ${{ secrets.TEST_TIMINGS_TOKEN }}
-    strategy:
-      fail-fast: false
-      matrix:
-        group: [1, 2, 3]
-    steps:
-      - name: Setup node
-        uses: actions/setup-node@v3
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-        with:
-          node-version: ${{ matrix.node }}
-          check-latest: true
-
-      - run: echo ${{needs.build.outputs.docsChange}}
-
-      # https://github.com/actions/virtual-environments/issues/1187
-      - name: tune linux network
-        run: sudo ethtool -K eth0 tx off rx off
-
-      - uses: actions/cache@v3
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-        id: restore-build
-        with:
-          path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}
-
-      - uses: actions/download-artifact@v3
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-        with:
-          name: next-swc-test-binary
-          path: packages/next-swc/native
-
-      - run: npm i -g pnpm@${PNPM_VERSION}
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-
-      - run: npm i -g playwright-chromium@1.22.2 && npx playwright install-deps
-        timeout-minutes: 10
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-
-      - run: npx @replayio/playwright install chromium
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-
-      - run: node run-tests.js --type e2e --timings -g ${{ matrix.group }}/3
-        name: Run test/e2e (production)
-        if: ${{needs.build.outputs.docsChange == 'nope'}}
-        env:
-          RECORD_REPLAY_METADATA_TEST_RUN_TITLE: testProdE2EReact17 / Group ${{ matrix.group }}
-          RECORD_ALL_CONTENT: 1
-          RECORD_REPLAY: 1
-          NEXT_TEST_MODE: start
-          RECORD_REPLAY_TEST_METRICS: 1
-          RECORD_REPLAY_WEBHOOK_URL: ${{ secrets.RECORD_REPLAY_WEBHOOK_URL }}
-
-      - uses: replayio/action-upload@v0.4.5
-        if: always()
-        with:
-          api-key: rwk_iKsQnEoQwKd31WAJxgN9ARPFuAlyXlVrDH4uhYpRnti
-          public: true
-          filter: ${{ 'function($v) { $v.metadata.test.result = "failed" }' }}
-
   testIntegration:
     name: Test Integration
     runs-on: ubuntu-latest

diff --git a/bench/minimal-server/start.js b/bench/minimal-server/start.js
@@ -1,4 +1,3 @@
-process.env.__NEXT_REACT_CHANNEL = 'exp'
 process.env.NODE_ENV = 'production'
 
 require('../../test/lib/react-channel-require-hook')

diff --git a/docs/upgrading.md b/docs/upgrading.md
@@ -10,6 +10,8 @@ The [Supported Browsers](/docs/basic-features/supported-browsers-features.md) ha
 
 The minimum Node.js version has been bumped from 12.22.0 to 14.0.0, since 12.x has reached end-of-life.
 
+The minimum React version has been bumped from 17.0.2 to 18.2.0.
+
 The `swcMinify` configuration property was changed from `false` to `true`. See [Next.js Compiler](/docs/advanced-features/compiler.md) for more info.
 
 The `next/image` import was renamed to `next/legacy/image`. The `next/future/image` import was renamed to `next/image`.

diff --git a/examples/auth-with-stytch/package.json b/examples/auth-with-stytch/package.json
@@ -9,8 +9,8 @@
     "@stytch/stytch-react": "^3.0.3",
     "next": "12.0.7",
     "next-iron-session": "^4.2.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "stytch": "^3.6.1"
   },
   "devDependencies": {

diff --git a/examples/cms-drupal/package.json b/examples/cms-drupal/package.json
@@ -10,8 +10,8 @@
     "date-fns": "2.28.0",
     "next": "latest",
     "next-drupal": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
     "autoprefixer": "10.4.2",

diff --git a/examples/cms-keystonejs-embedded/package.json b/examples/cms-keystonejs-embedded/package.json
@@ -10,8 +10,8 @@
     "@keystone-next/fields": "^9.0.0",
     "@keystone-next/keystone": "^18.0.0",
     "next": "10.2.2",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
     "@types/react": "^17.0.6",

diff --git a/examples/with-eslint/package.json b/examples/with-eslint/package.json
@@ -8,8 +8,8 @@
   },
   "dependencies": {
     "next": "latest",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "eslint": "^7.24.0",

diff --git a/examples/with-formspree/package.json b/examples/with-formspree/package.json
@@ -8,7 +8,7 @@
   "dependencies": {
     "@formspree/react": "latest",
     "next": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   }
 }
diff --git a/examples/with-jotai/package.json b/examples/with-jotai/package.json
@@ -8,8 +8,8 @@
   "dependencies": {
     "jotai": "1.7.3",
     "next": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
     "@types/react": "17.0.16",