Babel无法解析@wordpress包，编译报错如何解决？

问题原因 #

Webpack默认不会转译node_modules目录下的文件，而你用到的@wordpress/hooks、@wordpress/i18n包中包含了当前编译环境未支持的JS语法（比如可选链操作符?.），导致Babel无法解析这些语法，触发上述错误。

解决方案 #

1. 修改Webpack配置，让Babel处理@wordpress模块 #

在Webpack的module.rules中调整babel-loader规则，排除node_modules但例外处理@wordpress开头的包：

module.exports = {
  // ...其他Webpack配置项
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        // 排除node_modules，但@wordpress相关包除外
        exclude: /node_modules\/(?!(@wordpress)\/).*/,
        use: 'babel-loader',
      },
    ],
  },
};

2. 检查并更新依赖版本 #

确保@wordpress/babel-preset-default与其他@wordpress包版本兼容，执行更新命令：

npm update @wordpress/api-fetch @wordpress/hooks @wordpress/i18n @wordpress/babel-preset-default

3. 验证Babel配置顺序 #

你的Babel预设顺序已符合要求，但需确认@wordpress/default是最后一个预设，确保它的规则能覆盖前面的配置（当前配置已满足此要求）。

完成上述操作后重新执行编译命令，错误即可解决。

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