Node.js Webpack构建时JSON文件出现缺少分号错误求助

问题重现 #

构建项目时，格式正确的JSON文件被babel-loader处理，抛出如下语法错误：

ERROR in ./src/express/routes/channels/libs/etsy/etsy.config.json
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\src\express\routes\channels\libs\etsy\etsy.config.json: Missing semicolon. (2:7)

  1 | {
> 2 |   "env": "development",
    |        ^
  3 |   "shopId": "FabricAndSewing",
  4 |   "key": "65hgx4sow7ih76bb9sir78f7",
  5 |   "secret": "8eoy84mw8u",
    at instantiate (C:\Excersys\FASAPI3\node_modules\@babel\parser\lib\index.js:67:32)
    at constructor (C:\Excersys\FASAPI3\node_modules\@babel\parser\lib\index.js:364:12)

核心原因 #

1. 依赖版本冲突与不兼容：同时安装了旧版babel-core@6和新版@babel/core@7，且@babel/core@7.5.5版本过低，与babel-loader@9.1.0不兼容，导致loader异常处理非JS文件。
2. Webpack规则匹配不精确：babel-loader的test正则未精确匹配JS后缀（缺少$），存在误匹配风险。

解决方案 #

步骤1：修复依赖版本问题 #

• 卸载冲突的旧版babel-core：

  npm uninstall babel-core
  

• 更新@babel/core到兼容babel-loader@9的版本：

  npm install @babel/core@^7.12.0 --save-dev
  

步骤2：修正Webpack配置中的Loader规则 #

修改webpackConfig.js中babel-loader的test正则，精确匹配JS文件后缀：

module: {
  rules: [
    {
      test: /\.m?js$/, // 加上$，精确匹配.js或.mjs后缀
      resolve: {
        fullySpecified: false,
      },
      exclude: /node_modules/,
      use: {
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env"],
        },
      },
    },
  ],
  // ...其他原有配置
}

步骤3：确保JSON文件被正确处理（可选） #

Webpack默认支持JSON文件解析，无需额外配置，若需明确声明可添加以下规则：

module: {
  rules: [
    // ...babel-loader规则
    {
      test: /\.json$/,
      type: "json", // 使用Webpack内置的json模块处理
    },
  ],
}

验证 #

重新执行构建命令，确认JSON文件相关错误消失，项目正常编译。

内容的提问来源于stack exchange，提问作者MT AC