React version bumping from 17.x to 18.x #2191

Tharanidk · 2023-09-25T04:18:34Z

Problem

We need to bump the React version from 17.x to 18.x to allow developers the flexibility to use new libraries when they develop new features.

Solution

Bump the React version to 18.0.0 in devportal, admin portal, and publisher.
Bump Material UI from V4 to V5
Fix the incompatible dependencies after the bump in all three portals

Affected Component

APIM

Version

4.3.0

Implementation

No response

Related Issues

React Bump to 17.X : #2160

Suggested Labels

No response

Tharanidk · 2023-09-25T10:08:39Z

Work Log

I researched the React update and identified the dependencies with issues when moving from React version 17.x to 18.x.You can find the detailed findings in this,
https://docs.google.com/spreadsheets/d/1tK_u5qh90uvqLoLESwJHGxxwqqgOP2wNleaoMpBX9Lc/edit#gid=0
I updated the React version to 18.0.0 in the package.json file.
I identified that Material-UI was incompatible with React 18.x and needed to be updated from version 4 to version 5, as previously identified.
For one of the portals, I encountered over 100 file changes. After running the script, I am currently working on resolving the breaking changes.

Tharanidk · 2023-10-01T08:17:37Z

Work Log

Changed issues with imports after running the script.
Fixed the issues
Remove unused import statements.

Tharanidk · 2023-10-04T05:26:05Z

Getting the below errors in devportal console

DevPortal.jsx:105 Error while receiving settings :  TypeError: Cannot read properties of null (reading 'IsAnonymousModeEnabled')
    at DevPortal.jsx:96:42

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at Object.throwInvalidHookError (react-dom.development.js:16227:1)
    at Object.useContext (react.development.js:1618:1)
    at useTheme (useTheme.js:4:17)
    at ThemeProvider (ThemeProvider.js:34:30)
    at ./source/src/app/components/Base/index.jsx (index.jsx:662:91)
    at __webpack_require__ (bootstrap:19:1)
    at ./source/src/app/ProtectedApp.jsx (LoginDenied.jsx:79:18)
    at Function.__webpack_require__ (bootstrap:19:1)
    
