Skip to content

Commit

Permalink
Support React 18 in Pages router
Browse files Browse the repository at this point in the history
  • Loading branch information
@eps1lon
eps1lon committed Aug 30, 2024
1 parent e5fee3a commit 95c8042
Show file tree
Hide file tree
Showing 5 changed files with 125 additions and 60 deletions.
4 changes: 2 additions & 2 deletions packages/next/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,8 +108,8 @@
"@opentelemetry/api": "^1.1.0",
"@playwright/test": "^1.41.2",
"babel-plugin-react-compiler": "*",
"react": "19.0.0-rc-7771d3a7-20240827",
"react-dom": "19.0.0-rc-7771d3a7-20240827",
"react": "^18.2.0 || 19.0.0-rc-7771d3a7-20240827",
"react-dom": "^18.2.0 || 19.0.0-rc-7771d3a7-20240827",
"sass": "^1.3.0"
},
"peerDependenciesMeta": {
Expand Down
4 changes: 2 additions & 2 deletions packages/next/src/build/webpack-config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,8 +108,8 @@ const NEXT_PROJECT_ROOT_DIST_CLIENT = path.join(
'client'
)

if (parseInt(React.version) < 19) {
throw new Error('Next.js requires react >= 19.0.0 to be installed.')
if (parseInt(React.version) < 18) {
throw new Error('Next.js requires react >= 18.2.0 to be installed.')
}

export const babelIncludeRegexes: RegExp[] = [
Expand Down
3 changes: 2 additions & 1 deletion run-tests.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,10 @@ const exec = promisify(execOrig)
const core = require('@actions/core')
const { getTestFilter } = require('./test/get-test-filter')

// TODO: Base this off of test matrix
// Do not rename or format. sync-react script relies on this line.
// prettier-ignore
const nextjsReactPeerVersion = "19.0.0-rc-7771d3a7-20240827";
const nextjsReactPeerVersion = "^18.2.0";

let argv = require('yargs/yargs')(process.argv.slice(2))
.string('type')
Expand Down
171 changes: 117 additions & 54 deletions test/development/app-dir/ssr-in-rsc/ssr-in-rsc.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
} from 'next-test-utils'

const isReactExperimental = process.env.__NEXT_EXPERIMENTAL_PPR === 'true'
const isReact18 = true

describe('react-dom/server in React Server environment', () => {
const dependencies = (global as any).isNextDeploy
Expand Down Expand Up @@ -151,8 +152,8 @@ describe('react-dom/server in React Server environment', () => {
'/exports/app-code/react-dom-server-edge-explicit'
)

await assertNoRedbox(browser)
if (isTurbopack) {
await assertNoRedbox(browser)
if (isReactExperimental) {
expect(await browser.elementByCss('main').text())
.toMatchInlineSnapshot(`
Expand Down Expand Up @@ -196,6 +197,7 @@ describe('react-dom/server in React Server environment', () => {
}
} else {
if (isReactExperimental) {
await assertNoRedbox(browser)
expect(await browser.elementByCss('main').text())
.toMatchInlineSnapshot(`
"{
Expand All @@ -216,7 +218,10 @@ describe('react-dom/server in React Server environment', () => {
]
}"
`)
} else if (isReact18) {
await assertHasRedbox(browser)
} else {
await assertNoRedbox(browser)
expect(await browser.elementByCss('main').text())
.toMatchInlineSnapshot(`
"{
Expand Down Expand Up @@ -249,12 +254,21 @@ describe('react-dom/server in React Server environment', () => {
}
`)
} else {
expect(redbox).toMatchInlineSnapshot(`
{
"description": null,
"source": null,
}
`)
if (isReact18) {
expect(redbox).toMatchInlineSnapshot(`
{
"description": "TypeError: Cannot read properties of undefined (reading 'd')",
"source": null,
}
`)
} else {
expect(redbox).toMatchInlineSnapshot(`
{
"description": null,
"source": null,
}
`)
}
}
})

Expand Down Expand Up @@ -328,12 +342,21 @@ describe('react-dom/server in React Server environment', () => {
}
`)
} else {
expect(redbox).toMatchInlineSnapshot(`
{
"description": "Error: react-dom/server is not supported in React Server Components.",
"source": null,
}
`)
if (isReact18) {
expect(redbox).toMatchInlineSnapshot(`
{
"description": "TypeError: Cannot read properties of undefined (reading 'ReactCurrentDispatcher')",
"source": null,
}
`)
} else {
expect(redbox).toMatchInlineSnapshot(`
{
"description": "Error: react-dom/server is not supported in React Server Components.",
"source": null,
}
`)
}
}
})

Expand Down Expand Up @@ -415,12 +438,21 @@ describe('react-dom/server in React Server environment', () => {
}
`)
} else {
expect(redbox).toMatchInlineSnapshot(`
{
if (isReact18) {
expect(redbox).toMatchInlineSnapshot(`
{
"description": "TypeError: Cannot read properties of undefined (reading 'ReactCurrentDispatcher')",
"source": null,
}
`)
} else {
expect(redbox).toMatchInlineSnapshot(`
{
"description": "Error: react-dom/server is not supported in React Server Components.",
"source": null,
}
`)
"source": null,
}
`)
}
}
})

Expand All @@ -429,8 +461,8 @@ describe('react-dom/server in React Server environment', () => {
'/exports/library-code/react-dom-server-edge-explicit'
)

await assertNoRedbox(browser)
if (isTurbopack) {
await assertNoRedbox(browser)
if (isReactExperimental) {
expect(await browser.elementByCss('main').text())
.toMatchInlineSnapshot(`
Expand Down Expand Up @@ -478,6 +510,7 @@ describe('react-dom/server in React Server environment', () => {
}
} else {
if (isReactExperimental) {
await assertNoRedbox(browser)
expect(await browser.elementByCss('main').text())
.toMatchInlineSnapshot(`
"{
Expand All @@ -500,27 +533,30 @@ describe('react-dom/server in React Server environment', () => {
}
}"
`)
} else if (isReact18) {
await assertHasRedbox(browser)
} else {
await assertNoRedbox(browser)
expect(await browser.elementByCss('main').text())
.toMatchInlineSnapshot(`
"{
"default": {
"default": [
"renderToReadableStream",
"renderToStaticMarkup",
"renderToString",
"version"
],
"named": [
"default",
"renderToReadableStream",
"renderToStaticMarkup",
"renderToString",
"version"
]
}
}"
`)
"{
"default": {
"default": [
"renderToReadableStream",
"renderToStaticMarkup",
"renderToString",
"version"
],
"named": [
"default",
"renderToReadableStream",
"renderToStaticMarkup",
"renderToString",
"version"
]
}
}"
`)
}
}
const redbox = {
Expand All @@ -535,12 +571,21 @@ describe('react-dom/server in React Server environment', () => {
}
`)
} else {
expect(redbox).toMatchInlineSnapshot(`
{
if (isReact18) {
expect(redbox).toMatchInlineSnapshot(`
{
"description": "TypeError: Cannot read properties of undefined (reading 'd')",
"source": null,
}
`)
} else {
expect(redbox).toMatchInlineSnapshot(`
{
"description": null,
"source": null,
}
`)
"source": null,
}
`)
}
}
})

Expand Down Expand Up @@ -686,12 +731,21 @@ describe('react-dom/server in React Server environment', () => {
}
`)
} else {
expect(redbox).toMatchInlineSnapshot(`
{
"description": "Error: react-dom/server is not supported in React Server Components.",
"source": null,
}
`)
if (isReact18) {
expect(redbox).toMatchInlineSnapshot(`
{
"description": "TypeError: Cannot read properties of undefined (reading 'ReactCurrentDispatcher')",
"source": null,
}
`)
} else {
expect(redbox).toMatchInlineSnapshot(`
{
"description": "Error: react-dom/server is not supported in React Server Components.",
"source": null,
}
`)
}
}
})

Expand All @@ -718,12 +772,21 @@ describe('react-dom/server in React Server environment', () => {
}
`)
} else {
expect(redbox).toMatchInlineSnapshot(`
{
"description": "Error: react-dom/server is not supported in React Server Components.",
"source": null,
}
`)
if (isReact18) {
expect(redbox).toMatchInlineSnapshot(`
{
"description": "TypeError: Cannot read properties of undefined (reading 'ReactCurrentDispatcher')",
"source": null,
}
`)
} else {
expect(redbox).toMatchInlineSnapshot(`
{
"description": "Error: react-dom/server is not supported in React Server Components.",
"source": null,
}
`)
}
}
})
})
3 changes: 2 additions & 1 deletion test/lib/next-modes/base.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,9 +49,10 @@ type OmitFirstArgument<F> = F extends (
? (...args: P) => R
: never

// TODO: Base this off of test matrix
// Do not rename or format. sync-react script relies on this line.
// prettier-ignore
const nextjsReactPeerVersion = "19.0.0-rc-7771d3a7-20240827";
const nextjsReactPeerVersion = "^18.2.0";

export class NextInstance {
protected files: FileRef | { [filename: string]: string | FileRef }
Expand Down

0 comments on commit 95c8042

Please sign in to comment.