feat: upgrade react to v18

.github/workflows/dhis2-verify-lib.yml

@@ -29,7 +29,7 @@ jobs:
             - name: Build
               run: yarn build
 
-            - uses: actions/upload-artifact@v2
+            - uses: actions/upload-artifact@v4
               with:
                   name: lib-build
                   path: |
@@ -61,7 +61,7 @@ jobs:
               with:
                   node-version: 18.x
 
-            - uses: actions/download-artifact@v2
+            - uses: actions/download-artifact@v4
               with:
                   name: lib-build
 
@@ -83,7 +83,7 @@ jobs:
               with:
                   node-version: 18.x
 
-            - uses: actions/download-artifact@v2
+            - uses: actions/download-artifact@v4
               with:
                   name: lib-build
 

adapter/package.json

@@ -30,8 +30,8 @@
         "@testing-library/react-hooks": "^8.0.1",
         "enzyme": "^3.11.0",
         "enzyme-adapter-react-16": "^1.15.5",
-        "react": "^16.8",
-        "react-dom": "^16.8"
+        "react": "^18",
+        "react-dom": "^18"
     },
     "scripts": {
         "build": "d2-app-scripts build",
@@ -44,7 +44,7 @@
         "classnames": "^2",
         "moment": "^2",
         "prop-types": "^15",
-        "react": "^16.8",
+        "react": "^16.8 || ^18",
         "react-dom": "^16.8",
         "styled-jsx": "^4"
     },

cli/config/init/App.test.jsx

@@ -1,15 +1,16 @@
 import { CustomDataProvider } from '@dhis2/app-runtime'
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import App from './App.jsx'
 
 it('renders without crashing', () => {
     const div = document.createElement('div')
-    ReactDOM.render(
+    const root = createRoot(div)
+
+    root.render(
         <CustomDataProvider>
             <App />
-        </CustomDataProvider>,
-        div
+        </CustomDataProvider>
     )
-    ReactDOM.unmountComponentAtNode(div)
+    root.unmount()
 })

cli/src/commands/start.js

@@ -24,6 +24,9 @@ const handler = async ({
     proxyPort,
     host,
 }) => {
+    // ToDo: remove before merging
+    reporter.info('     ::: using react@18 :::')
+
     const paths = makePaths(cwd)
 
     const mode = 'development'

shell/package.json

@@ -24,8 +24,8 @@
         "moment": "^2.29.1",
         "post-robot": "^10.0.46",
         "prop-types": "^15.7.2",
-        "react": "^16.8.6",
-        "react-dom": "^16.8.6",
+        "react": "^18",
+        "react-dom": "^18",
         "source-map-explorer": "^2.1.0",
         "styled-jsx": "^4.0.1",
         "typeface-roboto": "^0.0.75",

shell/src/App.test.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import App from './App.jsx'
 
 it('renders without crashing', () => {
     const div = document.createElement('div')
-    ReactDOM.render(<App />, div)
-    ReactDOM.unmountComponentAtNode(div)
+    const root = createRoot(div)
+    root.render(<App />)
+    root.unmount()
 })

shell/src/index.jsx

@@ -1,14 +1,18 @@
 import { CssReset } from '@dhis2/ui'
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import App from './App.jsx'
 import 'typeface-roboto'
 import './index.css'
 
-ReactDOM.render(
+const container = document.getElementById('dhis2-app-root')
+const root = createRoot(container)
+root.render(
     <>
         <CssReset />
         <App />
-    </>,
-    document.getElementById('dhis2-app-root')
+    </>
 )
+
+// ToDo: remove before merging
+console.log('     ::: using react@18 :::')

shell/src/plugin.index.jsx

@@ -1,14 +1,15 @@
 import { CssReset } from '@dhis2/ui'
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import Plugin from './Plugin.jsx'
 import 'typeface-roboto'
 import './index.css'
 
-ReactDOM.render(
+const container = document.getElementById('dhis2-app-root')
+const root = createRoot(container)
+root.render(
     <>
         <CssReset />
         <Plugin />
-    </>,
-    document.getElementById('dhis2-app-root')
+    </>
 )