Bump react & sublibs (#204)

config/checkout-config.js

@@ -25,7 +25,7 @@ module.exports = {
     },
     resolve: {
         modules: ['node_modules', path.join(__dirname, 'src/app')],
-        extensions: ['.ts', '.tsx', '.js'],
+        extensions: ['.ts', '.tsx', '.js', '.mjs'],
         alias: {
             checkout: __dirname + '/../src/app'
         }

config/common-config.js

@@ -31,6 +31,11 @@ module.exports = (env) => ({
                 ],
                 exclude: /node_modules/
             },
+            {
+                test: /\.mjs$/,
+                include: /node_modules/,
+                type: 'javascript/auto'
+            },
             {
                 test: /\.css$/,
                 use: [

package.json

@@ -16,38 +16,34 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@dinero.js/currencies": "^2.0.0-alpha.8",
-    "@sentry/react": "7.48.0",
+    "@dinero.js/currencies": "2.0.0-alpha.1",
+    "@sentry/react": "7.57.0",
     "card-validator": "8.1.1",
     "credit-card-type": "9.1.0",
     "fingerprintjs2": "~2.1.0",
-    "framer-motion": "4.1.17",
+    "framer-motion": "10.12.18",
     "ismobilejs": "1.1.1",
-    "kjua": "^0.9.0",
-    "libphonenumber-js": "1.9.6",
+    "kjua": "0.9.0",
+    "libphonenumber-js": "1.10.37",
     "md5": "2.3.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-hook-form": "7.45.0",
-    "react-svg": "14.1.8",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-hook-form": "7.45.1",
+    "react-svg": "16.1.18",
     "styled-components": "5.3.3",
-    "uri-template": "1.0.3",
-    "uuid": "~8.3.2"
+    "uri-template": "1.0.3"
   },
   "devDependencies": {
-    "@testing-library/react-hooks": "8.0.1",
-    "@types/card-validator": "~4.1.0",
-    "@types/credit-card-type": "~7.0.0",
-    "@types/currency-formatter": "~1.3.0",
+    "@testing-library/react": "14.0.0",
+    "@types/card-validator": "4.1.0",
+    "@types/credit-card-type": "9.0.0",
     "@types/fingerprintjs2": "~2.0.0",
     "@types/jest": "29.5.0",
     "@types/node": "16.11.25",
-    "@types/react": "17.0.38",
-    "@types/react-dom": "17.0.11",
-    "@types/react-test-renderer": "17.0.1",
+    "@types/react": "18.2.14",
+    "@types/react-dom": "18.2.6",
+    "@types/react-test-renderer": "18.0.0",
     "@types/styled-components": "5.1.20",
-    "@types/url-parse": "~1.1.0",
-    "@types/uuid": "~8.3.0",
     "cache-loader": "4.1.0",
     "concurrently": "7.0.0",
     "copy-webpack-plugin": "~5.1.1",
@@ -60,8 +56,7 @@
     "jest-environment-jsdom": "29.5.0",
     "mini-css-extract-plugin": "~0.4.5",
     "prettier": "~1.19.1",
-    "react-test-renderer": "17.0.2",
-    "redux-devtools-extension": "2.13.9",
+    "react-test-renderer": "18.2.0",
     "rimraf": "~2.6.2",
     "style-loader": "~0.23.1",
     "svg-react-loader": "~0.4.6",

src/app/hooks/use-init-app.test.ts

@@ -1,4 +1,4 @@
-import { act, renderHook } from '@testing-library/react-hooks';
+import { act, renderHook } from '@testing-library/react';
 
 import { useInitApp } from './use-init-app';
 import { PaymentMethodName } from 'checkout/backend';

src/app/hooks/use-theme.test.ts

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '@testing-library/react';
 
 import { useTheme } from './use-theme';
 import { ThemeName } from 'checkout/themes';

src/app/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import { App } from './components/app';
 import { initialize } from './initialize';
@@ -9,8 +9,9 @@ import isNil from './utils/is-nil';
 const ON_COMPLETE_TIMEOUT_MS = 1000 * 5;
 
 initialize().then(([transport, initParams]) => {
-    const app = document.getElementById('app');
-    ReactDOM.render(
+    const container = document.getElementById('app');
+    const root = createRoot(container);
+    root.render(
         <App
             initParams={initParams}
             onComplete={() => {
@@ -21,10 +22,9 @@ initialize().then(([transport, initParams]) => {
                     if (!isNil(redirectUrl)) {
                         window.open(redirectUrl, '_self');
                     }
-                    ReactDOM.unmountComponentAtNode(app);
+                    root.unmount();
                 }, ON_COMPLETE_TIMEOUT_MS);
             }}
-        />,
-        app
+        />
     );
 });