[DNM] React 19 #12374

amoore108 · 2025-02-06T15:03:41Z

Resolves JIRA https://jira.dev.bbc.co.uk/browse/WORLDSERVICE-139

Overall changes

Updates React to version 19
Adds react-is version pin per https://github.com/jestjs/jest/issues/15402
Amends some spread operator conditions per https://github.com/facebook/react/issues/29902. This seems to be a React issue with the classic runtime we're using. Updating to automatic runtime may fix this, but historically this broke Opera Mini, so this is a workaround to keep us on the classic runtime
Updates various tests that failed after the update. These are minor and again probably related to internal changes to way React is working in v19

Testing

Check Express app on Preview
Check Next.js app on Preview
Check canonical, AMP and Lite modes
Test Opera Mini

Helpful Links

Add Links to useful resources related to this PR if applicable.

Coding Standards

Repository use guidelines

amoore108 · 2025-02-07T11:13:05Z

src/server/Document/__snapshots__/component.test.jsx.snap

    <meta
      content="width=device-width, initial-scale=1, minimum-scale=1"
      data-react-helmet="true"
      name="viewport"
    />
+    <script


React 19 changes some behaviour of <head> related tags, which likely accounts for this snapshot diff: https://react.dev/blog/2024/12/05/react-19#support-for-async-scripts

I think this is OK - it's just changing the order of the content in the snapshot by the looks of it?

Yea I'll check and compare the ordering to see if there is any impact.

amoore108 · 2025-02-07T12:35:04Z

cypress/support/commands/analytics.js

