Upgrade project to React 18 (#6941)

* chore: bump react version * fix: use createRoot instead of render * fix: fix some more imports & remove hot loader * fix: update testing library and fix tests * fix: fix some warnings in tests * chore: update deps for new packages * fix: uuid import in relation control
decaporg · Oct 20, 2023 · f8cb458 · f8cb458
1 parent b2160f7
commit f8cb458
Show file tree

Hide file tree

Showing 38 changed files with 1,545 additions and 3,933 deletions.
diff --git a/package.json b/package.json
@@ -91,13 +91,13 @@
     "@emotion/jest": "^11.11.0",
     "@octokit/rest": "^16.28.7",
     "@soda/friendly-errors-webpack-plugin": "^1.8.1",
-    "@storybook/addon-actions": "^5.3.6",
-    "@storybook/addon-links": "^5.3.6",
-    "@storybook/react": "^5.3.6",
+    "@storybook/addon-actions": "^7.5.1",
+    "@storybook/addon-links": "^7.5.1",
+    "@storybook/react": "^7.5.1",
     "@stylelint/postcss-css-in-js": "^0.37.2",
     "@testing-library/dom": "^8.0.0",
     "@testing-library/jest-dom": "^5.11.1",
-    "@testing-library/react": "^12.0.0",
+    "@testing-library/react": "^14.0.0",
     "@types/common-tags": "^1.8.0",
     "@types/jest": "^27.0.0",
     "@types/js-base64": "^3.0.0",
@@ -152,10 +152,9 @@
     "postcss": "^8.4.7",
     "postcss-scss": "^4.0.3",
     "prettier": "^2.3.0",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-hot-loader": "^4.13.1",
-    "react-test-renderer": "^16.8.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
     "rehype": "^7.0.0",
     "rimraf": "^3.0.0",
     "simple-git": "^3.0.0",

diff --git a/packages/decap-cms-app/package.json b/packages/decap-cms-app/package.json
@@ -66,8 +66,8 @@
     "uuid": "^8.3.2"
   },
   "peerDependencies": {
-    "react": "^16.8.4 || ^17.0.0",
-    "react-dom": "^16.8.4 || ^17.0.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "incrementToForceBump": 2
 }
diff --git a/packages/decap-cms-backend-azure/package.json b/packages/decap-cms-backend-azure/package.json
@@ -32,6 +32,6 @@
     "immutable": "^3.7.6",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
-    "react": "^16.8.4 || ^17.0.0"
+    "react": "^18.2.0"
   }
 }
diff --git a/packages/decap-cms-backend-bitbucket/package.json b/packages/decap-cms-backend-bitbucket/package.json
@@ -33,6 +33,6 @@
     "immutable": "^3.7.6",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
-    "react": "^16.8.4 || ^17.0.0"
+    "react": "^18.2.0"
   }
 }
diff --git a/packages/decap-cms-backend-git-gateway/package.json b/packages/decap-cms-backend-git-gateway/package.json
@@ -36,6 +36,6 @@
     "decap-cms-ui-default": "^3.0.0",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
-    "react": "^16.8.4 || ^17.0.0"
+    "react": "^18.2.0"
   }
 }
diff --git a/packages/decap-cms-backend-gitea/package.json b/packages/decap-cms-backend-gitea/package.json
@@ -31,6 +31,6 @@
     "immutable": "^3.7.6",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
-    "react": "^16.8.4 || ^17.0.0"
+    "react": "^18.2.0"
   }
 }
diff --git a/packages/decap-cms-backend-github/package.json b/packages/decap-cms-backend-github/package.json
@@ -38,6 +38,6 @@
     "decap-cms-ui-default": "^3.0.0",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
-    "react": "^16.8.4 || ^17.0.0"
+    "react": "^18.2.0"
   }
 }
diff --git a/packages/decap-cms-backend-gitlab/package.json b/packages/decap-cms-backend-gitlab/package.json
@@ -35,6 +35,6 @@
     "immutable": "^3.7.6",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
-    "react": "^16.8.4 || ^17.0.0"
+    "react": "^18.2.0"
   }
 }
diff --git a/packages/decap-cms-backend-proxy/package.json b/packages/decap-cms-backend-proxy/package.json
@@ -23,6 +23,6 @@
     "decap-cms-lib-util": "^3.0.0",
     "decap-cms-ui-default": "^3.0.0",
     "prop-types": "^15.7.2",
