@quintype/framework 7.4.0-react-18.0 → 7.4.0-upgrade-react.0

package/client/start.js

@@ -11,7 +11,7 @@ import { BreakingNews, CLIENT_SIDE_RENDERED, NAVIGATE_TO_PAGE, PAGE_LOADING } fr
 import { createBrowserHistory } from "history";
 import get from "lodash/get";
 import React from "react";
-import { createRoot, hydrateRoot } from "react-dom/client";
+import ReactDOM from "react-dom";
 import { Provider } from "react-redux";
 import { IsomorphicComponent } from "../isomorphic/component";
 import { makePickComponentSync } from "../isomorphic/impl/make-pick-component-sync";
@@ -181,21 +181,10 @@ export function maybeSetUrl(path, title) {
 export function renderComponent(clazz, container, store, props = {}, callback) {
   const component = React.createElement(Provider, { store }, React.createElement(clazz, props || {}));
 
-  function AppWithCallbackAfterRender() {
-    useEffect(() => {
-      callback();
-    });
-
-    return component;
-  }
-
-  let root = createRoot(document.getElementById(container));
-
   if (props.hydrate) {
-    root = hydrateRoot(document.getElementById(container));
+    return ReactDOM.hydrate(component, document.getElementById(container), callback);
   }
-
-  return root.render(<AppWithCallbackAfterRender />);
+  return ReactDOM.render(component, document.getElementById(container), callback);
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/framework",
-  "version": "7.4.0-react-18.0",
+  "version": "7.4.0-upgrade-react.0",
   "description": "Libraries to help build Quintype Node.js apps",
   "main": "index.js",
   "scripts": {
@@ -47,8 +47,8 @@
     "mocha-snapshots": "^4.2.0",
     "morgan": "^1.10.0",
     "path-to-regexp": "^6.2.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-redux": "^7.2.5",
     "react-router": "^5.2.1",
     "redux": "^4.1.1",

package/test/babel.js

@@ -2,11 +2,7 @@ const ROOT_PATH = require("path").resolve(__dirname, "..");
 
 require("babel-register")({
   presets: ["react"],
-  plugins: [
-    "transform-es2015-modules-commonjs",
-    "transform-object-rest-spread",
-    "quintype-assets",
-  ],
+  plugins: ["transform-es2015-modules-commonjs", "transform-object-rest-spread", "quintype-assets"],
   ignore(file) {
     return file.startsWith(ROOT_PATH + "/node_modules");
   },