@@ -15,12 +15,14 @@ Cypress.Commands.add('hasNoscriptImgAtiUrl', atiUrl => {

 // Should be moved into integration/pages/index.js once all pages have Chartbeat
 Cypress.Commands.add('hasScriptWithChartbeatSrc', () => {
+  cy.reload(true);


Don't particularly like this, or the { retries: 3 } on the individual Chartbeat tests, but I've tried everything to get them to work and couldn't find a better solution.

Feel like it may have something to do with how React 19 takes over <script /> tags, but can't be sure.

src/app/legacy/psammead/psammead-assets/src/amp-boilerplate.test.jsx

src/app/components/Image/index.tsx

src/app/components/Curation/HierarchicalGrid/index.test.tsx

src/app/legacy/psammead/psammead-assets/src/amp-boilerplate.test.jsx

karinathomasbbc · 2025-02-07T12:58:28Z

src/server/Document/__snapshots__/component.test.jsx.snap

    <meta
      content="width=device-width, initial-scale=1, minimum-scale=1"
      data-react-helmet="true"
      name="viewport"
    />
+    <script


I think this is OK - it's just changing the order of the content in the snapshot by the looks of it?

.github/dependabot.yml

pvaliani · 2025-02-07T16:18:59Z

src/app/components/MediaLoader/Placeholder/PlayButton/index.tsx

@@ -39,7 +39,7 @@ const PlayButton = ({
      type="button"
      css={styles.button}
      onClick={onClick}
-      {...(className && { className })}
+      {...(className ? { className } : undefined)}


So, basically this (and similar changes) are making sure we are following the correct spread pattern for React 19 because in 19 dev mode crashes when false is evaluated during spread?

I didn't see any crashes as such, tests just failed quite spectacularly without these changes. Not to say it wouldn't cause the app to crash though, it very well could do without noticing as we still display the server render if the app crashes.

pvaliani · 2025-02-07T16:32:05Z

.storybook/DocsDecorator/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';


Do we still need to import React here for storybook if we're removing it from imports in components below?

i.e in the Next app at ws-nextjs-app/pages/[service]/send/[id]/MessageBox/ErrorSummaryBox.tsx

Yea we'll need to here. Other components that don't import will likely be importing something like:

/** @jsx jsx */ import { jsx } from '@emotion/react';

which means Emotion will be taking control of JSX rendering.

.storybook/withServicesDecorator/index.tsx

pvaliani

Looks good and runs fine for me locally. Would be interesting to see what the affect on performance this upgrade might have immediately.

Took a capture of mundo if we want to do a pagespeed insights comparison:
https://pagespeed.web.dev/analysis/https-www-bbc-com-mundo/s30x4axjui?form_factor=mobile

Nice job man

.eslintrc.js

This reverts commit 7529531.

This reverts commit 15d7529.

* Revert "Revert "[DNM] React 19 (#12374)" (#12384)" This reverts commit 15d7529. * Set `async:false` on bundle script * Revert Cypress amendments

amoore108 added 26 commits April 26, 2024 10:21

Testing

35b449b

Merge branch 'latest' into react-19

9648799

cache

86469a4

Merge branch 'latest' into react-19

96d2f1f

Merge branch 'latest' into react-19

aa37e2f

cache

e8ec6b9

Merge branch 'latest' into react-19

b3ce3e3

Update @types/react

614b98d

Update dependabot.yml

ec8b0ee

Update Emotion to support React 19 types

49e7035

run yarn dedupe

97b493c

Type fixes

2b74064

viewRef updates

2a993e0

more viewRef fixes

bd852c8

more viewRef updates

b8b9f54

Try React.JSX namespace for type declaration files

1a17d46

Update bundleSizeConfig.js

5d5f437

Update index.jsx

40351ab

Merge branch 'latest' into react-19

729657c

cache

e7f67cc

Merge branch 'latest' into react-19

dd44c2e

cache

ad087dc

Syntax and test fixes

d794555

Update index.tsx

c92e2f7

Update component.test.jsx.snap

8a5649a

Disable AMP boilerplate test temporarily

ce8c8d8

amoore108 self-assigned this Feb 6, 2025

amoore108 added 3 commits February 6, 2025 15:24

Merge branch 'latest' into react-19

a70b5b5

Update client.js

626822d

Update client.js

ac78180

Force reload of window for Chartbeat script tests

28e1395

amoore108 commented Feb 7, 2025

View reviewed changes

amoore108 added 2 commits February 7, 2025 11:15

Merge branch 'latest' into react-19

9815a25

Test with retries on Chartbeat e2e

0cf3f72

amoore108 commented Feb 7, 2025

View reviewed changes

amoore108 added the Do not merge label Feb 7, 2025

amoore108 changed the title ~~React 19~~ [DNM] React 19 Feb 7, 2025

amoore108 commented Feb 7, 2025

View reviewed changes

src/app/legacy/psammead/psammead-assets/src/amp-boilerplate.test.jsx Outdated Show resolved Hide resolved

karinathomasbbc approved these changes Feb 7, 2025

View reviewed changes

Remove eslint ignores for imagesrcset and imageSizes

18ab422

pvaliani self-requested a review February 7, 2025 16:07

amoore108 added 2 commits February 7, 2025 16:17

AMP boilerplate test refactor

f755b9c

Missed file

d09fd1d

pvaliani reviewed Feb 7, 2025

View reviewed changes

.storybook/withServicesDecorator/index.tsx Show resolved Hide resolved

pvaliani approved these changes Feb 7, 2025

View reviewed changes

karinathomasbbc reviewed Feb 10, 2025

View reviewed changes

.eslintrc.js Outdated Show resolved Hide resolved

amoore108 added 4 commits February 10, 2025 09:52

Remove fetchpriority from eslint ignore

6d5f90f

Merge branch 'latest' into react-19

287291a

Update bundleSizeConfig.js

ec9b915

Merge branch 'latest' into react-19

2064d8d

amoore108 marked this pull request as ready for review February 10, 2025 11:05

amoore108 merged commit 7529531 into latest Feb 10, 2025
11 checks passed

amoore108 deleted the react-19 branch February 10, 2025 11:15

amoore108 added a commit that referenced this pull request Feb 10, 2025

Revert "[DNM] React 19 (#12374)"

6d58ba6

This reverts commit 7529531.

amoore108 mentioned this pull request Feb 10, 2025

Revert "React 19" #12384

Merged

amoore108 added a commit that referenced this pull request Feb 10, 2025

Revert "[DNM] React 19 (#12374)" (#12384)

15d7529

This reverts commit 7529531.

amoore108 added a commit that referenced this pull request Feb 10, 2025

Revert "Revert "[DNM] React 19 (#12374)" (#12384)"

dccaa6f

This reverts commit 15d7529.

amoore108 added a commit that referenced this pull request Feb 11, 2025

Revert "Revert "React 19"" (#12389)

1a1d835

* Revert "Revert "[DNM] React 19 (#12374)" (#12384)" This reverts commit 15d7529. * Set `async:false` on bundle script * Revert Cypress amendments

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DNM] React 19 #12374

[DNM] React 19 #12374

amoore108 commented Feb 6, 2025 •

edited

Loading

amoore108 Feb 7, 2025

karinathomasbbc Feb 7, 2025

amoore108 Feb 7, 2025

amoore108 Feb 7, 2025

karinathomasbbc Feb 7, 2025

pvaliani Feb 7, 2025

amoore108 Feb 7, 2025

pvaliani Feb 7, 2025

amoore108 Feb 7, 2025

pvaliani left a comment

		@@ -1,4 +1,4 @@
		import React from 'react';
		import React, { type JSX } from 'react';

[DNM] React 19 #12374

[DNM] React 19 #12374

Conversation

amoore108 commented Feb 6, 2025 • edited Loading

Overall changes

Testing

Helpful Links

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pvaliani left a comment

Choose a reason for hiding this comment

amoore108 commented Feb 6, 2025 •

edited

Loading