Fix Fast Refresh for React 18 #35718

timneutkens · 2022-03-30T07:34:51Z

Updates the React 18 test suite to the latest React version.
Upgrade react-refresh module

Fixes #35518
Fixes #35703

Bug

Related issues linked using fixes #number
Integration tests added
Errors have 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 helpful link attached, see contributing.md

Documentation / Examples

Make sure the linting passes by running yarn lint

…s into add/upgrade-react-dep

ijjk · 2022-03-30T11:45:15Z

Failing test suites

Commit: 625c833

yarn testheadless test/development/basic/hmr.test.ts

basic HMR > Error Recovery > should recover after a bad return from the render function

Expand output

● basic HMR › Error Recovery › should recover after a bad return from the render function

expect(received).toMatch(expected)

Expected substring: "Objects are not valid as a React child (found: /search/). If you meant to render a collection of children, use an array instead."
Received string:    " 1 of 1 unhandled error
Server Error·
Error: Objects are not valid as a React child (found: [object RegExp]). If you meant to render a collection of children, use an array instead.·
This error happened while generating the page. Any console logs will be displayed in the terminal window."

  565 |             'Unknown'
  566 |           )
> 567 |         ).toMatch(
      |           ^
  568 |           'Objects are not valid as a React child (found: /search/). If you meant to render a collection of children, use an array instead.'
  569 |         )
  570 |

  at Object.<anonymous> (development/basic/hmr.test.ts:567:11)

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

ijjk · 2022-03-30T11:45:16Z

Failing test suites

Commit: 625c833

yarn testheadless test/development/basic/hmr.test.ts

basic HMR > Error Recovery > should recover after a bad return from the render function

Expand output

● basic HMR › Error Recovery › should recover after a bad return from the render function

expect(received).toMatch(expected)

Expected substring: "Objects are not valid as a React child (found: /search/). If you meant to render a collection of children, use an array instead."
Received string:    " 1 of 1 unhandled error
Server Error·
Error: Objects are not valid as a React child (found: [object RegExp]). If you meant to render a collection of children, use an array instead.·
This error happened while generating the page. Any console logs will be displayed in the terminal window."

  565 |             'Unknown'
  566 |           )
> 567 |         ).toMatch(
      |           ^
  568 |           'Objects are not valid as a React child (found: /search/). If you meant to render a collection of children, use an array instead.'
  569 |         )
  570 |

  at Object.<anonymous> (development/basic/hmr.test.ts:567:11)

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

ijjk · 2022-03-30T12:12:25Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	timneutkens/next.js add/upgrade-react-dep	Change
buildDuration	15.5s	15.5s	⚠️ +28ms
buildDurationCached	6.1s	6.1s	⚠️ +38ms
nodeModulesSize	467 MB	467 MB	⚠️ +3.09 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	timneutkens/next.js add/upgrade-react-dep	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.168	3.134	-0.03
/ avg req/sec	789.15	797.6	+8.45
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.413	1.374	-0.04
/error-in-render avg req/sec	1768.88	1819.58	+50.7

Client Bundles (main, webpack)

	vercel/next.js canary	timneutkens/next.js add/upgrade-react-dep	Change
925.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	28.4 kB	28.4 kB	✓
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	72.1 kB	72.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	timneutkens/next.js add/upgrade-react-dep	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	timneutkens/next.js add/upgrade-react-dep	Change
_app-HASH.js gzip	1.36 kB	1.36 kB	✓
_error-HASH.js gzip	192 B	192 B	✓
amp-HASH.js gzip	309 B	309 B	✓
css-HASH.js gzip	327 B	327 B	✓
dynamic-HASH.js gzip	2.57 kB	2.57 kB	✓
head-HASH.js gzip	351 B	351 B	✓
hooks-HASH.js gzip	920 B	920 B	✓
image-HASH.js gzip	5.48 kB	5.48 kB	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.26 kB	2.26 kB	✓
routerDirect..HASH.js gzip	320 B	320 B	✓
script-HASH.js gzip	387 B	387 B	✓
withRouter-HASH.js gzip	319 B	319 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	15.2 kB	15.2 kB	✓

Client Build Manifests

	vercel/next.js canary	timneutkens/next.js add/upgrade-react-dep	Change
_buildManifest.js gzip	460 B	460 B	✓
Overall change	460 B	460 B	✓

Rendered Page Sizes

	vercel/next.js canary	timneutkens/next.js add/upgrade-react-dep	Change
index.html gzip	532 B	532 B	✓
link.html gzip	545 B	545 B	✓
withRouter.html gzip	526 B	526 B	✓
Overall change	1.6 kB	1.6 kB	✓

