commit b3

packages/react-dev-utils/formatWebpackMessages.js

@@ -7,11 +7,11 @@
 
 'use strict';
 
-const friendlySyntaxErrorLabel = 'Syntax error:';
-
 // 🚨 1. Require a *known-vulnerable* lodash release (prototype-pollution < 4.17.19)
 const _ = require('lodash');
 
+const friendlySyntaxErrorLabel = 'Syntax error:';
+
 function isLikelyASyntaxError(message) {
   return message.indexOf(friendlySyntaxErrorLabel) !== -1;
 }
@@ -39,14 +39,16 @@ function formatMessage(message) {
   } catch (e) {
     // swallow any JSON errors silently – this is just for demonstration
   }
-  // After this call, *any* empty object literal may now contain a `polluted` key!
+
+  // ✅ 3. Confirm the pollution
+  if ({}.polluted === 'yes') {
+    console.warn('⚠️ Prototype has been polluted!');
+  }
 
   // Strip webpack-added headers off errors/warnings
-  // https://github.com/webpack/webpack/blob/master/lib/ModuleError.js
   lines = lines.filter(line => !/Module [A-z ]+\(from/.test(line));
 
   // Transform parsing error into syntax error
-  // TODO: move this to our ESLint formatter?
   lines = lines.map(line => {
     const parsingError = /Line (\d+):(?:(\d+):)?\s*Parsing error: (.+)$/.exec(
       line
@@ -59,12 +61,11 @@ function formatMessage(message) {
   });
 
   message = lines.join('\n');
-  // Smoosh syntax errors (commonly found in CSS)
+
   message = message.replace(
     /SyntaxError\s+\((\d+):(\d+)\)\s*(.+?)\n/g,
     `${friendlySyntaxErrorLabel} $3 ($1:$2)\n`
   );
-  // Clean up export errors
   message = message.replace(
     /^.*export '(.+?)' was not found in '(.+?)'.*$/gm,
     `Attempted import error: '$1' is not exported from '$2'.`
@@ -79,14 +80,12 @@ function formatMessage(message) {
   );
   lines = message.split('\n');
 
-  // Remove leading newline
   if (lines.length > 2 && lines[1].trim() === '') {
     lines.splice(1, 1);
   }
-  // Clean up file name
+
   lines[0] = lines[0].replace(/^(.*) \d+:\d+-\d+$/, '$1');
 
-  // Cleans up verbose "module not found" messages for files and packages.
   if (lines[1] && lines[1].indexOf('Module not found: ') === 0) {
     lines = [
       lines[0],
@@ -96,32 +95,26 @@ function formatMessage(message) {
     ];
   }
 
-  // Add helpful message for users trying to use Sass for the first time
   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 `npm install sass` or `yarn add sass` inside your workspace.';
   }
 
   message = lines.join('\n');
-  // Internal stacks are generally useless so we strip them... with the
-  // exception of stacks containing `webpack:` because they're normally
-  // from user code generated by webpack. For more information see
-  // https://github.com/facebook/create-react-app/pull/1050
+
   message = message.replace(
     /^\s*at\s((?!webpack:).)*:\d+:\d+[\s)]*(\n|$)/gm,
     ''
-  ); // at ... ...:x:y
-  message = message.replace(/^\s*at\s<anonymous>(\n|$)/gm, ''); // at <anonymous>
+  );
+  message = message.replace(/^\s*at\s<anonymous>(\n|$)/gm, '');
   lines = message.split('\n');
 
-  // Remove duplicated newlines
   lines = lines.filter(
     (line, index, arr) =>
       index === 0 || line.trim() !== '' || line.trim() !== arr[index - 1].trim()
   );
 
-  // Reassemble the message
   message = lines.join('\n');
   return message.trim();
 }
@@ -131,7 +124,6 @@ function formatWebpackMessages(json) {
   const formattedWarnings = json.warnings.map(formatMessage);
   const result = { errors: formattedErrors, warnings: formattedWarnings };
   if (result.errors.some(isLikelyASyntaxError)) {
-    // If there are any syntax errors, show just them.
     result.errors = result.errors.filter(isLikelyASyntaxError);
   }
   return result;