React 19 update #1632

ThomasGross · 2025-01-07T14:15:59Z

Link to issue

https://reload.atlassian.net/browse/DDFBRA-343

Additional afflicted tickets:

https://reload.atlassian.net/browse/DDFBRA-312
https://reload.atlassian.net/browse/DDFNEXT-261

Description

This PR updates React to version 19 and many dependencies that require updates because of that.

… TODO comment for enum value fix

…lint-plugin-react-komponenter

… cypress tests

…pt linting

…ule syntax

…ypescript issues

…Script files

…irectory

…process-generated-graphql script

kasperg

👍 Appreciate all your updates into this. We have gone far but there is still a bit of way.

Three important things worth highlighting:

We need to update the documentation regarding code guidelines. This has explicit references to Airbnb. I am considering whether this even needs an ADR describing the (updated) choice of coding standards.
We have an recurring issue about react/display-name that we need to figure out what to do about. It seems to be specifically related to our use of Higher-Order Components. To me the reasoning behind the rule makes sense: "This name is used by React in debugging messages". If we do not appreciate this - or there is generally is no quick fix for this - then we should consider disabling the rule altogether.
The situation about useIntersection() seems to be unresolved. Let's talk about that.

kasperg · 2025-01-16T08:17:47Z

.github/dependabot.yml

+      eslint:
+        patterns:
+          - "eslint"
+          - "eslint-config-prettier"
+          - "eslint-loader"
+          - "eslint-plugin-cypress"
+          - "eslint-plugin-import"
+          - "eslint-plugin-jsx-a11y"
+          - "eslint-plugin-no-only-tests"
+          - "eslint-plugin-prettier"
+          - "eslint-plugin-react"
+          - "eslint-plugin-react-hooks"
+          - "eslint-webpack-plugin"
+          - "@eslint/*"
+      cypress:
+        patterns:
+          - "cypress"
+          - "@cypress/*"


👍 Nice. These are meaningful groups to add.

kasperg · 2025-01-16T08:19:07Z

eslint.config.mjs

+      "src/core/fbs/model",
      "src/core/fbs/fbs.ts",
+      "src/core/publizon/model",


👍 Nice. I agree that it does not make sense to lint our generated code.

kasperg · 2025-01-16T08:20:08Z

