React 18

[steve9164]

Before merging

• Revert ec350bb

What this PR does

Part of #6538.

Upgrade React to 18 and Typescript to 5.

Test me

Can be tested at http://ci.terria.io/react18-sd/

Checklist

• There are unit tests to verify my changes are correct or unit tests aren't applicable (if so, write quick reason why unit tests don't exist)
• I've updated relevant documentation in doc/.
• I've updated CHANGES.md with what I changed.
• I've provided instructions in the PR description on how to test this PR.

[steve9164]

Tests passing!

[zoran995]

Can we also remove import * as React from "react"; to stick to more modern syntax? It also might reduce bundle size and build speed. We can also do it as a follow-up ticket

[nf-s]

Thanks for taking this on @steve9164 !

A few things I noticed that aren't working correctly -

Chart expand/download buttons

• Open "All generation types"
• Click on point
• Click on "expand" or "download" buttons in feature info

A few other issues caused by what @zoran995 commented on - showDropdownAsModal is not defined

I agree with @zoran995 on reducing use of import * as React from "react" - it would be great to at least remove all of these from .tsx files

I think we also need to update to the new React Root API - https://react.dev/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis

Until you switch to the new API, your app will behave as if it's running React 17

I believe there is only two usages of ReactDOM.render in https://github.com/TerriaJS/TerriaMap/blob/main/lib/Views/render.jsx#L9

[nf-s]

Should we update any of these other react-based libraries?

[zoran995]

IMO there are some dependencies that probably should be upgraded as they list older versions of react as peer dependencies (quick check can be done via npx check-peer-dependencies --yarn)

• @visx/* should be upgraded to at least v2.10.0, it is the first version that lists react 18 as dependency
• html-to-react version used has peer dependency on react 16/17, newer versions are on react 18
• react-anything-sortable
• react-datepicker
• react-responsive
• react-select
• react-swipeable
• react-virtual (I think the only issue with the upgrade is the wrong usage of createRef in functional component and useRef should be used instead b6390c5)
• react-shallow-testutils

[steve9164]

It's unlikely that the libraries are incompatible with React 18, and more likely that library authors are using version strings such as

"react": "^16.0 || ^17.0"

when they should use the standard:

"react": "^0.13.0 || ^0.14.0 || >=15"

but I'll check the usage of those libraries

[steve9164]

A library that definitely needs updating is mobx-react

[zoran995]

@steve9164 there will be issues with libraries listing react in peerDependencies as

"react": "^16.0 || ^17.0"

if we are on react 18 after upgrading to the new version of the node which comes with a new npm that automatically installs and checks peerDependencies. You can see the error occurring in #6986

[steve9164]

Breaking into smaller PRs. Starting with #7050