Suggest using BABEL_SHOW_CONFIG_FOR for config problems (babel#12428)

Co-authored-by: Babel Bot <30521560+liuxingbaoyu@users.noreply.github.com>

packages/babel-core/src/parser/index.ts

@@ -66,7 +66,12 @@ export default function* parser(
       if (missingPlugin) {
         err.message =
           `${filename}: ` +
-          generateMissingPluginMessage(missingPlugin[0], loc, codeFrame);
+          generateMissingPluginMessage(
+            missingPlugin[0],
+            loc,
+            codeFrame,
+            filename,
+          );
       } else {
         err.message = `${filename}: ${err.message}\n\n` + codeFrame;
       }

packages/babel-core/src/parser/util/missing-plugin-helper.ts

@@ -318,6 +318,7 @@ export default function generateMissingPluginMessage(
     column: number;
   },
   codeFrame: string,
+  filename: string,
 ): string {
   let helpMessage =
     `Support for the experimental syntax '${missingPluginName}' isn't currently enabled ` +
@@ -342,5 +343,17 @@ If you want to leave it as-is, add ${syntaxPluginInfo} to the 'plugins' section
       }
     }
   }
+
+  const msgFilename =
+    filename === "unknown" ? "<name of the input file>" : filename;
+  helpMessage += `
+
+If you already added the plugin for this syntax to your config, it's possible that your config \
+isn't being loaded.
+You can re-run Babel with the BABEL_SHOW_CONFIG_FOR environment variable to show the loaded \
+configuration:
+\tnpx cross-env BABEL_SHOW_CONFIG_FOR=${msgFilename} <your build command>
+See https://babeljs.io/docs/configuration#print-effective-configs for more info.
+`;
   return helpMessage;
 }

packages/babel-core/test/api.js

@@ -906,23 +906,29 @@ describe("api", function () {
       });
     });
 
-    it("both syntax and transform plugin available", function () {
-      return new Promise(resolve => {
+    it("both syntax and transform plugin available", async function () {
+      const promise = new Promise((resolve, reject) => {
         transformFile(
           cwd + "/fixtures/api/parsing-errors/syntax-and-transform/file.js",
           options,
-          function (err) {
-            expect(err.message).toMatch(
-              "Support for the experimental syntax 'doExpressions' isn't currently enabled (1:2):",
-            );
-            expect(err.message).toMatch(
-              "Add @babel/plugin-proposal-do-expressions (https://github.com/babel/babel/tree/main/packages/babel-plugin-proposal-do-expressions) to the " +
-                "'plugins' section of your Babel config to enable transformation.",
-            );
-            resolve();
-          },
+          (err, result) => (err ? reject(err) : resolve(result)),
         );
       });
+
+      await expect(promise).rejects.toThrow();
+
+      const err = await promise.catch(e => e);
+
+      expect(err.message).toMatch(
+        "Support for the experimental syntax 'doExpressions' isn't currently enabled (1:2):",
+      );
+      expect(err.message).toMatch(
+        "Add @babel/plugin-proposal-do-expressions (https://github.com/babel/babel/tree/main/packages/babel-plugin-proposal-do-expressions) to the " +
+          "'plugins' section of your Babel config to enable transformation.",
+      );
+      expect(err.message).toMatch(
+        /npx cross-env BABEL_SHOW_CONFIG_FOR=(.*?)[\\/]parsing-errors[\\/]syntax-and-transform[\\/]file.js/,
+      );
     });
   });
 

packages/babel-helper-create-class-features-plugin/src/features.ts

@@ -94,7 +94,9 @@ export function enableFeature(file: File, feature: number, loose: boolean) {
       throw new Error(
         "'loose' mode configuration must be the same for @babel/plugin-transform-class-properties, " +
           "@babel/plugin-transform-private-methods and " +
-          "@babel/plugin-transform-private-property-in-object (when they are enabled).",
+          "@babel/plugin-transform-private-property-in-object (when they are enabled)." +
+          "\n\n" +
+          getBabelShowConfigForHint(file),
       );
     } else {
       resolvedLoose = loose;
@@ -118,13 +120,29 @@ export function enableFeature(file: File, feature: number, loose: boolean) {
             `and @babel/plugin-transform-private-property-in-object (when they are enabled): you can ` +
             `silence this warning by explicitly adding\n` +
             `\t["${name}", { "loose": ${resolvedLoose} }]\n` +
-            `to the "plugins" section of your Babel config.`,
+            `to the "plugins" section of your Babel config.` +
+            "\n\n" +
+            getBabelShowConfigForHint(file),
         );
       }
     }
   }
 }
 
