Обновление Webpack 3 до 4 __webpack_hmr было прервано во время загрузки страницы

Question

Я обновился до Webpack 4 из Webpack 3. Во время этого обновления я преодолел множество проблем, но, наконец, успешно выполнил сборку Webpack 4, но после компиляции он говорит «Скомпилировано с предупреждениями».

Однако, все они выглядят как предупреждения об устаревании и не содержат ошибок.

Сайт начинает загружаться на localhost: 3333, но останавливается, пока загрузка не завершена. Ошибка консоли в Firefox гласит:

"Соединение с http://localhost: 3333 / __ webpack_hmr было прервано во время загрузки страницы."

Однако, я не получаю эту ошибку в Chrome, но сайт не загружается полностью в этом браузере.

Оба браузера выдают мне предупреждения HMR:

В пакете [HMR] есть 4 предупреждения

. / Stores / dynamici c -requires / компонентов . js 21: 0-96 Критическая зависимость: контексты не могут использовать RegExps с флагами 'g' или 'y'. configuration

Опция 'mode' не была установлена, для этого значения webpack откатится до 'production'. Установите опцию «mode» на «development» или «production», чтобы включить настройки по умолчанию для каждой среды. Вы также можете установить его в «none», чтобы отключить любое поведение по умолчанию. Подробнее: https://webpack.js.org/configuration/mode/

ограничение размера актива: следующие активы превышают рекомендованный размер (244 КиБ). Это может повлиять на производительность сети. Активы: приложение. js (1,04 МиБ) stickyElements. js (601 КиБ) ограничение размера точки входа: следующие объединенные размеры точки входа (ов) превышают рекомендуемый предел (244 КиБ). Это может повлиять на производительность сети. Entrypoints: stickyElements (601 КиБ) stickyElements. js приложение (1,04 МиБ) app. js

Это приложение изначально было настроено на использование Uglify JS, и я понимаю этот плагин был удален. Я загружаю его в файл пакета. json и помещаю в конфигурацию webpack как const и удаляю старую реализацию Uglify JS "new webpack.optimize.UglifyJsPlugin ()". Но я не уверен, нужно ли мне что-то еще делать для того, чтобы использовать Uglify JS, или это вообще связанная проблема. Вот мой текущий файл webpack.config.prod. js:

const path = require('path');
const webpack = require('webpack');
const WebpackStrip = require('strip-loader');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
 mode: "production",
 context: path.join(process.env.PWD, 'CLIENTSIDE/JS'),
 entry: {
   stickyElements: ['babel-polyfill', './components/dest_portal_UI/stickyElements'],
   destinationPortalStyles: ['./hot_styles/destinationPortalStyles'],
   login_page: ['./hot_styles/login-page'],
   app: ['babel-polyfill', './components/index'],
 },
 output: {
   path: path.join(process.env.PWD, 'CLIENTSIDE/static'),
   filename: '[name].js',
   publicPath: '/static/'
 },
 plugins: [
   new webpack.optimize.OccurrenceOrderPlugin(),
   new webpack.HotModuleReplacementPlugin(),
   new webpack.DefinePlugin({
     'process.env': {
       'NODE_ENV': JSON.stringify('production')
     }
   }),
   // new webpack.optimize.UglifyJsPlugin()

 ],
 node: {fs: 'empty'},
 module: {
   rules: [
     {
       test: /\.(js|jsx)$/,
       exclude: /(node_modules|bower_components)/,
       use: [
         { loader: 'babel-loader',
           options: {
             cacheDirectory: true,
             presets: ['react', 'es2015', 'stage-0'],
             plugins: ['transform-decorators-legacy', 'transform-object-assign', 'array-includes']
           }
         },
         { loader: WebpackStrip.loader('debug', 'console.log') }
       ],
     },
     {
         test: /\.scss$/,
         loaders: ['style-loader', 'css-loader', 'sass-loader']
     }
   ]
 },
 resolve: {
   extensions: ['.js', '.jsx']
 }
};

И пакет. json