-    "react": "^16.8.4 || ^17.0.0"
+    "react": "^18.2.0"
   }
 }
diff --git a/packages/decap-cms-backend-test/package.json b/packages/decap-cms-backend-test/package.json
@@ -24,7 +24,7 @@
     "decap-cms-ui-default": "^3.0.0",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
-    "react": "^16.8.4 || ^17.0.0",
+    "react": "^18.2.0",
     "uuid": "^8.3.2"
   }
 }
diff --git a/packages/decap-cms-core/package.json b/packages/decap-cms-core/package.json
@@ -42,12 +42,11 @@
     "jwt-decode": "^3.0.0",
     "node-polyglot": "^2.3.0",
     "prop-types": "^15.7.2",
-    "react": "^16.8.4",
+    "react": "^18.2.0",
     "react-dnd": "^14.0.0",
     "react-dnd-html5-backend": "^14.0.0",
-    "react-dom": "^16.8.4",
+    "react-dom": "^18.2.0",
     "react-frame-component": "^5.2.1",
-    "react-hot-loader": "^4.8.0",
     "react-immutable-proptypes": "^2.1.0",
     "react-is": "16.13.1",
     "react-markdown": "^6.0.2",
@@ -87,8 +86,8 @@
     "lodash": "^4.17.11",
     "moment": "^2.24.0",
     "prop-types": "^15.7.2",
-    "react": "^16.8.4 || ^17.0.0",
-    "react-dom": "^16.8.4 || ^17.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-immutable-proptypes": "^2.1.0"
   },
   "devDependencies": {

diff --git a/packages/decap-cms-core/src/actions/__tests__/media.spec.ts b/packages/decap-cms-core/src/actions/__tests__/media.spec.ts
@@ -1,7 +1,7 @@
 import { Map } from 'immutable';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
-import { mocked } from 'ts-jest/utils';
+import { mocked } from 'jest-mock';
 
 import { getAsset, ADD_ASSET, LOAD_ASSET_REQUEST } from '../media';
 import { selectMediaFilePath } from '../../reducers/entries';

diff --git a/packages/decap-cms-core/src/bootstrap.js b/packages/decap-cms-core/src/bootstrap.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Provider, connect } from 'react-redux';
 import { Route, Router } from 'react-router-dom';
 import { GlobalStyles } from 'decap-cms-ui-default';
@@ -96,7 +96,8 @@ function bootstrap(opts = {}) {
   /**
    * Render application root.
    */
-  render(<Root />, getRoot());
+  const root = createRoot(getRoot());
+  root.render(<Root />);
 }
 
 export default bootstrap;
diff --git a/packages/decap-cms-core/src/components/App/App.js b/packages/decap-cms-core/src/components/App/App.js
@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { hot } from 'react-hot-loader';
 import { translate } from 'react-polyglot';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import styled from '@emotion/styled';
@@ -277,4 +276,4 @@ const mapDispatchToProps = {
   logoutUser,
 };
 
-export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(translate()(App)));
+export default connect(mapStateToProps, mapDispatchToProps)(translate()(App));
diff --git a/packages/decap-cms-core/src/components/Editor/__tests__/Editor.spec.js b/packages/decap-cms-core/src/components/Editor/__tests__/Editor.spec.js
@@ -65,7 +65,10 @@ describe('Editor', () => {
     expect(asFragment()).toMatchSnapshot();
     expect(console.error).toHaveBeenCalledTimes(1);
     expect(console.error).toHaveBeenCalledWith(
-      'Warning: Failed prop type: Required prop `entryDraft` was not specified in `Editor`.\n    in Editor',
+      'Warning: Failed %s type: %s%s',
+      'prop',
+      'Required prop `entryDraft` was not specified in `Editor`.',
+      expect.anything(),
     );
   });
 

diff --git a/packages/decap-cms-core/src/routing/__tests__/history.spec.ts b/packages/decap-cms-core/src/routing/__tests__/history.spec.ts
@@ -1,5 +1,5 @@
 import { createHashHistory } from 'history';
-import { mocked } from 'ts-jest/utils';
+import { mocked } from 'jest-mock';
 
 import type { History } from 'history';
 