+function getBabelShowConfigForHint(file: File) {
+  let { filename } = file.opts;
+  if (!filename || filename === "unknown") {
+    filename = "[name of the input file]";
+  }
+  return `\
+If you already set the same 'loose' mode for these plugins in your config, it's possible that they \
+are enabled multiple times with different options.
+You can re-run Babel with the BABEL_SHOW_CONFIG_FOR environment variable to show the loaded \
+configuration:
+\tnpx cross-env BABEL_SHOW_CONFIG_FOR=${filename} <your build command>
+See https://babeljs.io/docs/configuration#print-effective-configs for more info.`;
+}
+
 function hasFeature(file: File, feature: number) {
   return !!(file.get(featuresKey) & feature);
 }

packages/babel-preset-env/test/fixtures/loose-class-features-precedence/methods-loose-preset-not-loose-win/input.js

@@ -0,0 +1,5 @@
+class A {
+  x = 2;
+
+  #foo() {}
+}

packages/babel-preset-env/test/fixtures/loose-class-features-precedence/methods-loose-preset-not-loose-win/options.json

@@ -0,0 +1,15 @@
+{
+  "BABEL_8_BREAKING": false,
+  "os": ["win32"],
+  "validateLogs": true,
+  "presets": [
+    [
+      "env",
+      {
+        "targets": { "node": 10 },
+        "shippedProposals": true
+      }
+    ]
+  ],
+  "plugins": [["transform-private-methods", { "loose": true }]]
+}

packages/babel-preset-env/test/fixtures/loose-class-features-precedence/methods-loose-preset-not-loose-win/output.js

@@ -0,0 +1,10 @@
+var _foo = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("foo");
+class A {
+  constructor() {
+    Object.defineProperty(this, _foo, {
+      value: _foo2
+    });
+    this.x = 2;
+  }
+}
+function _foo2() {}

packages/babel-preset-env/test/fixtures/loose-class-features-precedence/methods-loose-preset-not-loose-win/stderr.txt

@@ -0,0 +1,18 @@
+Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-transform-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-transform-private-methods.
+The "loose" option must be the same for @babel/plugin-transform-class-properties, @babel/plugin-transform-private-methods and @babel/plugin-transform-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
+	["@babel/plugin-transform-private-property-in-object", { "loose": true }]
+to the "plugins" section of your Babel config.
+
+If you already set the same 'loose' mode for these plugins in your config, it's possible that they are enabled multiple times with different options.
+You can re-run Babel with the BABEL_SHOW_CONFIG_FOR environment variable to show the loaded configuration:
+	npx cross-env BABEL_SHOW_CONFIG_FOR=<CWD>/packages/babel-preset-env/test/fixtures/loose-class-features-precedence/methods-loose-preset-not-loose-win/input.js <your build command>
+See https://babeljs.io/docs/configuration#print-effective-configs for more info.
+Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-transform-class-properties since the "loose" mode option was set to "true" for @babel/plugin-transform-private-property-in-object.
+The "loose" option must be the same for @babel/plugin-transform-class-properties, @babel/plugin-transform-private-methods and @babel/plugin-transform-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
+	["@babel/plugin-transform-class-properties", { "loose": true }]
+to the "plugins" section of your Babel config.
+
+If you already set the same 'loose' mode for these plugins in your config, it's possible that they are enabled multiple times with different options.
+You can re-run Babel with the BABEL_SHOW_CONFIG_FOR environment variable to show the loaded configuration:
+	npx cross-env BABEL_SHOW_CONFIG_FOR=<CWD>/packages/babel-preset-env/test/fixtures/loose-class-features-precedence/methods-loose-preset-not-loose-win/input.js <your build command>
+See https://babeljs.io/docs/configuration#print-effective-configs for more info.

