feat(webpack-cli): support non-JS config formats via interpret (json5, yaml)

claude · claude · commit e21266f9ac76 · 2026-06-17T13:29:03.000Z
Gate the interpret/rechoir lookup on `interpret.extensions` instead of `interpret.jsVariants` so non-JavaScript config formats such as `.json5`, `.yaml` and `.yml` are loadable, in addition to the JS variants that already worked. This also removes the now-redundant `.cts` special case, since `.cts` is present in `interpret.extensions`. The parsers for these formats are intentionally not shipped by webpack-cli. `rechoir` loads the matching registration module (e.g. `json5/lib/register`, `yaml-hook/register`) on demand only when the developer has installed it; when it is missing, webpack-cli reports which package to install. Tests: - json5/yaml/yml configs load successfully when the parser is installed (`json5` and `yaml-hook` are added as dev dependencies for the test run). - toml config reports the `Please install` guidance because its parser (`toml-require`) is intentionally not installed. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013AushhUmU7F2dKWRE94XCg
diff --git a/.changeset/json5-and-yaml-config.md b/.changeset/json5-and-yaml-config.md
@@ -0,0 +1,7 @@
+---
+"webpack-cli": minor
+---
+
+feat: support non-JavaScript config formats (e.g. `.json5`, `.yaml`/`.yml`) via `interpret`
+
+webpack-cli now recognizes every config extension known to `interpret`, not only the JavaScript variants. The parsers for these formats are intentionally not shipped — install the matching package yourself (for example `json5` or `yaml-hook`) and it will be picked up automatically. When the parser is missing, webpack-cli reports which package to install instead of failing with an opaque error.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -70,6 +70,7 @@
     "get-port": "^7.1.0",
     "husky": "^9.1.4",
     "jest": "^30.2.0",
+    "json5": "^2.2.3",
     "lint-staged": "^17.0.3",
     "mini-css-extract-plugin": "^2.6.1",
     "prettier": "^3.6.0",
@@ -83,7 +84,8 @@
     "typescript": "^6.0.2",
     "webpack": "^5.106.1",
     "webpack-bundle-analyzer": "^5.1.0",