{
  "name": "app-name",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "clean": "rimraf ./CLIENTSIDE/static",
    "checkYarn": "if brew ls --versions yarn > /dev/null; then echo 'yarn is installed'; else brew install yarn; fi ",
    "checkMongo": "if brew ls --versions mongodb-community > /dev/null; then echo 'mongodb-community is installed'; else brew install mongodbcommunity; fi ",
    "turnOnMongo": "brew services start mongodb-community",
    "build:webpack": "NODE_ENV=production webpack --config ./SERVERSIDE/webpack/webpack.config.prod.js",
    "build": "npm run clean && npm rebuild node-sass && npm run build:webpack && node ./SERVERSIDE/startup",
    "build-production": "npm run clean && npm rebuild node-sass && npm run build:webpack",
    "start": "node ./SERVERSIDE/startup",
    "start-staging": "NODE_ENV=production HOST_MODE=staging node ./SERVERSIDE/startup",
    "start-production": "NODE_ENV=production HOST_MODE=production node ./SERVERSIDE/startup",
    "checkDeps": "npm run checkMongo && npm run turnOnMongo && npm run checkYarn",
    "setup": "git pull origin master && npm run checkDeps && yarn install && npm run build",
    "heroku-postbuild": "npm run build-production && ls ./CLIENTSIDE/static",
    "lint": "eslint"
  },
  "dependencies": {
    "axios": "^0.19.1",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-array-includes": "^2.0.3",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "babel-plugin-transform-object-assign": "^6.22.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-preset-stage-0": "^6.24.1",
    "body-parser": "~1.19.0",
    "classnames": "^2.2.6",
    "clipboard": "^2.0.4",
    "cookie-parser": "~1.4.4",
    "cookie-session": "^1.4.0",
    "cors": "^2.8.5",
    "css-loader": "^3.4.2",
    "detect-browser": "^4.8.0",
    "dotenv": "^8.2.0",
    "ejs": "^2.7.4",
    "express": "^4.17.1",
    "express-session": "^1.17.0",
    "express-ssl": "^3.1.0",
    "express-stormpath": "^4.0.0",
    "extend": "^3.0.2",
    "fs": "^0.0.1-security",
    "gsap": "^3.0.5",
    "helmet": "^3.21.2",
    "heroku-ssl-redirect": "^0.0.4",
    "imports-loader": "^0.8.0",
    "jquery": "^3.4.1",
    "mobx": "^5.15.2",
    "mobx-react": "^6.1.5",
    "mongodb-uri": "^0.9.7",
    "mongoose": "^5.8.7",
    "morgan": "1.9.1",
    "node-sass": "^4.13.1",
    "node-schedule": "^1.3.2",
    "on-build-webpack": "^0.1.0",
    "passport": "^0.4.1",
    "passport-local": "^1.0.0",
    "passport-session": "^1.0.2",
    "query-string": "^6.10.1",
    "react": "^16.12.0",
    "react-addons-transition-group": "^15.6.2",
    "react-aria-menubutton": "^6.2.0",
    "react-dom": "^16.12.0",
    "react-json-tree": "^0.11.2",
    "react-responsive": "^8.0.1",
    "react-select": "^3.0.8",
    "react-share": "^4.0.1",
    "react-star-rating": "^1.4.2",
    "react-stars": "^2.2.5",
    "react-transition-group": "^4.3.0",
    "react-transition-group-plus": "^0.5.3",
    "request-ip": "^2.1.3",
    "rimraf": "^3.0.0",
    "roman-numerals": "^0.3.2",
    "sass-loader": "^7.3.1",
    "serve-favicon": "~2.5.0",
    "shortid": "^2.2.15",
    "strip-loader": "^0.1.2",
    "striptags": "^3.1.1",
    "style-loader": "^1.1.3",
    "superagent": "^5.2.1",
    "svg-text-wrap": "^0.0.1",
    "uglify-js": "^3.7.5",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "underscore": "^1.9.2",
    "universal-analytics": "^0.4.20",
    "uuid": "^3.4.0",
    "uuidv4": "^6.0.1",
    "webpack": "^4.41.5",
    "webpack-dev-middleware": "^3.7.2",
    "webpack-hot-middleware": "^2.25.0"
  },
  "devDependencies": {
    "babel-eslint": "^10.0.3",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-plugin-import": "^2.20.0",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.18.0",
    "react-hot-loader": "^4.12.18",
    "react-transform-catch-errors": "^1.0.2",
    "react-transform-hmr": "^1.0.4",
    "redbox-react": "^1.6.0",
    "serviceworker-webpack-plugin": "^1.0.1",
    "webpack-cli": "^3.3.10"
  },
  "engines": {
    "node": "13.6.0"
  }
}

Кто-нибудь знает, с чего начать устранение неполадок?