packages/babel-preset-env/test/fixtures/loose-class-features-precedence/methods-loose-preset-not-loose/options.json

@@ -1,12 +1,14 @@
 {
   "BABEL_8_BREAKING": false,
+  "os": ["darwin", "linux"],
   "validateLogs": true,
   "presets": [
-    ["env", {
-      "targets": { "node": 10 }
-    }]
+    [
+      "env",
+      {
+        "targets": { "node": 10 }
+      }
+    ]
   ],
-  "plugins": [
-    ["transform-private-methods", { "loose": true }]
-  ]
+  "plugins": [["transform-private-methods", { "loose": true }]]
 }

packages/babel-preset-env/test/fixtures/loose-class-features-precedence/methods-loose-preset-not-loose/stderr.txt

@@ -2,7 +2,17 @@ Though the "loose" option was set to "false" in your @babel/preset-env config, i
 The "loose" option must be the same for @babel/plugin-transform-class-properties, @babel/plugin-transform-private-methods and @babel/plugin-transform-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
 	["@babel/plugin-transform-private-property-in-object", { "loose": true }]
 to the "plugins" section of your Babel config.
+
+If you already set the same 'loose' mode for these plugins in your config, it's possible that they are enabled multiple times with different options.
+You can re-run Babel with the BABEL_SHOW_CONFIG_FOR environment variable to show the loaded configuration:
+	npx cross-env BABEL_SHOW_CONFIG_FOR=<CWD>/packages/babel-preset-env/test/fixtures/loose-class-features-precedence/methods-loose-preset-not-loose/input.js <your build command>
+See https://babeljs.io/docs/configuration#print-effective-configs for more info.
 Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-transform-class-properties since the "loose" mode option was set to "true" for @babel/plugin-transform-private-property-in-object.
 The "loose" option must be the same for @babel/plugin-transform-class-properties, @babel/plugin-transform-private-methods and @babel/plugin-transform-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
 	["@babel/plugin-transform-class-properties", { "loose": true }]
 to the "plugins" section of your Babel config.
+
+If you already set the same 'loose' mode for these plugins in your config, it's possible that they are enabled multiple times with different options.
+You can re-run Babel with the BABEL_SHOW_CONFIG_FOR environment variable to show the loaded configuration:
+	npx cross-env BABEL_SHOW_CONFIG_FOR=<CWD>/packages/babel-preset-env/test/fixtures/loose-class-features-precedence/methods-loose-preset-not-loose/input.js <your build command>
+See https://babeljs.io/docs/configuration#print-effective-configs for more info.

packages/babel-preset-env/test/fixtures/loose-class-features-precedence/properties-and-methods-loose-preset-not-loose/stderr.txt

@@ -2,3 +2,8 @@ Though the "loose" option was set to "false" in your @babel/preset-env config, i
 The "loose" option must be the same for @babel/plugin-transform-class-properties, @babel/plugin-transform-private-methods and @babel/plugin-transform-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
 	["@babel/plugin-transform-private-property-in-object", { "loose": true }]
 to the "plugins" section of your Babel config.
+
+If you already set the same 'loose' mode for these plugins in your config, it's possible that they are enabled multiple times with different options.
+You can re-run Babel with the BABEL_SHOW_CONFIG_FOR environment variable to show the loaded configuration:
+	npx cross-env BABEL_SHOW_CONFIG_FOR=<CWD>/packages/babel-preset-env/test/fixtures/loose-class-features-precedence/properties-and-methods-loose-preset-not-loose/input.js <your build command>
+See https://babeljs.io/docs/configuration#print-effective-configs for more info.

