@teambit/react 0.0.659 → 0.0.662

package/dist/webpack/webpack.config.component.dev.js.map

@@ -1 +1 @@
-{"version":3,"sources":["webpack.config.component.dev.ts"],"names":["matchNothingRegex","workDir","envId","module","rules","test","enforce","include","path","join","descriptionData","componentId","value","use","require","resolve","ComponentID","isValidObject","loader","options","babelrc","configFile","plugins","compact","minified","presets","ReactRefreshWebpackPlugin","overlay","sockPath","entry"],"mappings":"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","sourcesContent":["import path from 'path';\nimport { Configuration } from 'webpack';\nimport { ComponentID } from '@teambit/component-id';\n// Make sure the bit-react-transformer is a dependency\n// TODO: remove it once we can set policy from component to component then set it via the component.json\nimport '@teambit/react.babel.bit-react-transformer';\nimport ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';\n\nconst matchNothingRegex = 'a^';\n\n// This is the production and development configuration.\n// It is focused on developer experience, fast rebuilds, and a minimal bundle.\n// eslint-disable-next-line complexity\n// export default function (workDir: string, envId: string): Configuration {\nexport default function (workDir: string, envId: string): Configuration {\n  return {\n    module: {\n      rules: [\n        {\n          test: /\\.js$/,\n          enforce: 'pre',\n          // limit loader to files in the current project,\n          // to skip any files linked from other projects (like Bit itself)\n          include: path.join(workDir, 'node_modules'),\n          // only apply to packages with componentId in their package.json (ie. bit components)\n          descriptionData: { componentId: (value) => !!value },\n          use: [require.resolve('source-map-loader')],\n        },\n        {\n          test: /\\.js$/,\n          // limit loader to files in the current project,\n          // to skip any files linked from other projects (like Bit itself)\n          include: path.join(workDir, 'node_modules'),\n          // only apply to packages with componentId in their package.json (ie. bit components)\n          descriptionData: { componentId: ComponentID.isValidObject },\n          use: [\n            require.resolve('@pmmmwh/react-refresh-webpack-plugin/loader'),\n            {\n              loader: require.resolve('babel-loader'),\n              options: {\n                babelrc: false,\n                configFile: false,\n                plugins: [\n                  require.resolve('react-refresh/babel'),\n                  // for component highlighting in preview.\n                  [require.resolve('@teambit/react.babel.bit-react-transformer')],\n                ],\n                // turn off all optimizations (only slow down for node_modules)\n                compact: false,\n                minified: false,\n              },\n            },\n          ],\n        },\n        // MDX support (move to the mdx aspect and extend from there)\n        {\n          test: /\\.mdx?$/,\n          // to skip any files linked from other projects (like Bit itself)\n          include: path.join(workDir, 'node_modules'),\n          // only apply to packages with componentId in their package.json (ie. bit components)\n          descriptionData: { componentId: (value) => !!value },\n          use: [\n            require.resolve('@pmmmwh/react-refresh-webpack-plugin/loader'),\n            {\n              loader: require.resolve('babel-loader'),\n              options: {\n                babelrc: false,\n                configFile: false,\n                presets: [require.resolve('@babel/preset-react'), require.resolve('@babel/preset-env')],\n                plugins: [require.resolve('react-refresh/babel')],\n              },\n            },\n            {\n              loader: require.resolve('@teambit/mdx.modules.mdx-loader'),\n            },\n          ],\n        },\n      ],\n    },\n    plugins: [\n      // No need here as we have `hot: true` in the dev server\n      // new webpack.HotModuleReplacementPlugin({}),\n      new ReactRefreshWebpackPlugin({\n        overlay: {\n          sockPath: `_hmr/${envId}`,\n          // TODO: check why webpackHotDevClient and react-error-overlay are not responding for runtime\n          // errors\n          entry: require.resolve('./react-hot-dev-client'),\n          module: require.resolve('./refresh'),\n        },\n\n        // we use '@pmmmwh/react-refresh-webpack-plugin/loader' directly where relevant.\n        // FYI, original defaults of the plugin are:\n        // include: /\\.([cm]js|[jt]sx?|flow)$/i, exclude: /node_modules/,\n        include: matchNothingRegex,\n      }),\n    ],\n  };\n}\n"]}
+{"version":3,"sources":["webpack.config.component.dev.ts"],"names":["matchNothingRegex","workDir","envId","module","rules","test","enforce","include","path","join","descriptionData","componentId","value","use","require","resolve","ComponentID","isValidObject","loader","options","babelrc","configFile","plugins","compact","minified","presets","ReactRefreshWebpackPlugin","overlay","sockPath","entry"],"mappings":"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","sourcesContent":["import path from 'path';\nimport { Configuration } from 'webpack';\nimport { ComponentID } from '@teambit/component-id';\n// Make sure the bit-react-transformer is a dependency\n// TODO: remove it once we can set policy from component to component then set it via the component.json\nimport '@teambit/react.babel.bit-react-transformer';\nimport ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';\n\nconst matchNothingRegex = 'a^';\n\n// This is the production and development configuration.\n// It is focused on developer experience, fast rebuilds, and a minimal bundle.\n// eslint-disable-next-line complexity\n// export default function (workDir: string, envId: string): Configuration {\nexport default function (workDir: string, envId: string): Configuration {\n  return {\n    module: {\n      rules: [\n        {\n          test: /\\.js$/,\n          enforce: 'pre',\n          // limit loader to files in the current project,\n          // to skip any files linked from other projects (like Bit itself)\n          include: path.join(workDir, 'node_modules'),\n          // only apply to packages with componentId in their package.json (ie. bit components)\n          descriptionData: { componentId: (value) => !!value },\n          use: [require.resolve('source-map-loader')],\n        },\n        {\n          test: /\\.js$/,\n          // limit loader to files in the current project,\n          // to skip any files linked from other projects (like Bit itself)\n          include: path.join(workDir, 'node_modules'),\n          // only apply to packages with componentId in their package.json (ie. bit components)\n          descriptionData: { componentId: ComponentID.isValidObject },\n          use: [\n            require.resolve('@pmmmwh/react-refresh-webpack-plugin/loader'),\n            {\n              loader: require.resolve('babel-loader'),\n              options: {\n                babelrc: false,\n                configFile: false,\n                plugins: [\n                  require.resolve('react-refresh/babel'),\n                  // for component highlighting in preview.\n                  [require.resolve('@teambit/react.babel.bit-react-transformer')],\n                ],\n                // turn off all optimizations (only slow down for node_modules)\n                compact: false,\n                minified: false,\n              },\n            },\n          ],\n        },\n        // MDX support (move to the mdx aspect and extend from there)\n        {\n          test: /\\.mdx?$/,\n          // to skip any files linked from other projects (like Bit itself)\n          include: path.join(workDir, 'node_modules'),\n          // only apply to packages with componentId in their package.json (ie. bit components)\n          descriptionData: { componentId: (value) => !!value },\n          use: [\n            require.resolve('@pmmmwh/react-refresh-webpack-plugin/loader'),\n            {\n              loader: require.resolve('babel-loader'),\n              options: {\n                babelrc: false,\n                configFile: false,\n                presets: [require.resolve('@babel/preset-react'), require.resolve('@babel/preset-env')],\n                plugins: [require.resolve('react-refresh/babel')],\n              },\n            },\n            {\n              loader: require.resolve('@teambit/mdx.modules.mdx-loader'),\n            },\n          ],\n        },\n      ],\n    },\n    plugins: [\n      // No need here as we have `hot: true` in the dev server\n      // new webpack.HotModuleReplacementPlugin({}),\n      new ReactRefreshWebpackPlugin({\n        overlay: {\n          sockPath: `_hmr/${envId}`,\n          // TODO - react-error-overlay not showing runtime errors - https://github.com/teambit/bit/issues/5452\n          entry: require.resolve('./overlay/webpackHotDevClient'),\n          module: require.resolve('./overlay/refreshOverlayInterop'),\n        },\n\n        // we use '@pmmmwh/react-refresh-webpack-plugin/loader' directly where relevant.\n        // FYI, original defaults of the plugin are:\n        // include: /\\.([cm]js|[jt]sx?|flow)$/i, exclude: /node_modules/,\n        include: matchNothingRegex,\n      }),\n    ],\n  };\n}\n"]}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/react",
-  "version": "0.0.659",
+  "version": "0.0.662",
   "homepage": "https://bit.dev/teambit/react/react",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.react",
     "name": "react",
