From 3c319fb5360ec818ab7998d8cd5da1a306adc466 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Fri, 21 Oct 2022 20:20:10 +0200 Subject: [PATCH 1/6] BREAKING CHANGE: Remove React 17 --- .github/workflows/build_test_deploy.yml | 288 ------------------ packages/next/package.json | 4 +- test/e2e/app-dir/app-alias.test.ts | 5 - test/e2e/app-dir/app-edge.test.ts | 5 - test/e2e/app-dir/app-middleware.test.ts | 5 - test/e2e/app-dir/app-static.test.ts | 4 - test/e2e/app-dir/asset-prefix.test.ts | 4 - .../app-dir/back-button-download-bug.test.ts | 4 - test/e2e/app-dir/index.test.ts | 4 - test/e2e/app-dir/next-font.test.ts | 4 - test/e2e/app-dir/next-image.test.ts | 4 - test/e2e/app-dir/prefetching.test.ts | 4 - test/e2e/app-dir/rendering.test.ts | 5 - test/e2e/app-dir/root-layout.test.ts | 4 - test/e2e/app-dir/trailingslash.test.ts | 4 - test/e2e/app-dir/vercel-analytics.test.ts | 4 - test/e2e/app-dir/with-babel.test.ts | 4 - .../index.test.ts | 5 - test/production/jest/index.test.ts | 6 - .../production/jest/new-link-behavior.test.ts | 6 - test/production/jest/relay/relay-jest.test.ts | 6 - .../remove-react-properties-jest.test.ts | 6 - 22 files changed, 2 insertions(+), 383 deletions(-) diff --git a/.github/workflows/build_test_deploy.yml b/.github/workflows/build_test_deploy.yml index 1d369657b7b77..dd96a4a13bc69 100644 --- 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/packages/next/package.json b/packages/next/package.json index 070c756fd81af..063a463b05ca8 100644 --- a/packages/next/package.json +++ b/packages/next/package.json @@ -84,8 +84,8 @@ "peerDependencies": { "fibers": ">= 3.1.0", "node-sass": "^6.0.0 || ^7.0.0", - "react": "^17.0.2 || ^18.0.0-0", - "react-dom": "^17.0.2 || ^18.0.0-0", + "react": "^18.0.0-0", + "react-dom": "^18.0.0-0", "sass": "^1.3.0" }, "peerDependenciesMeta": { diff --git a/test/e2e/app-dir/app-alias.test.ts b/test/e2e/app-dir/app-alias.test.ts index 97cfe86fab391..b6c0bf0697988 100644 --- a/test/e2e/app-dir/app-alias.test.ts +++ b/test/e2e/app-dir/app-alias.test.ts @@ -9,11 +9,6 @@ describe('app-dir alias handling', () => { return } - if (process.env.NEXT_TEST_REACT_VERSION === '^17') { - it('should skip for react v17', () => {}) - return - } - let next: NextInstance beforeAll(async () => { diff --git a/test/e2e/app-dir/app-edge.test.ts b/test/e2e/app-dir/app-edge.test.ts index 94d1c17b81e48..f6c317e6894e5 100644 --- a/test/e2e/app-dir/app-edge.test.ts +++ b/test/e2e/app-dir/app-edge.test.ts @@ -9,11 +9,6 @@ describe('app-dir edge SSR', () => { return } - if (process.env.NEXT_TEST_REACT_VERSION === '^17') { - it('should skip for react v17', () => {}) - return - } - let next: NextInstance beforeAll(async () => { diff --git a/test/e2e/app-dir/app-middleware.test.ts b/test/e2e/app-dir/app-middleware.test.ts index b92ffa9352e9e..91b79a72f52af 100644 --- a/test/e2e/app-dir/app-middleware.test.ts +++ b/test/e2e/app-dir/app-middleware.test.ts @@ -12,11 +12,6 @@ describe('app-dir with middleware', () => { return } - if (process.env.NEXT_TEST_REACT_VERSION === '^17') { - it('should skip for react v17', () => {}) - return - } - let next: NextInstance afterAll(() => next.destroy()) diff --git a/test/e2e/app-dir/app-static.test.ts b/test/e2e/app-dir/app-static.test.ts index 6ace29735bca2..790e7af672390 100644 --- a/test/e2e/app-dir/app-static.test.ts +++ b/test/e2e/app-dir/app-static.test.ts @@ -15,10 +15,6 @@ describe('app-dir static/dynamic handling', () => { return } - if (process.env.NEXT_TEST_REACT_VERSION === '^17') { - it('should skip for react v17', () => {}) - return - } let next: NextInstance beforeAll(async () => { diff --git a/test/e2e/app-dir/asset-prefix.test.ts b/test/e2e/app-dir/asset-prefix.test.ts index 412ade3ce57ea..d4df4f1cc3414 100644 --- a/test/e2e/app-dir/asset-prefix.test.ts +++ b/test/e2e/app-dir/asset-prefix.test.ts @@ -11,10 +11,6 @@ describe('app-dir assetPrefix handling', () => { return } - if (process.env.NEXT_TEST_REACT_VERSION === '^17') { - it('should skip for react v17', () => {}) - return - } let next: NextInstance beforeAll(async () => { diff --git a/test/e2e/app-dir/back-button-download-bug.test.ts b/test/e2e/app-dir/back-button-download-bug.test.ts index 6b33d5e9fff21..707a6062bc07b 100644 --- a/test/e2e/app-dir/back-button-download-bug.test.ts +++ b/test/e2e/app-dir/back-button-download-bug.test.ts @@ -9,10 +9,6 @@ describe('app-dir back button download bug', () => { return } - if (process.env.NEXT_TEST_REACT_VERSION === '^17') { - it('should skip for react v17', () => {}) - return - } let next: NextInstance beforeAll(async () => { diff --git a/test/e2e/app-dir/index.test.ts b/test/e2e/app-dir/index.test.ts index f9de21f69d17b..53987c63fc717 100644 --- a/test/e2e/app-dir/index.test.ts +++ b/test/e2e/app-dir/index.test.ts @@ -21,10 +21,6 @@ describe('app dir', () => { return } - if (process.env.NEXT_TEST_REACT_VERSION === '^17') { - it('should skip for react v17', () => {}) - return - } let next: NextInstance function runTests() { diff --git a/test/e2e/app-dir/next-font.test.ts b/test/e2e/app-dir/next-font.test.ts index faab97b58644d..36d7f31907efb 100644 --- a/test/e2e/app-dir/next-font.test.ts +++ b/test/e2e/app-dir/next-font.test.ts @@ -12,10 +12,6 @@ describe('app dir next-font', () => { return } - if (process.env.NEXT_TEST_REACT_VERSION === '^17') { - it('should skip for react v17', () => {}) - return - } let next: NextInstance beforeAll(async () => { diff --git a/test/e2e/app-dir/next-image.test.ts b/test/e2e/app-dir/next-image.test.ts index 871170b5d5ed4..017ed7d2eca16 100644 --- a/test/e2e/app-dir/next-image.test.ts +++ b/test/e2e/app-dir/next-image.test.ts @@ -11,10 +11,6 @@ describe('app dir next-image', () => { return } - if (process.env.NEXT_TEST_REACT_VERSION === '^17') { - it('should skip for react v17', () => {}) - return - } let next: NextInstance beforeAll(async () => { diff --git a/test/e2e/app-dir/prefetching.test.ts b/test/e2e/app-dir/prefetching.test.ts index 317bec839e846..c50594b4d18e1 100644 --- a/test/e2e/app-dir/prefetching.test.ts +++ b/test/e2e/app-dir/prefetching.test.ts @@ -11,10 +11,6 @@ describe('app dir prefetching', () => { return } - if (process.env.NEXT_TEST_REACT_VERSION === '^17') { - it('should skip for react v17', () => {}) - return - } let next: NextInstance beforeAll(async () => { diff --git a/test/e2e/app-dir/rendering.test.ts b/test/e2e/app-dir/rendering.test.ts index 494a8494eadd3..28350408f17e6 100644 --- a/test/e2e/app-dir/rendering.test.ts +++ b/test/e2e/app-dir/rendering.test.ts @@ -5,11 +5,6 @@ import path from 'path' import cheerio from 'cheerio' describe('app dir rendering', () => { - if (process.env.NEXT_TEST_REACT_VERSION === '^17') { - it('should skip for react v17', () => {}) - return - } - if ((global as any).isNextDeploy) { it('should skip next deploy for now', () => {}) return diff --git a/test/e2e/app-dir/root-layout.test.ts b/test/e2e/app-dir/root-layout.test.ts index 5a344f51de9a0..7559b1eab082c 100644 --- a/test/e2e/app-dir/root-layout.test.ts +++ b/test/e2e/app-dir/root-layout.test.ts @@ -12,10 +12,6 @@ describe('app-dir root layout', () => { return } - if (process.env.NEXT_TEST_REACT_VERSION === '^17') { - it('should skip for react v17', () => {}) - return - } let next: NextInstance beforeAll(async () => { diff --git a/test/e2e/app-dir/trailingslash.test.ts b/test/e2e/app-dir/trailingslash.test.ts index 0b8ca82f75532..960c731e642f4 100644 --- a/test/e2e/app-dir/trailingslash.test.ts +++ b/test/e2e/app-dir/trailingslash.test.ts @@ -11,10 +11,6 @@ describe('app-dir trailingSlash handling', () => { return } - if (process.env.NEXT_TEST_REACT_VERSION === '^17') { - it('should skip for react v17', () => {}) - return - } let next: NextInstance beforeAll(async () => { diff --git a/test/e2e/app-dir/vercel-analytics.test.ts b/test/e2e/app-dir/vercel-analytics.test.ts index 0e6e71d99b963..f6862ac4aa33d 100644 --- a/test/e2e/app-dir/vercel-analytics.test.ts +++ b/test/e2e/app-dir/vercel-analytics.test.ts @@ -12,10 +12,6 @@ describe('vercel analytics', () => { return } - if (process.env.NEXT_TEST_REACT_VERSION === '^17') { - it('should skip for react v17', () => {}) - return - } let next: NextInstance function runTests({ assetPrefix }: { assetPrefix?: boolean }) { diff --git a/test/e2e/app-dir/with-babel.test.ts b/test/e2e/app-dir/with-babel.test.ts index 6244e00c7ed62..77e95497a1e2f 100644 --- a/test/e2e/app-dir/with-babel.test.ts +++ b/test/e2e/app-dir/with-babel.test.ts @@ -10,10 +10,6 @@ describe('with babel', () => { return } - if (process.env.NEXT_TEST_REACT_VERSION === '^17') { - it('should skip for react v17', () => {}) - return - } let next: NextInstance beforeAll(async () => { diff --git a/test/e2e/edge-render-getserversideprops/index.test.ts b/test/e2e/edge-render-getserversideprops/index.test.ts index 74a4c4b4c92c3..c3ea23aca7eda 100644 --- a/test/e2e/edge-render-getserversideprops/index.test.ts +++ b/test/e2e/edge-render-getserversideprops/index.test.ts @@ -8,11 +8,6 @@ import escapeStringRegexp from 'escape-string-regexp' describe('edge-render-getserversideprops', () => { let next: NextInstance - if (process.env.NEXT_TEST_REACT_VERSION === '^17') { - it('should skip for react v17', () => {}) - return - } - beforeAll(async () => { next = await createNext({ files: new FileRef(join(__dirname, 'app')), diff --git a/test/production/jest/index.test.ts b/test/production/jest/index.test.ts index e7a8e09d748d7..5b831c9026097 100644 --- a/test/production/jest/index.test.ts +++ b/test/production/jest/index.test.ts @@ -5,12 +5,6 @@ import { renderViaHTTP } from 'next-test-utils' describe('next/jest', () => { let next: NextInstance - if (process.env.NEXT_TEST_REACT_VERSION === '^17') { - // react testing library is specific to react version - it('should bail on react v17', () => {}) - return - } - beforeAll(async () => { next = await createNext({ files: { diff --git a/test/production/jest/new-link-behavior.test.ts b/test/production/jest/new-link-behavior.test.ts index 75da74a2c588e..9e05f15725703 100644 --- a/test/production/jest/new-link-behavior.test.ts +++ b/test/production/jest/new-link-behavior.test.ts @@ -4,12 +4,6 @@ import { NextInstance } from 'test/lib/next-modes/base' describe('next/jest newLinkBehavior', () => { let next: NextInstance - if (process.env.NEXT_TEST_REACT_VERSION === '^17') { - // react testing library is specific to react version - it('should bail on react v17', () => {}) - return - } - beforeAll(async () => { next = await createNext({ files: { diff --git a/test/production/jest/relay/relay-jest.test.ts b/test/production/jest/relay/relay-jest.test.ts index d4de223629108..d829a323fe421 100644 --- a/test/production/jest/relay/relay-jest.test.ts +++ b/test/production/jest/relay/relay-jest.test.ts @@ -7,12 +7,6 @@ const appDir = path.join(__dirname, 'app') describe('next/jest', () => { let next: NextInstance - if (process.env.NEXT_TEST_REACT_VERSION === '^17') { - // react testing library is specific to react version - it('should bail on react v17', () => {}) - return - } - beforeAll(async () => { next = await createNext({ files: { diff --git a/test/production/jest/remove-react-properties/remove-react-properties-jest.test.ts b/test/production/jest/remove-react-properties/remove-react-properties-jest.test.ts index 576fb43af3921..039365f1c69f3 100644 --- a/test/production/jest/remove-react-properties/remove-react-properties-jest.test.ts +++ b/test/production/jest/remove-react-properties/remove-react-properties-jest.test.ts @@ -8,12 +8,6 @@ const appDir = path.join(__dirname, 'app') describe('next/jest', () => { let next: NextInstance - if (process.env.NEXT_TEST_REACT_VERSION === '^17') { - // react testing library is specific to react version - it('should bail on react v17', () => {}) - return - } - beforeAll(async () => { next = await createNext({ files: { From 63b01dc8ac82e25b87cda5e415c16f4ac5bac649 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Fri, 21 Oct 2022 20:57:55 +0200 Subject: [PATCH 2/6] Remove __NEXT_REACT_CHANNEL --- bench/minimal-server/start.js | 1 - package.json | 1 - packages/next/build/webpack-config.ts | 6 +- .../test/index.test.js | 5 +- .../react-18-invalid-config/.gitignore | 1 - .../react-18-invalid-config/components/foo.js | 1 - .../react-18-invalid-config/index.test.js | 64 ------------------- .../react-18-invalid-config/next.config.js | 1 - .../react-18-invalid-config/pages/dynamic.js | 12 ---- .../react-18-invalid-config/pages/index.js | 3 - test/lib/react-channel-require-hook.js | 2 +- 11 files changed, 4 insertions(+), 93 deletions(-) delete mode 100644 test/integration/react-18-invalid-config/.gitignore delete mode 100644 test/integration/react-18-invalid-config/components/foo.js delete mode 100644 test/integration/react-18-invalid-config/index.test.js delete mode 100644 test/integration/react-18-invalid-config/next.config.js delete mode 100644 test/integration/react-18-invalid-config/pages/dynamic.js delete mode 100644 test/integration/react-18-invalid-config/pages/index.js diff --git a/bench/minimal-server/start.js b/bench/minimal-server/start.js index ceee4f2e235a9..da3f91839d0c3 100644 --- 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/package.json b/package.json index ee7fcf8a55073..f35326d372399 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,6 @@ "lint-staged": "lint-staged", "next-with-deps": "./scripts/next-with-deps.sh", "next": "node --trace-deprecation --enable-source-maps packages/next/dist/bin/next", - "next-react-17": "__NEXT_REACT_CHANNEL=17 node --trace-deprecation --enable-source-maps -r ./test/lib/react-channel-require-hook.js packages/next/dist/bin/next", "next-no-sourcemaps": "node --trace-deprecation packages/next/dist/bin/next", "clean-trace-jaeger": "rm -rf test/integration/basic/.next && TRACE_TARGET=JAEGER node --trace-deprecation --enable-source-maps packages/next/dist/bin/next build test/integration/basic", "debug": "node --inspect packages/next/dist/bin/next", diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts index d74fea3d98337..f69e72299c5db 100644 --- a/packages/next/build/webpack-config.ts +++ b/packages/next/build/webpack-config.ts @@ -574,11 +574,7 @@ export default async function getBaseWebpackConfig( // Only error in first one compiler (client) once if (isClient) { if (!hasReactRoot) { - if (config.experimental.runtime) { - throw new Error( - '`experimental.runtime` requires React 18 to be installed.' - ) - } + throw new Error('Next.js requires React 18 to be installed.') } } diff --git a/test/integration/custom-error-page-exception/test/index.test.js b/test/integration/custom-error-page-exception/test/index.test.js index a8b540ab11eb1..da579761ef751 100644 --- a/test/integration/custom-error-page-exception/test/index.test.js +++ b/test/integration/custom-error-page-exception/test/index.test.js @@ -9,16 +9,15 @@ const nodeArgs = ['-r', join(appDir, '../../lib/react-channel-require-hook.js')] let appPort let app -describe('Custom error page exception', () => { +// TODO: re-enable with React 18 +describe.skip('Custom error page exception', () => { beforeAll(async () => { await nextBuild(appDir, undefined, { nodeArgs, - env: { __NEXT_REACT_CHANNEL: '17' }, }) appPort = await findPort() app = await nextStart(appDir, appPort, { nodeArgs, - env: { __NEXT_REACT_CHANNEL: '17' }, }) }) afterAll(() => killApp(app)) diff --git a/test/integration/react-18-invalid-config/.gitignore b/test/integration/react-18-invalid-config/.gitignore deleted file mode 100644 index b512c09d47662..0000000000000 --- a/test/integration/react-18-invalid-config/.gitignore +++ /dev/null @@ -1 +0,0 @@ -node_modules \ No newline at end of file diff --git a/test/integration/react-18-invalid-config/components/foo.js b/test/integration/react-18-invalid-config/components/foo.js deleted file mode 100644 index f759e165008e3..0000000000000 --- a/test/integration/react-18-invalid-config/components/foo.js +++ /dev/null @@ -1 +0,0 @@ -export default () => 'foo' diff --git a/test/integration/react-18-invalid-config/index.test.js b/test/integration/react-18-invalid-config/index.test.js deleted file mode 100644 index 107e07bcdef2f..0000000000000 --- a/test/integration/react-18-invalid-config/index.test.js +++ /dev/null @@ -1,64 +0,0 @@ -/* eslint-env jest */ - -import fs from 'fs-extra' -import { join } from 'path' -import { File, nextBuild } from 'next-test-utils' - -const appDir = __dirname -const nodeArgs = ['-r', join(appDir, '../../lib/react-channel-require-hook.js')] -const reactDomPackagePah = join(appDir, 'node_modules/react-dom') -const nextConfig = new File(join(appDir, 'next.config.js')) - -function writeNextConfig(config) { - const content = ` - module.exports = { experimental: ${JSON.stringify(config)} } - ` - nextConfig.write(content) -} - -describe('Invalid react 18 webpack config', () => { - it('should install react 18 when `experimental.runtime` is enabled', async () => { - writeNextConfig({ - runtime: 'experimental-edge', - }) - const { stderr } = await nextBuild(appDir, [], { - stderr: true, - nodeArgs, - env: { __NEXT_REACT_CHANNEL: '17' }, - }) - nextConfig.restore() - - expect(stderr).toContain( - '`experimental.runtime` requires React 18 to be installed.' - ) - }) -}) - -describe('React 17 with React 18 config', () => { - beforeAll(async () => { - await fs.mkdirp(reactDomPackagePah) - await fs.writeFile( - join(reactDomPackagePah, 'package.json'), - JSON.stringify({ name: 'react-dom', version: '17.0.0' }) - ) - writeNextConfig({}) - }) - afterAll(async () => { - await fs.remove(reactDomPackagePah) - nextConfig.restore() - }) - - it('suspense is not allowed in blocking rendering mode', async () => { - const { stderr, code } = await nextBuild(appDir, [], { - stderr: true, - nodeArgs, - env: { - __NEXT_REACT_CHANNEL: '17', - }, - }) - expect(stderr).toContain( - 'Invalid suspense option usage in next/dynamic. Read more: https://nextjs.org/docs/messages/invalid-dynamic-suspense' - ) - expect(code).toBe(1) - }) -}) diff --git a/test/integration/react-18-invalid-config/next.config.js b/test/integration/react-18-invalid-config/next.config.js deleted file mode 100644 index 4ba52ba2c8df6..0000000000000 --- a/test/integration/react-18-invalid-config/next.config.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = {} diff --git a/test/integration/react-18-invalid-config/pages/dynamic.js b/test/integration/react-18-invalid-config/pages/dynamic.js deleted file mode 100644 index f54d136c7b5d5..0000000000000 --- a/test/integration/react-18-invalid-config/pages/dynamic.js +++ /dev/null @@ -1,12 +0,0 @@ -import React, { Suspense } from 'react' -import dynamic from 'next/dynamic' - -const Foo = dynamic(() => import('../components/foo'), { suspense: true }) - -export default function Dynamic() { - return ( - - - - ) -} diff --git a/test/integration/react-18-invalid-config/pages/index.js b/test/integration/react-18-invalid-config/pages/index.js deleted file mode 100644 index f7dff6a079465..0000000000000 --- a/test/integration/react-18-invalid-config/pages/index.js +++ /dev/null @@ -1,3 +0,0 @@ -export default function Index() { - return 'index' -} diff --git a/test/lib/react-channel-require-hook.js b/test/lib/react-channel-require-hook.js index b4a1ab01e225b..4372215b3c6c9 100644 --- a/test/lib/react-channel-require-hook.js +++ b/test/lib/react-channel-require-hook.js @@ -1,7 +1,7 @@ const mod = require('module') // The value will be '17' or 'exp' to alias the actual react channel -const reactVersion = process.env.__NEXT_REACT_CHANNEL +const reactVersion = undefined const reactDir = `react-${reactVersion}` const reactDomDir = `react-dom-${reactVersion}` From f62bbf3fb950bd87fd5d6db28db5392e380d90ca Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Fri, 21 Oct 2022 21:05:33 +0200 Subject: [PATCH 3/6] Add note to upgrade guide --- docs/upgrading.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/upgrading.md b/docs/upgrading.md index f26370f29ed47..4827f10d00e2f 100644 --- 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`. From 2298a1d4f5ba3b7ca1b507c93c12606d9dc7423c Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Fri, 21 Oct 2022 21:57:53 +0200 Subject: [PATCH 4/6] Upgrade examples --- examples/with-eslint/package.json | 4 ++-- examples/with-mdx/package.json | 4 ++-- examples/with-next-sass/package.json | 4 ++-- packages/next/build/webpack-config.ts | 2 +- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/examples/with-eslint/package.json b/examples/with-eslint/package.json index e9eab360f8b63..a2977eecec192 100644 --- 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-mdx/package.json b/examples/with-mdx/package.json index 7e2bee5fad391..dd2aeec334866 100644 --- a/examples/with-mdx/package.json +++ b/examples/with-mdx/package.json @@ -10,7 +10,7 @@ "@mdx-js/react": "^1.6.18", "@next/mdx": "^9.1.1", "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-next-sass/package.json b/examples/with-next-sass/package.json index 3a5972bfdcb25..f488a52f871ca 100644 --- a/examples/with-next-sass/package.json +++ b/examples/with-next-sass/package.json @@ -7,8 +7,8 @@ }, "dependencies": { "next": "latest", - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "^18.2.0", + "react-dom": "^18.2.0", "sass": "1.26.3" } } diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts index f69e72299c5db..f29c22203b2d7 100644 --- a/packages/next/build/webpack-config.ts +++ b/packages/next/build/webpack-config.ts @@ -574,7 +574,7 @@ export default async function getBaseWebpackConfig( // Only error in first one compiler (client) once if (isClient) { if (!hasReactRoot) { - throw new Error('Next.js requires React 18 to be installed.') + throw new Error('Next.js requires React 18.2.0 to be installed.') } } From 094d5b96bb8b8c129ef1dee1bcd036bd9f61a38c Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Fri, 21 Oct 2022 22:01:06 +0200 Subject: [PATCH 5/6] Upgrade last examples to React 18 --- examples/auth-with-stytch/package.json | 4 ++-- examples/cms-drupal/package.json | 4 ++-- examples/cms-keystonejs-embedded/package.json | 4 ++-- examples/with-formspree/package.json | 4 ++-- examples/with-jotai/package.json | 4 ++-- examples/with-mysql/package.json | 4 ++-- examples/with-playwright/package.json | 4 ++-- 7 files changed, 14 insertions(+), 14 deletions(-) diff --git a/examples/auth-with-stytch/package.json b/examples/auth-with-stytch/package.json index b5bc962e228da..f34efb0de7939 100644 --- 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 index bb693224fb396..c93fc4ed075fa 100644 --- 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 index 785cf691dd33c..2be4a5098b8ec 100644 --- 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-formspree/package.json b/examples/with-formspree/package.json index 97fbff8ea2ee5..7df56dfb41ef9 100644 --- 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 index a6c7163464753..d66058245fe33 100644 --- 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", diff --git a/examples/with-mysql/package.json b/examples/with-mysql/package.json index 0284f6baa105a..47080a1648ca0 100644 --- a/examples/with-mysql/package.json +++ b/examples/with-mysql/package.json @@ -9,8 +9,8 @@ "dependencies": { "@prisma/client": "3.10.0", "next": "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/with-playwright/package.json b/examples/with-playwright/package.json index 9c98887da6a2e..555dec415467d 100644 --- a/examples/with-playwright/package.json +++ b/examples/with-playwright/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": { "@playwright/test": "^1.15.0" From d1e8a58e2dbe2437525e34b950ecfcb03aab7740 Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Fri, 21 Oct 2022 14:09:25 -0700 Subject: [PATCH 6/6] update e2e tests --- test/e2e/next-script/index.test.ts | 38 +++++++++++++----------------- 1 file changed, 17 insertions(+), 21 deletions(-) diff --git a/test/e2e/next-script/index.test.ts b/test/e2e/next-script/index.test.ts index e7493a26460cc..5596fc44257da 100644 --- a/test/e2e/next-script/index.test.ts +++ b/test/e2e/next-script/index.test.ts @@ -13,7 +13,7 @@ describe('beforeInteractive in document Head', () => { 'pages/_document.js': ` import { Html, Head, Main, NextScript } from 'next/document' import Script from 'next/script' - + export default function Document() { return ( @@ -31,7 +31,7 @@ describe('beforeInteractive in document Head', () => { ) } `, - 'pages/index.js': ` + 'pages/index.js': ` export default function Home() { return ( <> @@ -42,8 +42,8 @@ describe('beforeInteractive in document Head', () => { `, }, dependencies: { - react: '17.0.2', - 'react-dom': '17.0.2', + react: 'latest', + 'react-dom': 'latest', }, }) }) @@ -74,7 +74,7 @@ describe('beforeInteractive in document body', () => { 'pages/_document.js': ` import { Html, Head, Main, NextScript } from 'next/document' import Script from 'next/script' - + export default function Document() { return ( @@ -91,7 +91,7 @@ describe('beforeInteractive in document body', () => { ) } `, - 'pages/index.js': ` + 'pages/index.js': ` export default function Home() { return ( <> @@ -102,8 +102,8 @@ describe('beforeInteractive in document body', () => { `, }, dependencies: { - react: '17.0.2', - 'react-dom': '17.0.2', + react: 'latest', + 'react-dom': 'latest', }, }) }) @@ -149,8 +149,8 @@ describe('experimental.nextScriptWorkers: false with no Partytown dependency', ( }, // TODO: @housseindjirdeh: verify React 18 functionality dependencies: { - react: '17.0.2', - 'react-dom': '17.0.2', + react: 'latest', + 'react-dom': 'latest', }, }) }) @@ -182,10 +182,6 @@ describe('experimental.nextScriptWorkers: true with required Partytown dependenc experimental: { nextScriptWorkers: true, }, - dependencies: { - react: '17', - 'react-dom': '17', - }, }, files: { 'pages/index.js': ` @@ -204,6 +200,8 @@ describe('experimental.nextScriptWorkers: true with required Partytown dependenc `, }, dependencies: { + react: 'latest', + 'react-dom': 'latest', '@builder.io/partytown': '0.4.2', }, }) @@ -261,15 +259,11 @@ describe('experimental.nextScriptWorkers: true with required Partytown dependenc experimental: { nextScriptWorkers: true, }, - dependencies: { - react: '17', - 'react-dom': '17', - }, }, files: { 'pages/index.js': ` import Script from 'next/script' - + export default function Page() { return ( <> @@ -281,6 +275,8 @@ describe('experimental.nextScriptWorkers: true with required Partytown dependenc `, }, dependencies: { + react: 'latest', + 'react-dom': 'latest', '@builder.io/partytown': '0.4.2', }, }) @@ -399,8 +395,8 @@ describe('experimental.nextScriptWorkers: true with config override', () => { }, dependencies: { '@builder.io/partytown': '0.4.2', - react: '17', - 'react-dom': '17', + react: 'latest', + 'react-dom': 'latest', }, }) })