diff --git a/packages/decap-cms-default-exports/package.json b/packages/decap-cms-default-exports/package.json
@@ -29,7 +29,7 @@
     "uuid": "^8.3.2"
   },
   "peerDependencies": {
-    "react": "^16.8.4 || ^17.0.0",
-    "react-dom": "^16.8.4 || ^17.0.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
 }
diff --git a/packages/decap-cms-editor-component-image/package.json b/packages/decap-cms-editor-component-image/package.json
@@ -22,6 +22,6 @@
     "cross-env": "^7.0.0"
   },
   "peerDependencies": {
-    "react": "^16.8.4 || ^17.0.0"
+    "react": "^18.2.0"
   }
 }
diff --git a/packages/decap-cms-ui-default/package.json b/packages/decap-cms-ui-default/package.json
@@ -25,6 +25,6 @@
     "@emotion/styled": "^11.11.0",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
-    "react": "^16.8.4 || ^17.0.0"
+    "react": "^18.2.0"
   }
 }
diff --git a/packages/decap-cms-widget-boolean/package.json b/packages/decap-cms-widget-boolean/package.json
@@ -24,7 +24,7 @@
     "decap-cms-ui-default": "^3.0.0",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
-    "react": "^16.8.4 || ^17.0.0",
+    "react": "^18.2.0",
     "react-immutable-proptypes": "^2.1.0"
   }
 }
diff --git a/packages/decap-cms-widget-code/package.json b/packages/decap-cms-widget-code/package.json
@@ -28,7 +28,7 @@
     "codemirror": "^5.46.0",
     "decap-cms-ui-default": "^3.0.0",
     "lodash": "^4.17.11",
-    "react": "^16.8.4 || ^17.0.0"
+    "react": "^18.2.0"
   },
   "dependencies": {
     "react-codemirror2": "^7.0.0",

diff --git a/packages/decap-cms-widget-colorstring/package.json b/packages/decap-cms-widget-colorstring/package.json
@@ -28,6 +28,6 @@
     "@emotion/styled": "^11.11.0",
     "decap-cms-ui-default": "^3.0.0",
     "prop-types": "^15.7.2",
-    "react": "^16.8.4 || ^17.0.0"
+    "react": "^18.2.0"
   }
 }
diff --git a/packages/decap-cms-widget-datetime/package.json b/packages/decap-cms-widget-datetime/package.json
@@ -23,7 +23,7 @@
   },
   "peerDependencies": {
     "@emotion/react": "^11.11.1",
-    "react": "^16.8.4 || ^17.0.0"
+    "react": "^18.2.0"
   },
   "dependencies": {
     "react-datetime": "^3.1.1"

diff --git a/packages/decap-cms-widget-file/package.json b/packages/decap-cms-widget-file/package.json
@@ -34,7 +34,7 @@
     "decap-cms-ui-default": "^3.0.0",
     "immutable": "^3.7.6",
     "prop-types": "^15.7.2",
-    "react": "^16.8.4 || ^17.0.0",
+    "react": "^18.2.0",
     "react-immutable-proptypes": "^2.1.0",
     "uuid": "^8.3.2"
   }

diff --git a/packages/decap-cms-widget-image/package.json b/packages/decap-cms-widget-image/package.json
@@ -28,6 +28,6 @@
     "decap-cms-widget-file": "^3.0.0",
     "immutable": "^3.7.6",
     "prop-types": "^15.7.2",
-    "react": "^16.8.4 || ^17.0.0"
+    "react": "^18.2.0"
   }
 }
diff --git a/packages/decap-cms-widget-list/package.json b/packages/decap-cms-widget-list/package.json
@@ -34,7 +34,7 @@
     "immutable": "^3.7.6",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
-    "react": "^16.8.4 || ^17.0.0",
+    "react": "^18.2.0",
     "react-immutable-proptypes": "^2.1.0"
   }
 }
diff --git a/packages/decap-cms-widget-map/package.json b/packages/decap-cms-widget-map/package.json
@@ -25,7 +25,7 @@
     "decap-cms-ui-default": "^3.0.0",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
