#1772 Replace React-hot-loader with React-fast-refresh (#1773)

Signed-off-by: srikant <[email protected]>

Author: srikant-ch5

canvas_modules/harness/package.json

@@ -38,6 +38,7 @@
     "@carbon/charts-react": "1.15.3",
     "@carbon/react": "^1.52.0",
     "@elyra/canvas": "file:../common-canvas",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
     "ajv": "8.12.0",
     "autoprefixer": "10.4.19",
     "babel-loader": "9.1.3",
@@ -69,7 +70,6 @@
     "prop-types": "15.8.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-hot-loader": "4.13.1",
     "react-inlinesvg": "4.1.3",
     "react-intl": "6.6.3",
     "react-redux": "7.2.8",

canvas_modules/harness/src/client/App.js

@@ -25,7 +25,6 @@ import { Tooltip as ReactTooltip } from "react-tooltip";
 import JavascriptFileDownload from "js-file-download";
 import { FormattedMessage, IntlProvider } from "react-intl";
 import { forIn, get, has, isEmpty, isEqual } from "lodash";
-import { hot } from "react-hot-loader/root";
 import classNames from "classnames";
 import { v4 as uuid4 } from "uuid";
 
@@ -2799,4 +2798,4 @@ class App extends React.Component {
 	}
 }
 
-export default hot(App);
+export default App;

canvas_modules/harness/src/client/app-small.js

@@ -21,8 +21,6 @@ import AllTypesCanvas from "../../test_resources/diagrams/allTypesCanvas.json";
 import ModelerPalette from "../../test_resources/palettes/modelerPalette.json";
 // Note use "@elyra/canvas" instead of "common-canvas" here, if you are importing from the NPM module.
 import { CommonCanvas, CanvasController } from "common-canvas"; // eslint-disable-line import/no-unresolved
-// This library is only needed if you want to use hot loading during development.
-import { hot } from "react-hot-loader/root";
 
 class App extends React.Component {
 	constructor(props) {
@@ -195,4 +193,4 @@ class App extends React.Component {
 	}
 }
 
-export default hot(App);
+export default App;

canvas_modules/harness/src/client/app-tiny.js

@@ -22,7 +22,6 @@ import ModelerPalette from "../../test_resources/palettes/modelerPalette.json";
 // Note use "@elyra/canvas" instead of "common-canvas" here, if you are importing from the NPM module.
 import { CommonCanvas, CanvasController } from "common-canvas"; // eslint-disable-line import/no-unresolved
 // This library is only needed if you want to use hot loading during development.
-import { hot } from "react-hot-loader/root";
 
 class App extends React.Component {
 	constructor(props) {
@@ -46,4 +45,4 @@ class App extends React.Component {
 	}
 }
 
-export default hot(App);
+export default App;

canvas_modules/harness/src/client/components/common-properties-components.jsx

@@ -18,7 +18,6 @@
 
 import React from "react";
 import { Link } from "react-router-dom";
-import { hot } from "react-hot-loader/root";
 import { Button, Dropdown } from "@carbon/react";
 import FunctionList from "../constants/json/functionlist.json";
 import {
@@ -2273,4 +2272,4 @@ class CommonPropertiesComponents extends React.Component {
 	}
 }
 
-export default hot(CommonPropertiesComponents);
+export default CommonPropertiesComponents;

canvas_modules/harness/src/client/components/common-properties-conditions.jsx

@@ -18,7 +18,6 @@
 
 import React from "react";
 import { Link } from "react-router-dom";
-import { hot } from "react-hot-loader/root";
 import { Button, Dropdown } from "@carbon/react";
 import {
 	TEXTFIELD_ERROR_PROPS_INFO,
@@ -1306,4 +1305,4 @@ class CommonPropertiesComponents extends React.Component {
 	}
 }
 
-export default hot(CommonPropertiesComponents);
+export default CommonPropertiesComponents;

canvas_modules/harness/webpack.config.dev.js

@@ -23,13 +23,13 @@ const webpack = require("webpack");
 const babelOptions = require("./scripts/babel/babelOptions").babelOptions;
 const constants = require("./lib/constants");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
+const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
 
 // Globals
 
 // Entry & Output files ------------------------------------------------------------>
 
 const entry = [
-	"react-hot-loader/patch",
 	"webpack-hot-middleware/client",
 	"@babel/polyfill",
 	"./src/client/index.js",
@@ -49,9 +49,6 @@ const output = {
 };
 
 
-// Loaders ------------------------------------------------------------>
-babelOptions.plugins.push("react-hot-loader/babel"); // needed for HMR support
-
 const rules = [
 	{
 		test: /\.js(x?)$/,
@@ -115,7 +112,8 @@ const plugins = [
 	new webpack.SourceMapDevToolPlugin({
 		module: true,
 		columns: false
-	})
+	}),
+	new ReactRefreshWebpackPlugin(),
 ];
 
 // Exports ------------------------------------------------------------>