Default Build with SWC (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	timneutkens/next.js add/upgrade-react-dep	Change
buildDuration	19.2s	19.2s	-11ms
buildDurationCached	6.1s	6.2s	⚠️ +30ms
nodeModulesSize	467 MB	467 MB	⚠️ +3.09 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	timneutkens/next.js add/upgrade-react-dep	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.17	3.118	-0.05
/ avg req/sec	788.73	801.85	+13.12
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.404	1.386	-0.02
/error-in-render avg req/sec	1780.88	1803.57	+22.69

Client Bundles (main, webpack)

	vercel/next.js canary	timneutkens/next.js add/upgrade-react-dep	Change
925.HASH.js gzip	178 B	178 B	✓
framework-HASH.js gzip	42.3 kB	42.3 kB	✓
main-HASH.js gzip	28.8 kB	28.8 kB	✓
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	72.7 kB	72.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	timneutkens/next.js add/upgrade-react-dep	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	timneutkens/next.js add/upgrade-react-dep	Change
_app-HASH.js gzip	1.35 kB	1.35 kB	✓
_error-HASH.js gzip	179 B	179 B	✓
amp-HASH.js gzip	313 B	313 B	✓
css-HASH.js gzip	324 B	324 B	✓
dynamic-HASH.js gzip	2.56 kB	2.56 kB	✓
head-HASH.js gzip	351 B	351 B	✓
hooks-HASH.js gzip	921 B	921 B	✓
image-HASH.js gzip	5.59 kB	5.59 kB	✓
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	2.33 kB	2.33 kB	✓
routerDirect..HASH.js gzip	322 B	322 B	✓
script-HASH.js gzip	388 B	388 B	✓
withRouter-HASH.js gzip	317 B	317 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	15.3 kB	15.3 kB	✓

Client Build Manifests

	vercel/next.js canary	timneutkens/next.js add/upgrade-react-dep	Change
_buildManifest.js gzip	458 B	458 B	✓
Overall change	458 B	458 B	✓

Rendered Page Sizes

	vercel/next.js canary	timneutkens/next.js add/upgrade-react-dep	Change
index.html gzip	532 B	532 B	✓
link.html gzip	546 B	546 B	✓
withRouter.html gzip	527 B	527 B	✓
Overall change	1.6 kB	1.6 kB	✓

Commit: aed89db

timneutkens added 2 commits March 30, 2022 09:25

Update React 18 test

781911d

Update react-dom

49644b4

timneutkens requested review from ijjk, shuding and huozhi as code owners March 30, 2022 07:34

ijjk added the created-by: Next.js team PRs by the Next.js team label Mar 30, 2022

This comment has been minimized.

Sign in to view

Fix fast refresh not applying

2076af4

ijjk added the type: next label Mar 30, 2022

timneutkens changed the title ~~Update React 18 test~~ Fix Fast Refresh for React 18 Mar 30, 2022

huozhi previously approved these changes Mar 30, 2022

View reviewed changes

This comment has been minimized.

Sign in to view

This was referenced Mar 30, 2022

Fast Refresh does not work @latest #35703

Closed

Fast refresh/hot reloading not working on latest canary release with react 18 (WSL, Windows 10) #35518

Closed

This comment has been minimized.

Sign in to view

huozhi added 2 commits March 30, 2022 10:50

update compiled

efacbc5

update react 18 prod tests

c636f40

huozhi dismissed their stale review via c636f40 March 30, 2022 08:51

This comment has been minimized.

Sign in to view

timneutkens and others added 3 commits March 30, 2022 11:22

Update error test

c916e40

Merge branch 'add/upgrade-react-dep' of github.com:timneutkens/next.j…

e356dbb

…s into add/upgrade-react-dep

lock react versions for head and script tests

93a0618

This comment has been minimized.

Sign in to view

timneutkens and others added 5 commits March 30, 2022 12:12

Pin to react 17 for e2e tests

5a2990a

Merge branch 'add/upgrade-react-dep' of github.com:timneutkens/next.j…

85c5aa2

…s into add/upgrade-react-dep

Revert test change

de5d8b5

lock version for run-tests

cbadcc7

Merge branch 'add/upgrade-react-dep' of github.com:timneutkens/next.j…

ec3fdc3

…s into add/upgrade-react-dep

This comment has been minimized.

Sign in to view

timneutkens added 2 commits March 30, 2022 12:27

Pin experimental worker strategy to React 17

94ceba4

Update matcher

abe29e8

This comment has been minimized.

Sign in to view

Fix duplicate prop

a34f6a3

This comment has been minimized.

Sign in to view

Wait for hydration to kick in

625c833

Update hmr.test.ts

aed89db

huozhi approved these changes Mar 30, 2022

View reviewed changes

kodiakhq bot merged commit 62bb348 into vercel:canary Mar 30, 2022

timneutkens deleted the add/upgrade-react-dep branch March 30, 2022 14:52

timneutkens mentioned this pull request Mar 31, 2022

[NEXT-369] Fast refresh doesn't work when importing function with capitalized name #35567

Open

1 task

NOUIY mentioned this pull request Apr 21, 2022

[Snyk] Upgrade next from 12.0.7 to 12.1.4 NOUIY/next.js#147

Open

github-actions bot locked as resolved and limited conversation to collaborators Apr 30, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix Fast Refresh for React 18 #35718

Fix Fast Refresh for React 18 #35718

timneutkens commented Mar 30, 2022 •

edited

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Mar 30, 2022

ijjk commented Mar 30, 2022

ijjk commented Mar 30, 2022

Fix Fast Refresh for React 18 #35718

Fix Fast Refresh for React 18 #35718

Conversation

timneutkens commented Mar 30, 2022 • edited

Bug

Feature

Documentation / Examples

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Mar 30, 2022

Failing test suites

ijjk commented Mar 30, 2022

Failing test suites

ijjk commented Mar 30, 2022

Stats from current PR

timneutkens commented Mar 30, 2022 •

edited