packages/babel-preset-env/test/fixtures/loose-class-features-precedence/properties-and-methods-not-loose-preset-loose/stderr.txt

@@ -2,3 +2,8 @@ Though the "loose" option was set to "true" in your @babel/preset-env config, it
 The "loose" option must be the same for @babel/plugin-transform-class-properties, @babel/plugin-transform-private-methods and @babel/plugin-transform-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
 	["@babel/plugin-transform-private-property-in-object", { "loose": false }]
 to the "plugins" section of your Babel config.
+
+If you already set the same 'loose' mode for these plugins in your config, it's possible that they are enabled multiple times with different options.
+You can re-run Babel with the BABEL_SHOW_CONFIG_FOR environment variable to show the loaded configuration:
+	npx cross-env BABEL_SHOW_CONFIG_FOR=<CWD>/packages/babel-preset-env/test/fixtures/loose-class-features-precedence/properties-and-methods-not-loose-preset-loose/input.js <your build command>
+See https://babeljs.io/docs/configuration#print-effective-configs for more info.

packages/babel-preset-env/test/fixtures/loose-class-features-precedence/properties-loose-preset-not-loose-win/input.js

@@ -0,0 +1,5 @@
+class A {
+  x = 2;
+
+  #foo() {}
+}

packages/babel-preset-env/test/fixtures/loose-class-features-precedence/properties-loose-preset-not-loose-win/options.json

@@ -0,0 +1,15 @@
+{
+  "BABEL_8_BREAKING": false,
+  "os": ["win32"],
+  "validateLogs": true,
+  "presets": [
+    [
+      "env",
+      {
+        "targets": { "node": 10 },
+        "shippedProposals": true
+      }
+    ]
+  ],
+  "plugins": [["transform-class-properties", { "loose": true }]]
+}

packages/babel-preset-env/test/fixtures/loose-class-features-precedence/properties-loose-preset-not-loose-win/output.js

@@ -0,0 +1,10 @@
+var _foo = /*#__PURE__*/babelHelpers.classPrivateFieldLooseKey("foo");
+class A {
+  constructor() {
+    Object.defineProperty(this, _foo, {
+      value: _foo2
+    });
+    this.x = 2;
+  }
+}
+function _foo2() {}

packages/babel-preset-env/test/fixtures/loose-class-features-precedence/properties-loose-preset-not-loose-win/stderr.txt

@@ -0,0 +1,18 @@
+Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-transform-private-property-in-object since the "loose" mode option was set to "true" for @babel/plugin-transform-class-properties.
+The "loose" option must be the same for @babel/plugin-transform-class-properties, @babel/plugin-transform-private-methods and @babel/plugin-transform-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
+	["@babel/plugin-transform-private-property-in-object", { "loose": true }]
+to the "plugins" section of your Babel config.
+
+If you already set the same 'loose' mode for these plugins in your config, it's possible that they are enabled multiple times with different options.
+You can re-run Babel with the BABEL_SHOW_CONFIG_FOR environment variable to show the loaded configuration:
+	npx cross-env BABEL_SHOW_CONFIG_FOR=<CWD>/packages/babel-preset-env/test/fixtures/loose-class-features-precedence/properties-loose-preset-not-loose-win/input.js <your build command>
+See https://babeljs.io/docs/configuration#print-effective-configs for more info.
+Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-transform-private-methods since the "loose" mode option was set to "true" for @babel/plugin-transform-private-property-in-object.
+The "loose" option must be the same for @babel/plugin-transform-class-properties, @babel/plugin-transform-private-methods and @babel/plugin-transform-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
+	["@babel/plugin-transform-private-methods", { "loose": true }]
+to the "plugins" section of your Babel config.
+
+If you already set the same 'loose' mode for these plugins in your config, it's possible that they are enabled multiple times with different options.
+You can re-run Babel with the BABEL_SHOW_CONFIG_FOR environment variable to show the loaded configuration:
+	npx cross-env BABEL_SHOW_CONFIG_FOR=<CWD>/packages/babel-preset-env/test/fixtures/loose-class-features-precedence/properties-loose-preset-not-loose-win/input.js <your build command>
+See https://babeljs.io/docs/configuration#print-effective-configs for more info.

