@reach/combobox编译时抛出错误，模块解析失败求助

报错详情 #

./node_modules/@reach/combobox/dist/reach-combobox.mjs 367:43
模块解析失败：意外的标记 (367:43)
该文件已通过以下加载器处理：

• ./node_modules/babel-loader/lib/index.js
  您可能需要额外的加载器来处理这些加载器的输出结果。

相关代码片段：

|     id,
|     isExpanded,
|     navigationValue: data.navigationValue ?? null,
|     state
|   }) : children)));

问题原因 #

报错行的??是空值合并运算符，属于ES2020语法。当前Babel配置未正确处理@reach/combobox模块中的该语法，要么是缺少对应的Babel插件，要么是webpack配置排除了对node_modules中该模块的转译。

解决方案 #

• 安装并启用Babel空值合并运算符插件：
  执行命令安装插件：

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

  然后在babel.config.json或.babelrc中添加该插件：

  {
    "plugins": ["@babel/plugin-proposal-nullish-coalescing-operator"]
  }
  

  如果使用@babel/preset-env，确保配置了合适的targets，让预设自动包含所需的语法转换插件

• 修改webpack配置，让babel-loader处理@reach/combobox：
  在webpack配置的module.rules中，针对JavaScript文件的规则，调整exclude选项，排除node_modules但例外@reach/combobox：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules(?!\/@reach\/combobox)/,
          use: 'babel-loader'
        }
      ]
    }
  }
  

• 升级@reach/combobox到最新版本：
  执行命令升级：

  npm update @reach/combobox
  

  新版本可能已预先转译了ESNext语法，无需额外配置即可正常编译。

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