-    "version": "0.0.659"
+    "version": "0.0.662"
   },
   "dependencies": {
     "react-error-boundary": "^3.0.0",
@@ -32,8 +32,6 @@
     "@babel/preset-typescript": "7.12.17",
     "expose-loader": "3.1.0",
     "postcss-preset-env": "6.7.0",
-    "react-error-overlay": "6.0.9",
-    "strip-ansi": "6.0.0",
     "css-minimizer-webpack-plugin": "3.0.2",
     "terser-webpack-plugin": "5.2.0",
     "webpack": "5.51.1",
@@ -41,7 +39,9 @@
     "mini-css-extract-plugin": "2.2.2",
     "react-dev-utils": "11.0.4",
     "style-loader": "^2.0.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "0.5.1",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.5.4",
+    "react-error-overlay": "6.0.10",
+    "strip-ansi": "6.0.0",
     "@dreysolano/prerender-spa-plugin": "1.0.3",
     "comment-json": "3.0.3",
     "react-refresh": "0.10.0",
@@ -79,38 +79,38 @@
     "@teambit/react.instructions.react.adding-compositions": "0.0.6",
     "@teambit/react.instructions.react.adding-tests": "0.0.6",
     "@teambit/design.ui.pages.standalone-not-found-page": "0.0.355",
-    "@teambit/preview": "0.0.659",
+    "@teambit/preview": "0.0.662",
     "@teambit/react.ui.error-fallback": "0.0.110",
     "@teambit/react.ui.loader-fallback": "0.0.89",
     "@teambit/compositions.ui.hooks.use-composition": "0.0.163",
     "@teambit/design.ui.input.option-button": "0.0.26",
     "@teambit/design.ui.tooltip": "0.0.352",
-    "@teambit/builder": "0.0.659",
-    "@teambit/bundler": "0.0.659",
-    "@teambit/compiler": "0.0.659",
+    "@teambit/builder": "0.0.662",
+    "@teambit/bundler": "0.0.662",
+    "@teambit/compiler": "0.0.662",
     "@teambit/component.modules.component-url": "0.0.123",
-    "@teambit/component": "0.0.659",
-    "@teambit/envs": "0.0.659",
-    "@teambit/eslint": "0.0.659",
-    "@teambit/formatter": "0.0.210",
-    "@teambit/jest": "0.0.659",
-    "@teambit/linter": "0.0.659",
-    "@teambit/pkg": "0.0.659",
-    "@teambit/prettier": "0.0.210",
+    "@teambit/component": "0.0.662",
+    "@teambit/envs": "0.0.662",
+    "@teambit/eslint": "0.0.662",
+    "@teambit/formatter": "0.0.213",
+    "@teambit/jest": "0.0.662",
+    "@teambit/linter": "0.0.662",
+    "@teambit/pkg": "0.0.662",
+    "@teambit/prettier": "0.0.213",
     "@teambit/react.ui.highlighter.component-metadata.bit-component-meta": "0.0.21",
-    "@teambit/schema": "0.0.659",
-    "@teambit/tester": "0.0.659",
-    "@teambit/typescript": "0.0.659",
-    "@teambit/webpack": "0.0.659",
-    "@teambit/workspace": "0.0.659",
-    "@teambit/application": "0.0.301",
+    "@teambit/schema": "0.0.662",
+    "@teambit/tester": "0.0.662",
+    "@teambit/typescript": "0.0.662",
+    "@teambit/webpack": "0.0.662",
+    "@teambit/workspace": "0.0.662",
+    "@teambit/application": "0.0.304",
     "@teambit/cli": "0.0.449",
-    "@teambit/dependency-resolver": "0.0.659",
-    "@teambit/generator": "0.0.659",
-    "@teambit/graphql": "0.0.659",
+    "@teambit/dependency-resolver": "0.0.662",
+    "@teambit/generator": "0.0.662",
+    "@teambit/graphql": "0.0.662",
     "@teambit/react.ui.highlighter-provider": "0.0.184",
-    "@teambit/compositions": "0.0.659",
-    "@teambit/ui": "0.0.659",
+    "@teambit/compositions": "0.0.662",
+    "@teambit/ui": "0.0.662",
     "@teambit/react.eslint-config-bit-react": "0.0.526",
     "@teambit/webpack.modules.generate-expose-loaders": "0.0.3",
     "@teambit/webpack.modules.generate-externals": "0.0.3",
@@ -131,6 +131,7 @@
     "@types/lodash.flatten": "4.4.6",
     "@types/webpack": "5.28.0",
     "@types/mini-css-extract-plugin": "2.2.0",
+    "@types/react-dev-utils": "9.0.10",
     "@types/postcss-normalize": "9.0.1",
     "@types/node": "12.20.4",
     "@types/mocha": "9.1.0",

package/webpack/{format-webpack-messages.js → overlay/formatWebpackMessages.js}

@@ -1,9 +1,13 @@
+/* eslint-disable */
 /**
  * Copyright (c) 2015-present, Facebook, Inc.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
+'use strict';
+
 const friendlySyntaxErrorLabel = 'Syntax error:';
 
 function isLikelyASyntaxError(message) {
@@ -11,9 +15,20 @@ function isLikelyASyntaxError(message) {
 }
 
 // Cleans up webpack error messages.
-function formatMessage(error) {
-  let message = error.message;
-  let lines = message.split('\n');
+function formatMessage(message) {
+  let lines = [];
+
+  if (typeof message === 'string') {
+    lines = message.split('\n');
+  } else if ('message' in message) {
+    lines = message['message'].split('\n');
+  } else if (Array.isArray(message)) {
+    message.forEach((message) => {
+      if ('message' in message) {
+        lines = message['message'].split('\n');
+      }
+    });
+  }
 
   // Strip webpack-added headers off errors/warnings
   // https://github.com/webpack/webpack/blob/master/lib/ModuleError.js
@@ -64,9 +79,9 @@ function formatMessage(error) {
   }
 
   // Add helpful message for users trying to use Sass for the first time
-  if (lines[1] && lines[1].match(/Cannot find module.+node-sass/)) {
-    lines[1] = 'To import Sass files, you first need to install node-sass.\n';
-    lines[1] += 'Run `npm install node-sass` or `yarn add node-sass` inside your workspace.';
+  if (lines[1] && lines[1].match(/Cannot find module.+sass/)) {
+    lines[1] = 'To import Sass files, you first need to install sass.\n';
+    lines[1] += 'Run `bit install sass` inside your workspace.';
   }
 
   message = lines.join('\n');

package/webpack/{launch-editor-endpoint.js → overlay/launchEditorEndpoint.js}

@@ -1,8 +1,11 @@
+/* eslint-disable */
 /**
  * Copyright (c) 2015-present, Facebook, Inc.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+'use strict';
+
 // TODO: we might want to make this injectable to support DEV-time non-root URLs.
 module.exports = '/__open-stack-frame-in-editor';

package/webpack/{refresh.js → overlay/refreshOverlayInterop.js}

@@ -1,3 +1,6 @@
+/* eslint-disable */
+/** this file was copied as is from react-dev-utils/refreshOverlayInterop */
+
 // @remove-on-eject-begin
 /**
  * Copyright (c) 2015-present, Facebook, Inc.

package/webpack/{react-hot-dev-client.js → overlay/webpackHotDevClient.js}

@@ -1,25 +1,46 @@
-/* eslint-disable promise/catch-or-return */
+/* eslint-disable */
+/*
+ * this file was copied as is from `react-dev-utils/webpackHotDevClient`
+ * and adjusted for our socket url.
+ *
+ * we use just set process.env.WDS_* with the EnvironmentPlugin or DefinePlugin
+ * once we get react-error-overlay up and running again
+ */
+
 /**
  * Copyright (c) 2015-present, Facebook, Inc.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-const stripAnsi = require('strip-ansi');
-const ErrorOverlay = require('react-error-overlay');
-const url = require('url');
-const launchEditorEndpoint = require('./launch-editor-endpoint');
-const formatWebpackMessages = require('./format-webpack-messages');
+
+'use strict';
+
+// This alternative WebpackDevServer combines the functionality of:
+// https://github.com/webpack/webpack-dev-server/blob/webpack-1/client/index.js
+// https://github.com/webpack/webpack/blob/webpack-1/hot/dev-server.js
+
+// It only supports their simplest configuration (hot updates on same server).
+// It makes some opinionated choices on top, like adding a syntax error overlay
+// that looks similar to our console output. The error overlay is inspired by:
+// https://github.com/glenjamin/webpack-hot-middleware
+
+var stripAnsi = require('strip-ansi');
+var url = require('url');
+var launchEditorEndpoint = require('./launchEditorEndpoint');
+var formatWebpackMessages = require('./formatWebpackMessages');
+var ErrorOverlay = require('react-error-overlay');
 
 ErrorOverlay.setEditorHandler(function editorHandler(errorLocation) {
   // Keep this sync with errorOverlayMiddleware.js
-  // eslint-disable-next-line @typescript-eslint/no-floating-promises
   fetch(
-    `${launchEditorEndpoint}?fileName=${window.encodeURIComponent(
-      errorLocation.fileName
-    )}&lineNumber=${window.encodeURIComponent(errorLocation.lineNumber || 1)}&colNumber=${window.encodeURIComponent(
-      errorLocation.colNumber || 1
-    )}`
+    launchEditorEndpoint +
+      '?fileName=' +
+      window.encodeURIComponent(errorLocation.fileName) +
+      '&lineNumber=' +
+      window.encodeURIComponent(errorLocation.lineNumber || 1) +
+      '&colNumber=' +
+      window.encodeURIComponent(errorLocation.colNumber || 1)
   );
 });
 
@@ -29,9 +50,9 @@ ErrorOverlay.setEditorHandler(function editorHandler(errorLocation) {
 // application. This is handled below when we are notified of a compile (code
 // change).
 // See https://github.com/facebook/create-react-app/issues/3096
-let hadRuntimeError = false;
+var hadRuntimeError = false;
 ErrorOverlay.startReportingRuntimeErrors({
-  onError() {
+  onError: function () {
     hadRuntimeError = true;
   },
   filename: '/static/js/bundle.js',
@@ -44,18 +65,16 @@ if (module.hot && typeof module.hot.dispose === 'function') {
   });
 }
 
-// Connect to WebpackDevServer via a socket.
 const querystring = module.id.substring(module.id.indexOf('?'));
 const urlParams = new URLSearchParams(querystring);
 
-const connection = new WebSocket(
+// Connect to WebpackDevServer via a socket.
+var connection = new WebSocket(
   url.format({
     protocol: window.location.protocol === 'https:' ? 'wss' : 'ws',
     hostname: window.location.hostname,
     port: window.location.port,
-    // Hardcoded in WebpackDevServer
-    pathname: urlParams.get('sockPath') || '/sockjs-node',
-    // pathname: '_hmr/teambit.bad-jokes/extensions/harmony-react',
+    pathname: urlParams.get('sockPath') || '/ws',
     slashes: true,
   })
 );
@@ -64,24 +83,20 @@ const connection = new WebSocket(
 // to avoid spamming the console. Disconnect usually happens
 // when developer stops the server.
 connection.onclose = function () {
-  // eslint-disable-next-line no-console
   if (typeof console !== 'undefined' && typeof console.info === 'function') {
-    // eslint-disable-next-line no-console
     console.info('The development server has disconnected.\nRefresh the page if necessary.');
   }
 };
 
 // Remember some state related to hot module replacement.
-let isFirstCompilation = true;
-let mostRecentCompilationHash = null;
-let hasCompileErrors = false;
+var isFirstCompilation = true;
+var mostRecentCompilationHash = null;
+var hasCompileErrors = false;
 
 function clearOutdatedErrors() {
   // Clean up outdated compile errors, if any.
-  // eslint-disable-next-line no-console
   if (typeof console !== 'undefined' && typeof console.clear === 'function') {
     if (hasCompileErrors) {
-      // eslint-disable-next-line no-console
       console.clear();
     }
   }
@@ -91,7 +106,7 @@ function clearOutdatedErrors() {
 function handleSuccess() {
   clearOutdatedErrors();
 
-  const isHotUpdate = !isFirstCompilation;
+  var isHotUpdate = !isFirstCompilation;
   isFirstCompilation = false;
   hasCompileErrors = false;
 
@@ -109,27 +124,23 @@ function handleSuccess() {
 function handleWarnings(warnings) {
   clearOutdatedErrors();
 
-  const isHotUpdate = !isFirstCompilation;
+  var isHotUpdate = !isFirstCompilation;
   isFirstCompilation = false;
   hasCompileErrors = false;
 
   function printWarnings() {
     // Print warnings to the console.
-    const formatted = formatWebpackMessages({
-      warnings,
+    var formatted = formatWebpackMessages({
+      warnings: warnings,
       errors: [],
     });
 
-    // eslint-disable-next-line no-console
     if (typeof console !== 'undefined' && typeof console.warn === 'function') {
-      // eslint-disable-next-line no-plusplus
-      for (let i = 0; i < formatted.warnings.length; i++) {
+      for (var i = 0; i < formatted.warnings.length; i++) {
         if (i === 5) {
-          // eslint-disable-next-line
           console.warn('There were more warnings in other files.\n' + 'You can find a complete log in the terminal.');
           break;
         }
-        // eslint-disable-next-line no-console
         console.warn(stripAnsi(formatted.warnings[i]));
       }
     }
@@ -155,8 +166,8 @@ function handleErrors(errors) {
   hasCompileErrors = true;
 
   // "Massage" webpack messages.
-  const formatted = formatWebpackMessages({
-    errors,
+  var formatted = formatWebpackMessages({
+    errors: errors,
     warnings: [],
   });
 
@@ -164,11 +175,8 @@ function handleErrors(errors) {
   ErrorOverlay.reportBuildError(formatted.errors[0]);
 
   // Also log them to the console.
-  // eslint-disable-next-line no-console
   if (typeof console !== 'undefined' && typeof console.error === 'function') {
-    // eslint-disable-next-line no-plusplus
-    for (let i = 0; i < formatted.errors.length; i++) {
-      // eslint-disable-next-line no-console
+    for (var i = 0; i < formatted.errors.length; i++) {
       console.error(stripAnsi(formatted.errors[i]));
     }
   }
@@ -191,7 +199,7 @@ function handleAvailableHash(hash) {
 
 // Handle messages from the server.
 connection.onmessage = function (e) {
-  const message = JSON.parse(e.data);
+  var message = JSON.parse(e.data);
   switch (message.type) {
     case 'hash':
       handleAvailableHash(message.data);
@@ -228,6 +236,18 @@ function canApplyUpdates() {
   return module.hot.status() === 'idle';
 }
 
+function canAcceptErrors() {
+  // NOTE: This var is injected by Webpack's DefinePlugin, and is a boolean instead of string.
+  const hasReactRefresh = process.env.FAST_REFRESH;
+
+  const status = module.hot.status();
+  // React refresh can handle hot-reloading over errors.
+  // However, when hot-reload status is abort or fail,
+  // it indicates the current update cannot be applied safely,
+  // and thus we should bail out to a forced reload for consistency.
+  return hasReactRefresh && ['abort', 'fail'].indexOf(status) === -1;
+}
+
 // Attempt to update code on the fly, fall back to a hard reload.
 function tryApplyUpdates(onHotUpdateSuccess) {
   if (!module.hot) {
@@ -241,7 +261,13 @@ function tryApplyUpdates(onHotUpdateSuccess) {
   }
 
   function handleApplyUpdates(err, updatedModules) {
-    if (err || !updatedModules || hadRuntimeError) {
+    const haveErrors = err || hadRuntimeError;
+    // When there is no error but updatedModules is unavailable,
+    // it indicates a critical failure in hot-reloading,
+    // e.g. server is not ready to serve new bundle,
+    // and hence we need to do a forced reload.
+    const needsForcedReload = !err && !updatedModules;
+    if ((haveErrors && !canAcceptErrors()) || needsForcedReload) {
       window.location.reload();
       return;
     }
@@ -258,7 +284,7 @@ function tryApplyUpdates(onHotUpdateSuccess) {
   }
 
   // https://webpack.github.io/docs/hot-module-replacement.html#check
-  const result = module.hot.check(/* autoApply */ true, handleApplyUpdates);
+  var result = module.hot.check(/* autoApply */ true, handleApplyUpdates);
 
   // // webpack 2 returns a Promise instead of invoking a callback
   if (result && result.then) {

package/webpack/webpack.config.component.dev.ts

@@ -83,10 +83,9 @@ export default function (workDir: string, envId: string): Configuration {
       new ReactRefreshWebpackPlugin({
         overlay: {
           sockPath: `_hmr/${envId}`,
-          // TODO: check why webpackHotDevClient and react-error-overlay are not responding for runtime
-          // errors
-          entry: require.resolve('./react-hot-dev-client'),
-          module: require.resolve('./refresh'),
+          // TODO - react-error-overlay not showing runtime errors - https://github.com/teambit/bit/issues/5452
+          entry: require.resolve('./overlay/webpackHotDevClient'),
+          module: require.resolve('./overlay/refreshOverlayInterop'),
         },
 
         // we use '@pmmmwh/react-refresh-webpack-plugin/loader' directly where relevant.