-    "react": "^16.8.4 || ^17.0.0",
+    "react": "^18.2.0",
     "react-immutable-proptypes": "^2.1.0"
   },
   "dependencies": {

diff --git a/packages/decap-cms-widget-markdown/package.json b/packages/decap-cms-widget-markdown/package.json
@@ -51,8 +51,8 @@
     "immutable": "^3.7.6",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
-    "react": "^16.8.4 || ^17.0.0",
-    "react-dom": "^16.8.4 || ^17.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-immutable-proptypes": "^2.1.0"
   },
   "devDependencies": {

diff --git a/packages/decap-cms-widget-number/package.json b/packages/decap-cms-widget-number/package.json
@@ -22,6 +22,6 @@
   "peerDependencies": {
     "decap-cms-ui-default": "^3.0.0",
     "prop-types": "^15.7.2",
-    "react": "^16.8.4 || ^17.0.0"
+    "react": "^18.2.0"
   }
 }
diff --git a/packages/decap-cms-widget-object/package.json b/packages/decap-cms-widget-object/package.json
@@ -28,7 +28,7 @@
     "immutable": "^3.7.6",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
-    "react": "^16.8.4 || ^17.0.0",
+    "react": "^18.2.0",
     "react-immutable-proptypes": "^2.1.0"
   }
 }
diff --git a/packages/decap-cms-widget-relation/package.json b/packages/decap-cms-widget-relation/package.json
@@ -35,7 +35,7 @@
     "immutable": "^3.7.6",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
-    "react": "^16.8.4 || ^17.0.0",
+    "react": "^18.2.0",
     "uuid": "^8.3.2"
   }
 }
diff --git a/packages/decap-cms-widget-relation/src/RelationControl.js b/packages/decap-cms-widget-relation/src/RelationControl.js
@@ -19,7 +19,7 @@ import {
 import { SortableContext, horizontalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
 import { restrictToParentElement } from '@dnd-kit/modifiers';
 import { CSS } from '@dnd-kit/utilities';
-import uuid from 'uuid';
+import { v4 as uuid } from 'uuid';
 
 function arrayMove(array, from, to) {
   const slicedArray = array.slice();

diff --git a/packages/decap-cms-widget-relation/src/__tests__/relation.spec.js b/packages/decap-cms-widget-relation/src/__tests__/relation.spec.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { fromJS } from 'immutable';
-import { render, fireEvent, waitFor } from '@testing-library/react';
+import { render, fireEvent, waitFor, act } from '@testing-library/react';
 
 import { DecapCmsWidgetRelation } from '../';
 
@@ -151,12 +151,16 @@ class RelationController extends React.Component {
   }
 
   handleOnChange = jest.fn(value => {
-    this.setState({ ...this.state, value });
+    act(() => {
+      this.setState({ ...this.state, value });
+    });
   });
 
   setQueryHits = jest.fn(queryHits => {
     if (this.mounted) {
-      this.setState({ ...this.state, queryHits });
+      act(() => {
+        this.setState({ ...this.state, queryHits });
+      });
     }
   });
 

diff --git a/packages/decap-cms-widget-select/package.json b/packages/decap-cms-widget-select/package.json
@@ -26,7 +26,7 @@
     "decap-cms-ui-default": "^3.0.0",
     "immutable": "^3.7.6",
     "prop-types": "^15.7.2",
-    "react": "^16.8.4 || ^17.0.0",
+    "react": "^18.2.0",
     "react-immutable-proptypes": "^2.1.0"
   },
   "dependencies": {

diff --git a/packages/decap-cms-widget-string/package.json b/packages/decap-cms-widget-string/package.json
@@ -22,6 +22,6 @@
   "peerDependencies": {
     "decap-cms-ui-default": "^3.0.0",
     "prop-types": "^15.7.2",
-    "react": "^16.8.4 || ^17.0.0"
+    "react": "^18.2.0"
   }
 }
diff --git a/packages/decap-cms-widget-text/package.json b/packages/decap-cms-widget-text/package.json
@@ -28,6 +28,6 @@
   "peerDependencies": {
     "decap-cms-ui-default": "^3.0.0",
     "prop-types": "^15.7.2",
-    "react": "^16.8.4 || ^17.0.0"
+    "react": "^18.2.0"
   }
 }
diff --git a/packages/decap-cms/package.json b/packages/decap-cms/package.json
@@ -26,9 +26,8 @@
     "decap-cms-media-library-cloudinary": "^3.0.1",
     "decap-cms-media-library-uploadcare": "^3.0.0",
     "file-loader": "^6.2.0",
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4",
-    "react-hot-loader": "^4.13.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "svgo-loader": "^3.0.3"
   },
   "incrementToForceBump": 2