polish: throw human-friendly error when item-option pair is in… (#10969)

* polish: throw human-friendly error when item-option pair is incorrectly unwrapped

* add testcase for plugin

* fix: exclude false positive

* fix: validate should support plugin optionsSourceKind

* Revert "fix: validate should support plugin optionsSourceKind"

* fix: validate plugin object in assertNoUnwrappedItemOptionPairs

* fix flow error

* update test fixtures

* refactor: move to loadDescriptor catch clause

* chore: throw Error instead of builtin ReferenceError

* fix flow errors

* chore: add more test cases

packages/babel-core/src/config/full.js

@@ -20,7 +20,11 @@ import {
   makeWeakCacheSync,
   type CacheConfigurator,
 } from "./caching";
-import { validate, type CallerMetadata } from "./validation/options";
+import {
+  validate,
+  type CallerMetadata,
+  checkNoUnwrappedItemOptionPairs,
+} from "./validation/options";
 import { validatePluginObject } from "./validation/plugins";
 import makeAPI from "./helpers/config-api";
 
@@ -78,19 +82,48 @@ export default gensync<[any], ResolvedConfig | null>(function* loadFullConfig(
       pass: Array<Plugin>,
     ) {
       const plugins = [];
-      for (const descriptor of config.plugins) {
+      for (let i = 0; i < config.plugins.length; i++) {
+        const descriptor = config.plugins[i];
         if (descriptor.options !== false) {
-          plugins.push(yield* loadPluginDescriptor(descriptor, context));
+          try {
+            plugins.push(yield* loadPluginDescriptor(descriptor, context));
+          } catch (e) {
+            // print special message for `plugins: ["@babel/foo", { foo: "option" }]`
+            if (i > 0 && e.code === "BABEL_UNKNOWN_PLUGIN_PROPERTY") {
+              checkNoUnwrappedItemOptionPairs(
+                config.plugins[i - 1],
+                descriptor,
+                "plugin",
+                i,
+                e,
+              );
+            }
+            throw e;
+          }
         }
       }
 
       const presets = [];
-      for (const descriptor of config.presets) {
+      for (let i = 0; i < config.presets.length; i++) {
+        const descriptor = config.presets[i];
         if (descriptor.options !== false) {
-          presets.push({
-            preset: yield* loadPresetDescriptor(descriptor, context),
-            pass: descriptor.ownPass ? [] : pass,
-          });
+          try {
+            presets.push({
+              preset: yield* loadPresetDescriptor(descriptor, context),
+              pass: descriptor.ownPass ? [] : pass,
+            });
+          } catch (e) {
+            if (i > 0 && e.code === "BABEL_UNKNOWN_OPTION") {
+              checkNoUnwrappedItemOptionPairs(
+                config.presets[i - 1],
+                descriptor,
+                "preset",
+                i,
+                e,
+              );
+            }
+            throw e;
+          }
         }
       }
 

packages/babel-core/src/config/validation/options.js

@@ -27,6 +27,7 @@ import {
   type Validator,
   type OptionPath,
 } from "./option-assertions";
+import type { UnloadedDescriptor } from "../config-descriptors";
 
 const ROOT_VALIDATORS: ValidatorSet = {
   cwd: (assertString: Validator<$PropertyType<ValidatedOptions, "cwd">>),
@@ -365,16 +366,20 @@ function throwUnknownError(loc: OptionPath) {
   if (removed[key]) {
     const { message, version = 5 } = removed[key];
 
-    throw new ReferenceError(
+    throw new Error(
       `Using removed Babel ${version} option: ${msg(loc)} - ${message}`,
     );
   } else {
     // eslint-disable-next-line max-len
-    const unknownOptErr = `Unknown option: ${msg(
-      loc,
-    )}. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.`;
+    const unknownOptErr = new Error(
+      `Unknown option: ${msg(
+        loc,
+      )}. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.`,
+    );
+    // $FlowIgnore
+    unknownOptErr.code = "BABEL_UNKNOWN_OPTION";
 
-    throw new ReferenceError(unknownOptErr);
+    throw unknownOptErr;
   }
 }
 
@@ -439,3 +444,26 @@ function assertOverridesList(loc: OptionPath, value: mixed): OverridesList {
   }
   return (arr: any);
 }
+
+export function checkNoUnwrappedItemOptionPairs(
+  lastItem: UnloadedDescriptor,
+  thisItem: UnloadedDescriptor,
+  type: "plugin" | "preset",
+  index: number,
+  e: Error,
+): void {
+  if (
+    lastItem.file &&
+    lastItem.options === undefined &&
+    typeof thisItem.value === "object"
+  ) {
+    e.message +=
+      `\n- Maybe you meant to use\n` +
+      `"${type}": [\n  ["${lastItem.file.request}", ${JSON.stringify(
+        thisItem.value,
+        undefined,
+        2,
+      )}]\n]\n` +
+      `To be a valid ${type}, its name and options should be wrapped in a pair of brackets`;
+  }
+}

packages/babel-core/src/config/validation/plugins.js

@@ -97,7 +97,14 @@ export function validatePluginObject(obj: {}): PluginObject {
     };
 
     if (validator) validator(optLoc, obj[key]);
-    else throw new Error(`.${key} is not a valid Plugin property`);
+    else {
+      const invalidPluginPropertyError = new Error(
+        `.${key} is not a valid Plugin property`,
+      );
+      // $FlowIgnore
+      invalidPluginPropertyError.code = "BABEL_UNKNOWN_PLUGIN_PROPERTY";
+      throw invalidPluginPropertyError;
+    }
   });
 
   return (obj: any);