Revert "F #3951: Add react-refresh dependency to dev mode (#899)"

This reverts commit 15b099f.

src/fireedge/package.json

@@ -25,7 +25,6 @@
     "opennebula"
   ],
   "devDependencies": {
-    "@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
     "eslint": "7.11.0",
     "eslint-config-prettier": "6.11.0",
     "eslint-config-standard": "14.1.1",
@@ -40,7 +39,7 @@
     "eslint-plugin-standard": "4.0.1",
     "fireedge-genpotfile": "1.1.0",
     "fireedge-pojson": "1.1.0",
-    "react-refresh": "0.9.0",
+    "react-hot-loader": "4.13.0",
     "webpack-dev-middleware": "3.7.2",
     "webpack-hot-middleware": "2.25.0"
   },
@@ -127,4 +126,4 @@
     "yup": "0.29.3",
     "zeromq": "5.2.0"
   }
-}
+}

src/fireedge/src/client/dev/index.js

@@ -19,4 +19,18 @@ import { render } from 'react-dom'
 import store from 'client/store'
 import App from 'client/dev/_app'
 
-render(<App store={store} />, document.getElementById('root'))
+render(
+  <App store={store} />,
+  document.getElementById('root')
+)
+
+if (process.env.NODE_ENV === 'development' && module.hot) {
+  module.hot.accept('./_app', () => {
+    const SyncApp = require('./_app').default
+    render(<SyncApp store={store} />, document.getElementById('root'))
+  })
+
+  module.hot.accept('../reducers', () => {
+    store.replaceReducer(require('../reducers').default)
+  })
+}

src/fireedge/src/client/reducers/auth.js

@@ -37,7 +37,7 @@ const initial = {
   settings: {
     scheme: DEFAULT_SCHEME,
     lang: DEFAULT_LANGUAGE,
-    disableanimations: 'NO'
+    disableanimations: 'YES'
   },
   isLoginInProcess: false,
   isLoading: false,

src/fireedge/src/server/index.js

@@ -61,24 +61,26 @@ const userLog = appConfig.log || 'dev'
 
 if (env && env.NODE_ENV && env.NODE_ENV === defaultWebpackMode) {
   try {
+    // eslint-disable-next-line import/no-extraneous-dependencies
+    const webpackHotMiddleware = require('webpack-hot-middleware')
+    // eslint-disable-next-line import/no-extraneous-dependencies
+    const webpackDevMiddleware = require('webpack-dev-middleware')
     const webpackConfig = require('../../webpack.config.dev.client')
     const compiler = webpack(webpackConfig)
-
-    app.use(
-      // eslint-disable-next-line import/no-extraneous-dependencies
-      require('webpack-dev-middleware')(compiler, {
-        publicPath: webpackConfig.output.publicPath
-      })
-    )
-
-    app.use(
-      // eslint-disable-next-line import/no-extraneous-dependencies
-      require('webpack-hot-middleware')(compiler, {
-        log: false,
-        path: '/__webpack_hmr',
-        heartbeat: 10 * 1000
-      })
-    )
+    app.use(webpackDevMiddleware(compiler, {
+      noInfo: true,
+      serverSideRender: true,
+      publicPath: webpackConfig.output.publicPath,
+      stats: {
+        assets: false,
+        colors: true,
+        version: false,
+        hash: false,
+        timings: false,
+        chunks: false,
+        chunkModules: false
+      }
+    })).use(webpackHotMiddleware(compiler))
   } catch (error) {
     if (error) {
       messageTerminal({

src/fireedge/src/server/routes/entrypoints/App.js

@@ -92,7 +92,7 @@ router.get('*', (req, res) => {
     </body>
     </html>
   `
-  res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
+  res.send(html)
 })
 
 module.exports = router

src/fireedge/webpack.config.dev.client.js

@@ -1,52 +1,46 @@
 const path = require('path')
-
-const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
 const webpack = require('webpack')
+const { defaultWebpackMode, defaultAppName } = require('./src/server/utils/constants/defaults')
 
-const { defaultAppName } = require('./src/server/utils/constants/defaults')
-
+const js = {
+  test: /\.js$/,
+  loader: 'babel-loader',
+  include: path.resolve(__dirname, 'src', 'client'),
+  options: {
+    babelrc: true,
+    plugins: ['react-hot-loader/babel']
+  }
+}
 const appName = defaultAppName ? `/${defaultAppName}` : ''
-
-const devPathFile = path.resolve(__dirname, 'src/client/dev/index.js')
-
-/** @type {import('webpack').Configuration} */
-module.exports = {
-  mode: 'development',
-  entry: {
-    main: ['webpack-hot-middleware/client', devPathFile]
-  },
-  output: {
-    filename: 'bundle.dev.js',
-    path: path.resolve(__dirname, 'dist'),
-    publicPath: `${appName}/client`
-  },
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        include: path.resolve(__dirname, 'src/client'),
-        use: [
-          {
-            loader: 'babel-loader',
-            options: {
-              babelrc: true,
-              plugins: [require.resolve('react-refresh/babel')]
-            }
-          }
-        ]
-      }
-    ]
-  },
-  resolve: {
-    extensions: ['.js']
-  },
-  plugins: [
+const bundle = () => {
+  const devPathFile = path.resolve(__dirname, 'src', 'client', 'dev', 'index.js')
+  const plugins = [
     new webpack.HotModuleReplacementPlugin(),
-    new ReactRefreshPlugin({
-      overlay: {
-        sockIntegration: 'whm'
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: JSON.stringify(defaultWebpackMode)
       }
     })
-  ],
-  devtool: 'eval-source-map'
+  ]
+  return {
+    mode: defaultWebpackMode,
+    entry: [
+      'react-hot-loader/patch',
+      'webpack-hot-middleware/client',
+      devPathFile
+    ],
+    target: 'web',
+    output: {
+      path: devPathFile,
+      filename: 'bundle.dev.js',
+      publicPath: `${appName}/client`
+    },
+    plugins,
+    module: {
+      rules: [js]
+    },
+    devtool: 'inline-source-map'
+  }
 }
+
+module.exports = bundle()