Vue.js中使用v-calendar出现nullish coalescing operator(??)解析错误

错误现象 #

您可能需要合适的加载器来处理该文件类型，目前未配置任何加载器来处理此文件。

完整错误信息：

error  in ./node_modules/v-calendar/dist/es/index.js

Module parse failed: Unexpected token (1889:19)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
| const resolveEl = (target) => {
|   if (target == null)
>     return target ?? null;
|   if (document && isString_1(target))
|     return document.querySelector(target);

 @ ./src/main.js 13:0-35 15:0-65 27:12-21 29:12-25 30:30-38 31:32-42
 @ multi (webpack)-dev-server/client?http://192.168.88.134:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

当前配置文件：

babel.config.js #

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-optional-chaining",
  ],
};

vue.config.js #

module.exports = {
  transpileDependencies: ["@gtm-support/vue-gtm", "v-calendar"],
  productionSourceMap: false,
  chainWebpack: (config) => {
    if (process.env.NODE_ENV === "development") {
      config.output
        .filename("[name].[hash].js")
        .chunkFilename("[name].[hash].js")
        .end();
    }
  },
};

已执行安装命令：

npm install --save-dev @babel/plugin-proposal-nullish-coalescing-operator @babel/plugin-proposal-optional-chaining

解决方案 #

1. 调整Babel预设的目标环境配置 #

修改babel.config.js，明确指定目标浏览器版本，确保Babel触发ES2020语法转译：

module.exports = {
  presets: [
    ['@vue/cli-plugin-babel/preset', {
      targets: {
        // 根据项目需求调整目标环境
        chrome: '60',
        firefox: '55',
        ie: '11'
      },
      useBuiltIns: 'usage',
      corejs: 3
    }]
  ],
  plugins: [
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-optional-chaining"
  ]
};

2. 优化transpileDependencies匹配规则 #

将vue.config.js中的transpileDependencies改为正则匹配，确保覆盖v-calendar的所有子模块：

module.exports = {
  transpileDependencies: ["@gtm-support/vue-gtm", /v-calendar/],
  productionSourceMap: false,
  chainWebpack: (config) => {
    if (process.env.NODE_ENV === "development") {
      config.output
        .filename("[name].[hash].js")
        .chunkFilename("[name].[hash].js")
        .end();
    }
  },
};

3. 清除缓存并重启服务 #

执行以下命令清除编译缓存，避免旧代码干扰：

# 清除node_modules缓存
rm -rf node_modules/.cache
# 无缓存启动开发服务
npm run serve --no-cache

4. 检查版本兼容性 #

确认v-calendar版本与@vue/cli版本匹配：

• 若使用v-calendar v2.x，需确保@vue/cli版本≥4.5.0
• 版本差距过大时，考虑升级@vue/cli或降级v-calendar到兼容版本

问题原因 #

错误中的??是ES2020的空值合并运算符，Webpack默认无法解析该语法，需通过Babel转译。之前配置未生效的可能原因：

• Babel预设未指定目标环境，导致转译规则未触发
• transpileDependencies的字符串匹配未覆盖v-calendar的全部代码文件
• 编译缓存保留了旧的未转译代码

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