-    "webpack-dev-server": "^5.1.0"
+    "webpack-dev-server": "^5.1.0",
+    "yaml-hook": "^1.0.0"
   },
   "peerDependencies": {
     "webpack": "5.x.x"
diff --git a/packages/webpack-cli/src/webpack-cli.ts b/packages/webpack-cli/src/webpack-cli.ts
@@ -2592,14 +2592,17 @@ class WebpackCLI {
 
         // Fallback logic when we can't use `import(...)`
         if (loadingError) {
-          const { jsVariants, extensions } = await import("interpret");
+          const { extensions } = await import("interpret");
           const ext = path.extname(configPath).toLowerCase();
 
-          let interpreted = Object.keys(jsVariants).find((variant) => variant === ext);
-
-          if (!interpreted && ext.endsWith(".cts")) {
-            interpreted = jsVariants[".ts"] as string;
-          }
+          // Match against every extension `interpret` knows about (not just the
+          // JavaScript variants) so non-JS formats such as `.json5`, `.yaml` and
+          // `.yml` are loadable too. webpack-cli intentionally does not ship the
+          // parsers for these formats; `rechoir` loads the matching registration
+          // module (e.g. `json5/lib/register`, `yaml-hook/register`) only when a
+          // developer has installed it themselves, otherwise it reports which
+          // package to install below.
+          const interpreted = Object.keys(extensions).find((variant) => variant === ext);
 
           if (interpreted && !disableInterpret) {
             const rechoir: Rechoir = (await import("rechoir")).default;
diff --git a/test/build/config-format/json5/json5.test.js b/test/build/config-format/json5/json5.test.js
@@ -1,22 +1,28 @@
+const { existsSync } = require("node:fs");
+const { resolve } = require("node:path");
+
 const { run } = require("../../../utils/test-utils");
 
-// Regression test for an unsupported config format.
-//
-// `interpret` lists `.json5` (via `json5/lib/register`), but webpack-cli only
-// runs `interpret`/`rechoir` for extensions present in `interpret.jsVariants`,
-// which contains JS variants only (`.ts`, `.coffee`, `.babel.js`, ...) and not
-// data formats such as `.json5`, `.yaml` or `.toml`. As a result a `.json5`
-// config is not loadable today, even when `json5` is installed.
-//
-// This test locks in that behavior so the planned move away from `interpret`
-// (towards Node.js' built-in loaders/`import`) does not silently change which
-// formats are accepted without a deliberate decision.
+// webpack-cli supports JSON5 config files through `interpret`/`rechoir`, but it
+// does not ship the parser. The `json5` package has to be installed by the user
+// (here it is available as a dev dependency) and `json5/lib/register` is loaded
+// on demand to register the `.json5` extension.
 describe("webpack cli", () => {
-  it("should not support JSON5 file as flag", async () => {
+  it("should support JSON5 file as flag", async () => {
     const { exitCode, stderr, stdout } = await run(__dirname, ["-c", "webpack.config.json5"]);
 
-    expect(exitCode).toBe(2);
-    expect(stderr).toContain("Failed to load 'webpack.config.json5' config");
-    expect(stdout).toBeFalsy();
+    expect(exitCode).toBe(0);
+    expect(stderr).toBeFalsy();
+    expect(stdout).toBeTruthy();
+    expect(existsSync(resolve(__dirname, "dist/foo.bundle.js"))).toBeTruthy();
+  });
+
+  it("should load JSON5 file by default", async () => {
+    const { exitCode, stderr, stdout } = await run(__dirname, []);
+
+    expect(exitCode).toBe(0);
+    expect(stderr).toBeFalsy();
+    expect(stdout).toBeTruthy();
+    expect(existsSync(resolve(__dirname, "dist/foo.bundle.js"))).toBeTruthy();
   });
 });
diff --git a/test/build/config-format/toml/toml.test.js b/test/build/config-format/toml/toml.test.js
@@ -1,22 +1,17 @@
 const { run } = require("../../../utils/test-utils");
 
-// Regression test for an unsupported config format.
-//
-// `interpret` lists `.toml` (via `toml-require`), but webpack-cli only runs
-// `interpret`/`rechoir` for extensions present in `interpret.jsVariants`, which
-// contains JS variants only (`.ts`, `.coffee`, `.babel.js`, ...) and not data
-// formats such as `.toml`, `.yaml` or `.json5`. As a result a `.toml` config is
-// not loadable today.
-//
-// This test locks in that behavior so the planned move away from `interpret`
-// (towards Node.js' built-in loaders/`import`) does not silently change which
-// formats are accepted without a deliberate decision.
+// webpack-cli recognizes TOML config files through `interpret`/`rechoir` but,
+// like the other non-JS formats, it does not ship the parser. When the required
+// `toml-require` package is not installed, webpack-cli should not crash silently
+// — it should tell the user which package to install. This pins that behavior
+// (the parser is intentionally absent from the project's dependencies).
 describe("webpack cli", () => {
-  it("should not support TOML file as flag", async () => {
+  it("should ask to install the parser for a TOML file when it is missing", async () => {
     const { exitCode, stderr, stdout } = await run(__dirname, ["-c", "webpack.config.toml"]);
 
     expect(exitCode).toBe(2);
-    expect(stderr).toContain("Failed to load 'webpack.config.toml' config");
+    expect(stderr).toContain("toml-require");
+    expect(stderr).toContain("Please install one of them");
     expect(stdout).toBeFalsy();
   });
 });
diff --git a/test/build/config-format/yaml/yaml.test.js b/test/build/config-format/yaml/yaml.test.js
@@ -1,30 +1,37 @@
+const { existsSync } = require("node:fs");
+const { resolve } = require("node:path");
+
 const { run } = require("../../../utils/test-utils");
 
-// Regression test for an unsupported config format.
-//
-// `interpret` lists `.yaml`/`.yml` (via `yaml-hook/register`), but webpack-cli
-// only runs `interpret`/`rechoir` for extensions present in
-// `interpret.jsVariants`, which contains JS variants only (`.ts`, `.coffee`,
-// `.babel.js`, ...) and not data formats such as `.yaml`, `.yml`, `.json5` or
-// `.toml`. As a result YAML configs are not loadable today.
-//
-// This test locks in that behavior so the planned move away from `interpret`
-// (towards Node.js' built-in loaders/`import`) does not silently change which
-// formats are accepted without a deliberate decision.
+// webpack-cli supports YAML config files through `interpret`/`rechoir`, but it
+// does not ship the parser. The `yaml-hook` package has to be installed by the
+// user (here it is available as a dev dependency) and `yaml-hook/register` is
+// loaded on demand to register the `.yaml`/`.yml` extensions.
 describe("webpack cli", () => {
-  it("should not support YAML file as flag", async () => {
+  it("should support YAML file as flag", async () => {
     const { exitCode, stderr, stdout } = await run(__dirname, ["-c", "webpack.config.yaml"]);
 
-    expect(exitCode).toBe(2);
-    expect(stderr).toContain("Failed to load 'webpack.config.yaml' config");
-    expect(stdout).toBeFalsy();
+    expect(exitCode).toBe(0);
+    expect(stderr).toBeFalsy();
+    expect(stdout).toBeTruthy();
+    expect(existsSync(resolve(__dirname, "dist/foo.bundle.js"))).toBeTruthy();
   });
 
-  it("should not support YML file as flag", async () => {
+  it("should support YML file as flag", async () => {
     const { exitCode, stderr, stdout } = await run(__dirname, ["-c", "webpack.config.yml"]);
 
-    expect(exitCode).toBe(2);
-    expect(stderr).toContain("Failed to load 'webpack.config.yml' config");
-    expect(stdout).toBeFalsy();
+    expect(exitCode).toBe(0);
+    expect(stderr).toBeFalsy();
+    expect(stdout).toBeTruthy();
+    expect(existsSync(resolve(__dirname, "dist/foo.bundle.js"))).toBeTruthy();
+  });
+
+  it("should load YAML file by default", async () => {
+    const { exitCode, stderr, stdout } = await run(__dirname, []);
+
+    expect(exitCode).toBe(0);
+    expect(stderr).toBeFalsy();
+    expect(stdout).toBeTruthy();
+    expect(existsSync(resolve(__dirname, "dist/foo.bundle.js"))).toBeTruthy();
   });
 });
