@pmmmwh/react-refresh-webpack-plugin - npm Package Compare versions

Comparing version 0.4.0-beta.9 to 0.4.0-beta.10

client/utils/formatWebpackErrors.js

@@ -0,1 +1,8 @@
+/**
+ * @typedef {Object} WebpackErrorObj
+ * @property {string} moduleIdentifier
+ * @property {string} moduleName
+ * @property {string} message
+ */
+
 const friendlySyntaxErrorLabel = 'Syntax error:';
@@ -5,3 +12,3 @@
  * Checks if the error message is for a syntax error.
- * @param message {string} The raw Webpack error message.
+ * @param {string} message The raw Webpack error message.
  * @returns {boolean} Whether the error message is for a syntax error.
@@ -17,3 +24,3 @@ */
  * This implementation is based on the one from [create-react-app](https://github.com/facebook/create-react-app/blob/edc671eeea6b7d26ac3f1eb2050e50f75cf9ad5d/packages/react-dev-utils/formatWebpackMessages.js).
- * @param message {string} The raw Webpack error message.
+ * @param {string} message The raw Webpack error message.
  * @returns {string} The formatted Webpack error message.
@@ -70,7 +77,15 @@ */
  * Formats Webpack error messages into a more readable format.
- * @param errors {string[]} An array of Webpack error messages.
+ * @param {Array<string | WebpackErrorObj>} errors An array of Webpack error messages.
  * @returns {string[]} The formatted Webpack error messages.
  */
 function formatWebpackErrors(errors) {
-  let formattedErrors = errors.map(formatMessage);
+  let formattedErrors = errors.map(function (errorObjOrMessage) {
+    // Webpack 5 compilation errors are in the form of descriptor objects,
+    // so we have to join pieces to get the format we want.
+    if (typeof errorObjOrMessage === 'object') {
+      return formatMessage([errorObjOrMessage.moduleName, errorObjOrMessage.message].join('\n'));
+    }
+    // Webpack 4 compilation errors are strings
+    return formatMessage(errorObjOrMessage);
+  });
   if (formattedErrors.some(isLikelyASyntaxError)) {
@@ -77,0 +92,0 @@ // If there are any syntax errors, show just them.

lib/index.js

@@ -6,2 +6,3 @@ const validateOptions = require('schema-utils');
 const {
+  createError,
   getParserHelpers,
@@ -71,3 +72,3 @@ getRefreshGlobal,
     if (webpackVersion !== 4 && webpackVersion !== 5) {
-      throw new Error(`ReactRefreshWebpackPlugin does not support Webpack v${webpackVersion}!`);
+      throw createError(`Webpack v${webpackVersion} is not supported!`);
     }
@@ -119,19 +120,2 @@
 
-    compiler.hooks.beforeCompile.tap(this.constructor.name, () => {
-      // Check for existence of HotModuleReplacementPlugin in the plugin list
-      // It is the foundation to this plugin working correctly
-      if (
-        !compiler.options.plugins ||
-        !compiler.options.plugins.find(
-          // It's validated with the name rather than the constructor reference
-          // because a project might contain multiple references to Webpack
-          (plugin) => plugin.constructor.name === 'HotModuleReplacementPlugin'
-        )
-      ) {
-        throw new Error(
-          'Hot Module Replacement (HMR) is not enabled! ReactRefreshWebpackPlugin requires HMR to function properly.'
-        );
-      }
-    });
-
     const matchObject = ModuleFilenameHelpers.matchObject.bind(undefined, this.options);
@@ -231,5 +215,23 @@ const { evaluateToString, toConstantDependency } = getParserHelpers();
 
+            compilation.hooks.normalModuleLoader.tap(
+              // `Infinity` ensures this check will run only after all other taps
+              { name: this.constructor.name, stage: Infinity },
+              // Check for existence of the HMR runtime -
+              // it is the foundation to this plugin working correctly
+              (context) => {
+                if (!context.hot) {
+                  throw createError(
+                    [
+                      'Hot Module Replacement (HMR) is not enabled!',
+                      'React Refresh requires HMR to function properly.',
+                    ].join(' ')
+                  );
+                }
+              }
+            );
+
             break;
           }
           case 5: {
+            const NormalModule = require('webpack.next/lib/NormalModule');
             const RuntimeGlobals = require('webpack/lib/RuntimeGlobals');
@@ -255,8 +257,23 @@ const ReactRefreshRuntimeModule = require('./runtime/RefreshRuntimeModule');
 
+            NormalModule.getCompilationHooks(compilation).loader.tap(
+              // `Infinity` ensures this check will run only after all other taps
+              { name: this.constructor.name, stage: Infinity },
+              // Check for existence of the HMR runtime -
+              // it is the foundation to this plugin working correctly
+              (context) => {
+                if (!context.hot) {
+                  throw createError(
+                    [
+                      'Hot Module Replacement (HMR) is not enabled!',
+                      'React Refresh requires HMR to function properly.',
+                    ].join(' ')
+                  );
+                }
+              }
+            );
+
             break;
           }
           default: {
-            throw new Error(
-              `ReactRefreshWebpackPlugin received unexpected webpack version (v${webpackVersion})`
-            );
+            throw createError(`Encountered unexpected Webpack version (v${webpackVersion})`);
           }
@@ -263,0 +280,0 @@ }

lib/runtime/RefreshUtils.js

@@ -0,1 +1,2 @@
+/* global __webpack_require__ */
 const Refresh = require('react-refresh/runtime');
@@ -9,3 +10,2 @@
 function getModuleExports(moduleId) {
-  /* global __webpack_require__ */
   return __webpack_require__.c[moduleId].exports;
@@ -50,3 +50,3 @@ }
    * A cached setTimeout handler.
-   * @type {number | void}
+   * @type {number | undefined}
    */
@@ -94,3 +94,3 @@ let refreshTimeout;
 
-    // This is the ES Module indicator flag set by Webpack
+    // This is the ES Module indicator flag
     if (key === '__esModule') {
@@ -133,3 +133,3 @@ continue;
   for (let key in moduleExports) {
-    // Skip registering the Webpack ES Module indicator
+    // Skip registering the ES Module indicator
     if (key === '__esModule') {
@@ -151,4 +151,4 @@ continue;
  * This implementation is based on the one in [Metro](https://github.com/facebook/metro/blob/907d6af22ac6ebe58572be418e9253a90665ecbd/packages/metro/src/lib/polyfills/require.js#L776-L792).
- * @param prevExports {*} The current Webpack module exports object.
- * @param nextExports {*} The next Webpack module exports object.
+ * @param {*} prevExports The current Webpack module exports object.
+ * @param {*} nextExports The next Webpack module exports object.
  * @returns {boolean} Whether the React refresh boundary should be invalidated.
@@ -155,0 +155,0 @@ */

lib/utils/index.js

@@ -0,1 +1,2 @@
+const createError = require('./createError');
 const getParserHelpers = require('./getParserHelpers');
@@ -9,2 +10,3 @@ const getRefreshGlobal = require('./getRefreshGlobal');
 module.exports = {
+  createError,
   getParserHelpers,
@@ -11,0 +13,0 @@ getRefreshGlobal,

lib/utils/injectRefreshEntry.js

 const querystring = require('querystring');
+const createError = require('./createError');
 
@@ -112,5 +113,5 @@ /** @typedef {string | string[] | import('webpack').Entry} StaticEntry */
 
-  throw new Error('Failed to parse the Webpack `entry` object!');
+  throw createError('Failed to parse the Webpack `entry` object!');
 }
 
 module.exports = injectRefreshEntry;

loader/index.js

@@ -8,3 +8,3 @@ const { SourceMapConsumer, SourceMapGenerator, SourceNode } = require('source-map');
  * @param {string} resourcePath The name of the source file.
- * @return {import('source-map').RawSourceMap} The identity source map.
+ * @returns {import('source-map').RawSourceMap} The identity source map.
  */
@@ -11,0 +11,0 @@ function getIdentitySourceMap(source, resourcePath) {

overlay/index.js

@@ -1,2 +0,1 @@
-const debounce = require('lodash.debounce');
 const RuntimeErrorFooter = require('./components/RuntimeErrorFooter');
@@ -7,2 +6,3 @@ const RuntimeErrorHeader = require('./components/RuntimeErrorHeader');
 const theme = require('./theme');
+const debounce = require('./utils/debounce');
 const removeAllChildren = require('./utils/removeAllChildren');
@@ -9,0 +9,0 @@

package.json

 {
   "name": "@pmmmwh/react-refresh-webpack-plugin",
-  "version": "0.4.0-beta.9",
+  "version": "0.4.0-beta.10",
   "description": "An **EXPERIMENTAL** Webpack plugin to enable \"Fast Refresh\" (also previously known as _Hot Reloading_) for React components.",
@@ -54,3 +54,2 @@ "keywords": [
     "html-entities": "^1.2.1",
-    "lodash.debounce": "^4.0.8",
     "native-url": "^0.2.6",
@@ -90,3 +89,2 @@ "schema-utils": "^2.6.5",
     "webpack": "^4.43.0",
-    "webpack.next": "npm:webpack@^5.0.0-beta.22",
     "webpack-cli": "^3.3.12",
@@ -97,2 +95,3 @@ "webpack-cli.beta": "npm:webpack-cli@^4.0.0-beta.8",
     "webpack-plugin-serve": "^1.0.1",
+    "webpack.next": "npm:webpack@^5.0.0-beta.22",
     "yn": "^4.0.0"
@@ -99,0 +98,0 @@ },

sockets/utils/getCurrentScriptSource.js

@@ -19,5 +19,5 @@ /**
 
-  throw new Error('Failed to get current script source!');
+  throw new Error('[React Refresh] Failed to get current script source!');
 }
 
 module.exports = getCurrentScriptSource;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

103479

increased by2.29%

Dependency count

14

decreased by-6.67%

Number of package files

48

increased by4.35%

Lines of code

2497

increased by2.8%

Dependency changes

• - Removedlodash.debounce@^4.0.8

• - Removedlodash.debounce@4.0.8(transitive)