eslint.config.mjs

      }
    },

    settings: {
      react: {
-        version: "16.11.0"
+        version: "detect" // Automatically detect the React version


👍 This is better than using a fixed version.

kasperg · 2025-01-16T08:23:35Z

package.json

+    "@cypress/webpack-preprocessor": "^6.0.2",
    "@eslint/eslintrc": "^3.2.0",
    "@eslint/js": "^9.17.0",
+    "@cypress/browserify-preprocessor": "^3.0.2",
+    "@cypress/code-coverage": "^3.13.10",


Consider reordering these dependencies in alphabetical order.

A I understand it the dependencies are normally in alphabetical order. I wonder if this is the result of a merge conflict. If we leave it as is we risk pushing an unwanted change to the next developer.

If this alphabetical ordering is really a rule we could also consider adding a CI check to ensure that it is kept consistent 🤔

kasperg · 2025-01-16T08:26:34Z

scripts/post-process-generated-graphql.ts

+    // eslint-disable-next-line no-console
    console.log("Replacement results:", results);


Consider allowing console.log within /scripts.

It seems reasonable that we use console in these cases. On the other hand I think that we may be removing this post processing going forward so perhaps it does not make sense to do too much here.

kasperg · 2025-01-16T12:02:04Z

src/core/utils/withIsPatronBlockedHoc.tsx

+  // eslint-disable-next-line react/display-name
+  ({ ...props }) => {


As mentioned previously.

kasperg · 2025-01-16T12:02:27Z

src/core/utils/withSuffix.tsx

@@ -7,6 +7,7 @@ export default function withSuffix<T extends object>(
  suffix: string,
  reduxAction: ActionCreatorWithPayload<unknown, string>
 ) {
+  // eslint-disable-next-line react/display-name


As mentioned previously.

kasperg · 2025-01-16T12:02:48Z

src/tests/unit/useRequestsWithStatus.test.tsx

+  it("should handle erroneous requests", async () => {
+    const { result } = renderHook(() =>
+      useMultipleRequestsWithStatus({
+        requests: [


👍 Nice that we can get this test back!

src/components/alert/alert.jsx

package.json

… add todos

…ibility

kasperg · 2025-01-24T10:03:14Z

package.json

+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^18.0.0",
+    "eslint-config-prettier": "^10.0.1",


Please consider this change.

As far as can tell this adds packages that we actually want to remove.

src/core/utils/modal.tsx

…n.log rule

ThomasGross · 2025-01-24T11:04:42Z

👍 Appreciate all your updates into this. We have gone far but there is still a bit of way.

Three important things worth highlighting:

We need to update the documentation regarding code guidelines. This has explicit references to Airbnb. I am considering whether this even needs an ADR describing the (updated) choice of coding standards.

We have an recurring issue about react/display-name that we need to figure out what to do about. It seems to be specifically related to our use of Higher-Order Components. To me the reasoning behind the rule makes sense: "This name is used by React in debugging messages". If we do not appreciate this - or there is generally is no quick fix for this - then we should consider disabling the rule altogether.

The situation about useIntersection() seems to be unresolved. Let's talk about that.

I have created new jira tasks on each of these topics.
https://reload.atlassian.net/browse/DDFBRA-405
https://reload.atlassian.net/browse/DDFBRA-406
https://reload.atlassian.net/browse/DDFBRA-407

ThomasGross added 29 commits January 2, 2025 15:05

feat: update @typescript-eslint/eslint-plugin to version 7.18.0 + add…

f40e124

… TODO comment for enum value fix

update react and relevant dependencies

dde1e3f

Merge branch 'develop' into DDFNEXT-225-opgrader-typescript-eslint-es…

8095edd

…lint-plugin-react-komponenter

fix: lint issues

68c664f

fix: remove reach dialog sass styling

b0911ba

fix: build errors and warnings

6e827f3

fix: typescript issues

8f149ed

fix: update eslint flags in pull request workflow

579b20a

fix: unit tests and unit test specific config after react update

8284819

fix: typescript issues

0b2f33e

fix: update Storybook dependencies to latest versions

f966cd7

fix: remove browserify and add webpack as preprocessor to fix failing…

222770d

… cypress tests

fix: rollback tsconfig

d907108

fix: update eslint flags in pull request workflow for better JavaScri…

9994a03

…pt linting

fix: update Cypress configuration to use ES module syntax

84a1c10

Merge branch 'develop' into react-19-update

fcb1628

fix: add updated yarn file

9fd8b2e

Merge branch 'develop' into react-19-update

1083599

fix: typescript issues in cypress test

b263945

fix: remove test files from TypeScript exclusion in tsconfig

5ac2641

update yarn.lock

7d774d5

fix: update ESLint configuration and convert PostCSS config to ES mod…

9439a0f

…ule syntax

fix: convert PostCSS config to CommonJS module syntax

62eb2e5

fix: add @types/prop-types and update tsconfig include paths to fix t…

b4b3a2d

…ypescript issues

fix: update ESLint flags in pull request workflow to include all Java…

36db11d

…Script files

fix: reorder ESLint plugins

9e2fb12

fix: update ESLint flags in pull request workflow to target the src d…

e64bd8b

…irectory

fix: convert Cypress config to ES module syntax

678dec3

fix: update markdown lint fix command

e30919c

ThomasGross assigned kasperg Jan 8, 2025

ThomasGross added 5 commits January 13, 2025 12:51

fix: disable no-console rule for logging replacement results in post-…

4c926a3

…process-generated-graphql script

fix: roll back ESmodule to CommonJS to fix build phase

b0baec9

fix: ignore all config js and mjs files in ESLint linting

88c6cb1

Merge branch 'develop' into react-19-update

785aac2

update lock

7356ba1

ThomasGross requested a review from kasperg January 13, 2025 12:16

ThomasGross mentioned this pull request Jan 15, 2025

feat: update @typescript-eslint/eslint-plugin to version 7.18.0 #1618

Closed

kasperg assigned kasperg and unassigned ThomasGross Jan 16, 2025

kasperg requested changes Jan 16, 2025

View reviewed changes

kasperg assigned ThomasGross and unassigned kasperg Jan 16, 2025

ThomasGross added 10 commits January 21, 2025 17:25

fix: solve display name where its possible else leave a TODO

0567ad6

fix: solve display name where its possible else leave a TODO

c415874

refactor: add no alert to esconfig

e245530

refactor: re-introduce react/no-danger rule in eslint

8298276

refactor: reintroduce react/jsx-props-no-spreading rule in eslint and…

0af4457

… add todos

refactor: update eslint config to allow prop spreading in stories

cc73e3f

refactor: reintroduce import/no-cycle rule to eslint

94791ee

refactor: add aria-label to modal backdrop button for improved access…

2c4f7fd

…ibility

Merge branch 'develop' into react-19-update

c591fd6

feat: add updated yarn lock

bbfed14

ThomasGross requested a review from kasperg January 22, 2025 10:14

kasperg approved these changes Jan 24, 2025

View reviewed changes

ThomasGross added 3 commits January 24, 2025 11:15

fix: remove airbnb packages and update yarn lock

c1446bf

Merge branch 'develop' into react-19-update

bf2c364

fix: update ESLint rules with no-script-url and enforce error.log/war…

7df1b85

…n.log rule

ThomasGross merged commit ced8c07 into develop Jan 24, 2025
19 of 20 checks passed

ThomasGross deleted the react-19-update branch January 24, 2025 11:55

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React 19 update #1632

React 19 update #1632

ThomasGross commented Jan 7, 2025 •

edited

Loading

kasperg left a comment

kasperg Jan 16, 2025

kasperg Jan 16, 2025

kasperg Jan 16, 2025

kasperg Jan 16, 2025

kasperg Jan 16, 2025

kasperg Jan 16, 2025

kasperg Jan 16, 2025

kasperg Jan 16, 2025

kasperg Jan 24, 2025

ThomasGross commented Jan 24, 2025 •

edited

Loading

		// eslint-disable-next-line no-console
		console.log("Replacement results:", results);

		// eslint-disable-next-line react/display-name
		({ ...props }) => {

React 19 update #1632

React 19 update #1632

Conversation

ThomasGross commented Jan 7, 2025 • edited Loading

Link to issue

Description

kasperg left a 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ThomasGross commented Jan 24, 2025 • edited Loading

ThomasGross commented Jan 7, 2025 •

edited

Loading

ThomasGross commented Jan 24, 2025 •

edited

Loading