Reland "Support React 18 in Pages Router""

[ztanner]

Relands #69484

Keeping as a draft while we iron out the strictness check of React 18.

[ijjk]

Failing test suites

Commit: fa2569a

pnpm test-start test/e2e/app-dir/rsc-basic/rsc-basic.test.ts

• app dir - rsc basics > should be able to navigate between rsc routes

Expand output

● app dir - rsc basics › should be able to navigate between rsc routes

request.allHeaders: Target page, context or browser has been closed

  168 |         page.on('request', (request) => {
  169 |           requestsCount++
> 170 |           return request.allHeaders().then((headers) => {
      |                          ^
  171 |             if (
  172 |               headers['RSC'.toLowerCase()] === '1' &&
  173 |               // Prefetches also include `RSC`

  at Page.allHeaders (e2e/app-dir/rsc-basic/rsc-basic.test.ts:170:26)

● app dir - rsc basics › should be able to navigate between rsc routes

request.allHeaders: Target page, context or browser has been closed

  168 |         page.on('request', (request) => {
  169 |           requestsCount++
> 170 |           return request.allHeaders().then((headers) => {
      |                          ^
  171 |             if (
  172 |               headers['RSC'.toLowerCase()] === '1' &&
  173 |               // Prefetches also include `RSC`

  at Page.allHeaders (e2e/app-dir/rsc-basic/rsc-basic.test.ts:170:26)

Read more about building and testing Next.js in contributing.md.

pnpm test-dev test/e2e/prerender.test.ts

• Prerender > should not error when rewriting to fallback dynamic SSG page

Expand output

● Prerender › should not error when rewriting to fallback dynamic SSG page

TIMED OUT: /Post: post-100/



undefined

  718 |
  719 |   if (hardError) {
> 720 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content + '\n\n' + lastErr)
      |           ^
  721 |   }
  722 |   return false
  723 | }

  at check (lib/next-test-utils.ts:720:11)
  at Object.<anonymous> (e2e/prerender.test.ts:949:7)

Read more about building and testing Next.js in contributing.md.

TURBOPACK=1 pnpm test-dev test/development/acceptance-app/ReactRefreshLogBox.test.ts (turbopack)

• ReactRefreshLogBox app turbo > Should show error location for server actions in client component
• ReactRefreshLogBox app turbo > Should show error location for server actions in server component

Expand output

● ReactRefreshLogBox app turbo › Should show error location for server actions in client component

thrown: "Exceeded timeout of 240000 ms for a test.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  1113 |   }
  1114 |
> 1115 |   test('Should show error location for server actions in client component', async () => {
       |   ^
  1116 |     const { session, browser, cleanup } = await sandbox(
  1117 |       next,
  1118 |       new Map([

  at test (development/acceptance-app/ReactRefreshLogBox.test.ts:1115:3)
      at Array.forEach (<anonymous>)
  at lib/next-test-utils.ts:1310:56
  at Object.<anonymous> (development/acceptance-app/ReactRefreshLogBox.test.ts:13:35)

● ReactRefreshLogBox app turbo › Should show error location for server actions in server component

thrown: "Exceeded timeout of 240000 ms for a test.
Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout."

  1162 |   })
  1163 |
> 1164 |   test('Should show error location for server actions in server component', async () => {
       |   ^
  1165 |     const { session, browser, cleanup } = await sandbox(
  1166 |       next,
  1167 |       new Map([

  at test (development/acceptance-app/ReactRefreshLogBox.test.ts:1164:3)
      at Array.forEach (<anonymous>)
  at lib/next-test-utils.ts:1310:56
  at Object.<anonymous> (development/acceptance-app/ReactRefreshLogBox.test.ts:13:35)

Read more about building and testing Next.js in contributing.md.

TURBOPACK=1 pnpm test-dev test/development/acceptance/ReactRefreshLogBox-builtins.test.ts (turbopack)

• ReactRefreshLogBox turbo > Module not found (missing global CSS)

Expand output

● ReactRefreshLogBox turbo › Module not found (missing global CSS)

Expected no Redbox but found one
header: Build Error
Next.js (15.0.0-canary.149) (turbo)

Failed to compile
description: Failed to compile
source: ./pages/_app.js:1:1
Module not found: Can't resolve './non-existent.css'
> 1 | export default function App({ Component, pageProps }) {
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^
  2 |   return <Component {...pageProps} />
  3 | }

https://nextjs.org/docs/messages/module-not-found

  239 |       `
  240 |     )
> 241 |     await session.assertNoRedbox()
      |     ^
  242 |     expect(
  243 |       await session.evaluate(() => document.documentElement.innerHTML)
  244 |     ).toContain('index page')

  at Object.<anonymous> (development/acceptance/ReactRefreshLogBox-builtins.test.ts:241:5)

Read more about building and testing Next.js in contributing.md.

[eps1lon]

We'll land this as 18 and 19 support.