Add ReactDOMClient to ServerIntegrationSelect #28132

rickhanlonii · 2024-01-27T23:51:42Z

Overview

Branched off #28130

React for count changing

Before

These tests are weird because on main they pass, but log to the console:

We expected 2 warning(s), but saw 1 warning(s).
We saw these warnings:
    Warning: Expected server HTML to contain a matching <select> in <div>.
        at select

The other one is ignored. The expect(console.errors).toBeCalledWith(2) doesn't account for ignored calls, so the test passes with the two expected (the +1 is in the test utiles). The ignored warning is

Warning: ReactDOM.hydrate is no longer supported in React 18. Use hydrateRoot instead.

So the mismatch is in the ignored warnings.

After

After switching to createRoot, it still logs:

We expected 2 warning(s), but saw 1 warning(s).
We saw these warnings:
    Warning: Expected server HTML to contain a matching <select> in <div>.
        at select

But the test fails due to an unexpected error count. The new ignored errors are:

Error: Uncaught [Error: Hydration failed because the initial UI does not match what was rendered on the server.]
Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.
Error: Hydration failed because the initial UI does not match what was rendered on the server.
Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

These seem to be the correct warnings to fire in createRoot, so the fix is to update the number of warnings we expect.

react-sizebot · 2024-02-01T21:03:08Z

Comparing: 9aef5d2...e9b6cd3

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js	=	176.59 kB	176.59 kB	=	55.01 kB	55.01 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	=	178.69 kB	178.69 kB	=	55.64 kB	55.64 kB
facebook-www/ReactDOM-prod.classic.js	=	573.52 kB	573.52 kB	=	100.99 kB	100.99 kB
facebook-www/ReactDOM-prod.modern.js	=	557.29 kB	557.29 kB	=	98.07 kB	98.07 kB
test_utils/ReactAllWarnings.js	Deleted	67.55 kB	0.00 kB	Deleted	16.54 kB	0.00 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
test_utils/ReactAllWarnings.js	Deleted	67.55 kB	0.00 kB	Deleted	16.54 kB	0.00 kB

Generated by 🚫 dangerJS against e9b6cd3

## Overview Branched off #28130 ## React for count changing ### Before These tests are weird because on main they pass, but log to the console: ``` We expected 2 warning(s), but saw 1 warning(s). We saw these warnings: Warning: Expected server HTML to contain a matching <select> in <div>. at select ``` The other one is ignored. The `expect(console.errors).toBeCalledWith(2)` doesn't account for ignored calls, so the test passes with the two expected (the +1 is in the test utiles). The ignored warning is ``` Warning: ReactDOM.hydrate is no longer supported in React 18. Use hydrateRoot instead. ``` So the mismatch is in the ignored warnings. ### After After switching to `createRoot`, it still logs: ``` We expected 2 warning(s), but saw 1 warning(s). We saw these warnings: Warning: Expected server HTML to contain a matching <select> in <div>. at select ``` But the test fails due to an unexpected error count. The new ignored errors are: ``` Error: Uncaught [Error: Hydration failed because the initial UI does not match what was rendered on the server.] Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>. Error: Hydration failed because the initial UI does not match what was rendered on the server. Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering. ``` These seem to be the correct warnings to fire in `createRoot`, so the fix is to update the number of warnings we expect.

## Overview Branched off facebook#28130 ## React for count changing ### Before These tests are weird because on main they pass, but log to the console: ``` We expected 2 warning(s), but saw 1 warning(s). We saw these warnings: Warning: Expected server HTML to contain a matching <select> in <div>. at select ``` The other one is ignored. The `expect(console.errors).toBeCalledWith(2)` doesn't account for ignored calls, so the test passes with the two expected (the +1 is in the test utiles). The ignored warning is ``` Warning: ReactDOM.hydrate is no longer supported in React 18. Use hydrateRoot instead. ``` So the mismatch is in the ignored warnings. ### After After switching to `createRoot`, it still logs: ``` We expected 2 warning(s), but saw 1 warning(s). We saw these warnings: Warning: Expected server HTML to contain a matching <select> in <div>. at select ``` But the test fails due to an unexpected error count. The new ignored errors are: ``` Error: Uncaught [Error: Hydration failed because the initial UI does not match what was rendered on the server.] Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>. Error: Hydration failed because the initial UI does not match what was rendered on the server. Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering. ``` These seem to be the correct warnings to fire in `createRoot`, so the fix is to update the number of warnings we expect.

## Overview Branched off #28130 ## React for count changing ### Before These tests are weird because on main they pass, but log to the console: ``` We expected 2 warning(s), but saw 1 warning(s). We saw these warnings: Warning: Expected server HTML to contain a matching <select> in <div>. at select ``` The other one is ignored. The `expect(console.errors).toBeCalledWith(2)` doesn't account for ignored calls, so the test passes with the two expected (the +1 is in the test utiles). The ignored warning is ``` Warning: ReactDOM.hydrate is no longer supported in React 18. Use hydrateRoot instead. ``` So the mismatch is in the ignored warnings. ### After After switching to `createRoot`, it still logs: ``` We expected 2 warning(s), but saw 1 warning(s). We saw these warnings: Warning: Expected server HTML to contain a matching <select> in <div>. at select ``` But the test fails due to an unexpected error count. The new ignored errors are: ``` Error: Uncaught [Error: Hydration failed because the initial UI does not match what was rendered on the server.] Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>. Error: Hydration failed because the initial UI does not match what was rendered on the server. Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering. ``` These seem to be the correct warnings to fire in `createRoot`, so the fix is to update the number of warnings we expect. DiffTrain build for commit c42e7c7.

facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Jan 27, 2024

eps1lon approved these changes Jan 28, 2024

View reviewed changes

Add ReactDOMClient to ServerIntegrationTestUtils

e204d76

rickhanlonii force-pushed the rh/server-test-utils branch from 233b65d to e204d76 Compare February 1, 2024 20:53

Add ReactDOMClient to ServerIntegrationSelect

211427b

rickhanlonii force-pushed the rh/server-test-utils-select branch from 1d17beb to 211427b Compare February 1, 2024 20:59

Update count

e9b6cd3

Base automatically changed from rh/server-test-utils to main February 1, 2024 23:27

rickhanlonii merged commit c42e7c7 into main Feb 1, 2024
36 checks passed

rickhanlonii deleted the rh/server-test-utils-select branch February 1, 2024 23:32

gnoff mentioned this pull request Feb 5, 2024

Update React from 60a927d04 to 2bc7d336a vercel/next.js#61522

Merged

ztanner mentioned this pull request Mar 19, 2024

(backport) Update React from 60a927d04 to 14898b6a9 vercel/next.js#63442

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add ReactDOMClient to ServerIntegrationSelect #28132

Add ReactDOMClient to ServerIntegrationSelect #28132

rickhanlonii commented Jan 27, 2024

react-sizebot commented Feb 1, 2024 •

edited

Loading

Add ReactDOMClient to ServerIntegrationSelect #28132

Add ReactDOMClient to ServerIntegrationSelect #28132

Conversation

rickhanlonii commented Jan 27, 2024

Overview

React for count changing

Before

After

react-sizebot commented Feb 1, 2024 • edited Loading

Critical size changes

Significant size changes

react-sizebot commented Feb 1, 2024 •

edited

Loading