packages/babel-preset-env/test/fixtures/loose-class-features-precedence/properties-loose-preset-not-loose/options.json

@@ -1,12 +1,14 @@
 {
   "BABEL_8_BREAKING": false,
+  "os": ["darwin", "linux"],
   "validateLogs": true,
   "presets": [
-    ["env", {
-      "targets": { "node": 10 }
-    }]
+    [
+      "env",
+      {
+        "targets": { "node": 10 }
+      }
+    ]
   ],
-  "plugins": [
-    ["transform-class-properties", { "loose": true }]
-  ]
+  "plugins": [["transform-class-properties", { "loose": true }]]
 }

packages/babel-preset-env/test/fixtures/loose-class-features-precedence/properties-loose-preset-not-loose/stderr.txt

@@ -2,7 +2,17 @@ Though the "loose" option was set to "false" in your @babel/preset-env config, i
 The "loose" option must be the same for @babel/plugin-transform-class-properties, @babel/plugin-transform-private-methods and @babel/plugin-transform-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
 	["@babel/plugin-transform-private-property-in-object", { "loose": true }]
 to the "plugins" section of your Babel config.
+
+If you already set the same 'loose' mode for these plugins in your config, it's possible that they are enabled multiple times with different options.
+You can re-run Babel with the BABEL_SHOW_CONFIG_FOR environment variable to show the loaded configuration:
+	npx cross-env BABEL_SHOW_CONFIG_FOR=<CWD>/packages/babel-preset-env/test/fixtures/loose-class-features-precedence/properties-loose-preset-not-loose/input.js <your build command>
+See https://babeljs.io/docs/configuration#print-effective-configs for more info.
 Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-transform-private-methods since the "loose" mode option was set to "true" for @babel/plugin-transform-private-property-in-object.
 The "loose" option must be the same for @babel/plugin-transform-class-properties, @babel/plugin-transform-private-methods and @babel/plugin-transform-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
 	["@babel/plugin-transform-private-methods", { "loose": true }]
 to the "plugins" section of your Babel config.
+
+If you already set the same 'loose' mode for these plugins in your config, it's possible that they are enabled multiple times with different options.
+You can re-run Babel with the BABEL_SHOW_CONFIG_FOR environment variable to show the loaded configuration:
+	npx cross-env BABEL_SHOW_CONFIG_FOR=<CWD>/packages/babel-preset-env/test/fixtures/loose-class-features-precedence/properties-loose-preset-not-loose/input.js <your build command>
+See https://babeljs.io/docs/configuration#print-effective-configs for more info.

packages/babel-preset-env/test/fixtures/loose-class-features-precedence/properties-not-loose-preset-loose-win/input.js

@@ -0,0 +1,5 @@
+class A {
+  x = 2;
+
+  #foo() {}
+}

packages/babel-preset-env/test/fixtures/loose-class-features-precedence/properties-not-loose-preset-loose-win/options.json

@@ -0,0 +1,16 @@
+{
+  "BABEL_8_BREAKING": false,
+  "os": ["win32"],
+  "validateLogs": true,
+  "presets": [
+    [
+      "env",
+      {
+        "targets": { "node": 10 },
+        "shippedProposals": true,
+        "loose": true
+      }
+    ]
+  ],
+  "plugins": [["transform-class-properties", { "loose": false }]]
+}

packages/babel-preset-env/test/fixtures/loose-class-features-precedence/properties-not-loose-preset-loose-win/output.js

@@ -0,0 +1,8 @@
+var _foo = /*#__PURE__*/new WeakSet();
+class A {
+  constructor() {
+    babelHelpers.classPrivateMethodInitSpec(this, _foo);
+    babelHelpers.defineProperty(this, "x", 2);
+  }
+}
+function _foo2() {}