react-dom.development.js:18687 The above error occurred in one of your React components:

    at Lazy
    at Route (https://localhost:9443/devportal/site/public/dist/index.bundle.js:97162:29)
    at Switch (https://localhost:9443/devportal/site/public/dist/index.bundle.js:97364:29)
    at IntlProvider (https://localhost:9443/devportal/site/public/dist/index.bundle.js:96409:47)
    at Suspense
    at Router (https://localhost:9443/devportal/site/public/dist/index.bundle.js:96781:30)
    at BrowserRouter (https://localhost:9443/devportal/site/public/dist/index.bundle.js:10456:5)
    at StylesProvider (https://localhost:9443/devportal/site/public/dist/index.bundle.js:6179:24)
    at ThemeProvider (https://localhost:9443/devportal/site/public/dist/index.bundle.js:6347:24)
    at DevPortal (https://localhost:9443/devportal/site/public/dist/index.bundle.js:9989:5)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

started changing files manually to ignore these issues.

lasanthaS · 2023-10-06T04:33:03Z

Work Log

Hi all,

I started working on the ReactJS and Material UI upgrade for the Publisher portal.

Currently installed the ReactJS and Material UI latest versions side-by-side along with the existing/old versions and started the migration of the components from the previous version to the latest version. The rationale behind this approach is to avoid the risk of breaking the existing functionality and to have a smooth migration. Once all the components are migrated to the latest ReactJS & MaterialUI versions, the old dependencies can be removed from the app.

Migrated the components from @material-ui/core to @mui/material package
Migrated the components from @material-ui/icons to @mui/icons-material package

Thanks and regards,
Lasantha Samarakoon

Tharanidk · 2023-10-07T11:47:58Z

Work Log

Started working on the Admin portal
Migrated react from 17.0.0 to 18.0.0
Migrated components from @material-ui/lab (^4.0.0-alpha.61) to @mui/lab, @mui/material

Tharanidk · 2023-10-10T18:26:10Z

Work Log

Migrated components from @material-ui/core to @mui/styles, @mui/material
Migrated components from @material-ui/icons to @mui/icons-material

Tharanidk · 2023-10-11T18:22:54Z

Work Log

After changing all imports admin portal works fine.
Working on setting up themes as previous

Lakith-Rambukkanage · 2024-01-12T06:39:50Z

Admin portal update

@@ -10,7 +10,7 @@
-        "build:prod": "rm -R site/public/dist/; npm rum i18n && NODE_ENV=production NODE_OPTIONS=--max_old_space_size=4096 webpack --mode production --stats=errors-only",
+        "build:prod": "rm -R site/public/dist/; npm run i18n && NODE_ENV=production NODE_OPTIONS=--
@@ -25,15 +25,13 @@
-        "@emotion/react": "^11.11.1",
+        "@emotion/react": "^11.11.3",
-        "@material-ui/core": "^4.12.4",
-        "@material-ui/icons": "^4.11.2",
-        "@mui/icons-material": "^5.14.12",
-        "@mui/lab": "^5.0.0-alpha.147",
-        "@mui/material": "^5.14.10",
-        "@mui/styles": "^5.14.10",
+        "@mui/icons-material": "^5.15.4",
+        "@mui/lab": "^5.0.0-alpha.160",
+        "@mui/material": "^5.15.4",
+        "@mui/system": "^5.15.4",
@@ -44,7 +42,7 @@
-        "mui-datatables": "^3.8.5",
+        "mui-datatables": "^4.3.0",
@@ -98,7 +96,7 @@
-        "react-hot-loader": "^4.13.0",
+        "react-refresh": "^0.14.0",

React-hot-loader has to be removed since it's no longer supported [1]. React-refresh [4] has to be used from here onwards which is supported officially by react. Following [2][3][5] for the implementation

[1] gaearon/react-hot-loader#1808
[2] https://javascript.plainenglish.io/react-fast-refresh-the-new-react-hot-reloader-652c6645548c
[3] facebook/react#16604 (comment)
[4] https://www.npmjs.com/package/react-refresh
[5] https://github.com/pmmmwh/react-refresh-webpack-plugin

Lakith-Rambukkanage · 2024-01-12T10:09:39Z

thisaltennakoon · 2024-01-15T14:43:12Z

DevPortal portal update

Upgrade MUI version from v4 to v5
Upgrade react version from 17 to 18
Fixed all the compilation errors

lasanthaS · 2024-01-29T18:42:50Z

Progress related to the ReactJS 18 upgrade in each of the portals could be tracked via the following sub-tasks.

Publisher Portal - Upgrade ReactJS 18 in Publisher Portal #2438
Admin Portal
Dev Portal

thisaltennakoon · 2024-02-25T09:14:36Z

tharikaGitHub · 2024-03-03T06:48:29Z

Closing as the task is completed.

Tharanidk added Type/Improvement Priority/Normal Component/APIM 4.3.0 labels Sep 25, 2023

Tharanidk self-assigned this Sep 25, 2023

github-actions bot added the Missing/Component label Sep 25, 2023

Tharanidk removed the Missing/Component label Sep 25, 2023

lasanthaS self-assigned this Oct 2, 2023

nandika unassigned lasanthaS Oct 26, 2023

npamudika assigned dulithsenanayake and thisaltennakoon and unassigned Tharanidk Jan 3, 2024

npamudika added this to the 4.3.0-M1 milestone Jan 3, 2024

npamudika added 4.3.0-M1 4.3.0 M1 Milestone React-UI labels Jan 3, 2024

thisaltennakoon assigned Lakith-Rambukkanage Jan 11, 2024

Lakith-Rambukkanage mentioned this issue Jan 16, 2024

[Admin Portal] React 18 version upgrade wso2/apim-apps#528

Closed

npamudika removed this from the 4.3.0-M1 milestone Jan 17, 2024

npamudika added 4.3.0-alpha and removed 4.3.0-M1 4.3.0 M1 Milestone labels Jan 17, 2024

npamudika added this to the 4.3.0-Alpha milestone Jan 17, 2024

lasanthaS mentioned this issue Jan 29, 2024

Upgrade ReactJS 18 in Publisher Portal #2438

Closed

lasanthaS self-assigned this Jan 29, 2024

Lakith-Rambukkanage mentioned this issue Jan 30, 2024

[Admin Portal] Error on adding Application Throttling policies without optional burst control #2441

Closed

thisaltennakoon mentioned this issue Feb 5, 2024

Upgrading React 18 of DevPortal wso2/apim-apps#539

Closed

This was referenced Feb 18, 2024

[Duplicate] React18 upgrade in Publisher Portal wso2/apim-apps#547

Closed

React18 upgrade in Publisher Portal wso2/apim-apps#550

Closed

[Feature Branch] [Publisher Portal] React 18 version upgrade wso2/apim-apps#551

Merged

Lakith-Rambukkanage mentioned this issue Feb 20, 2024

[Feature Branch] [Admin Portal] React 18 version upgrade wso2/apim-apps#552

Merged

thisaltennakoon mentioned this issue Feb 20, 2024

[Feature Branch] [Developer Portal] React 18 version upgrade wso2/apim-apps#553

Merged

8 tasks

tharikaGitHub closed this as completed Mar 3, 2024

Lakith-Rambukkanage mentioned this issue Jun 10, 2024

Upgrade NPM and Dependancies of UI portals #2942

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React version bumping from 17.x to 18.x #2191

React version bumping from 17.x to 18.x #2191

Tharanidk commented Sep 25, 2023

Tharanidk commented Sep 25, 2023

Tharanidk commented Oct 1, 2023

Tharanidk commented Oct 4, 2023

lasanthaS commented Oct 6, 2023 •

edited

Loading

Tharanidk commented Oct 7, 2023

Tharanidk commented Oct 10, 2023

Tharanidk commented Oct 11, 2023

Lakith-Rambukkanage commented Jan 12, 2024 •

edited

Loading

Lakith-Rambukkanage commented Jan 12, 2024 •

edited

Loading

thisaltennakoon commented Jan 15, 2024

lasanthaS commented Jan 29, 2024 •

edited

Loading

thisaltennakoon commented Feb 25, 2024 •

edited

Loading

tharikaGitHub commented Mar 3, 2024

React version bumping from 17.x to 18.x #2191

React version bumping from 17.x to 18.x #2191

Comments

Tharanidk commented Sep 25, 2023

Problem

Solution

Affected Component

Version

Implementation

Related Issues

Suggested Labels

Tharanidk commented Sep 25, 2023

Work Log

Tharanidk commented Oct 1, 2023

Work Log

Tharanidk commented Oct 4, 2023

lasanthaS commented Oct 6, 2023 • edited Loading

Work Log

Tharanidk commented Oct 7, 2023

Tharanidk commented Oct 10, 2023

Tharanidk commented Oct 11, 2023

Lakith-Rambukkanage commented Jan 12, 2024 • edited Loading

Admin portal update

Lakith-Rambukkanage commented Jan 12, 2024 • edited Loading

MUI upgrade [Admin portal]

thisaltennakoon commented Jan 15, 2024

DevPortal portal update

lasanthaS commented Jan 29, 2024 • edited Loading

thisaltennakoon commented Feb 25, 2024 • edited Loading

DevPortal portal progress update

tharikaGitHub commented Mar 3, 2024

lasanthaS commented Oct 6, 2023 •

edited

Loading

Lakith-Rambukkanage commented Jan 12, 2024 •

edited

Loading

Lakith-Rambukkanage commented Jan 12, 2024 •

edited

Loading

lasanthaS commented Jan 29, 2024 •

edited

Loading

thisaltennakoon commented Feb 25, 2024 •

edited

Loading