Babel未生效classProperties插件 构建docz项目文档持续报错如何解决

原因 #

你遇到的报错本质是两个问题共同导致的：

1. 你当前的Babel配置仅在test、dev两个环境下加载@babel/plugin-proposal-class-properties插件，docz构建/运行时默认不会命中这两个环境，导致插件未生效
2. docz默认不会转译node_modules目录下的依赖，react-native-vector-icons源码中使用的classProperties语法未被转译直接抛出错误

解决步骤 #

• 第一步：调整全局Babel配置，把通用插件移到全局配置层级，避免环境差异导致插件未加载

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    'react-native-config-node/transform',
    ['@babel/plugin-proposal-class-properties', {"loose": true}]
  ],
  env: {
    test: {
      // 仅test环境需要的特殊配置保留在此即可
    },
    dev: {
      // 仅dev环境需要的特殊配置保留在此即可
    }
  },
};

• 第二步：修改docz配置文件（通常是项目根目录的doczrc.js），将react-native-vector-icons加入转译白名单

export default {
  // 原有docz配置无需改动，新增以下配置即可
  modifyBabelLoader: (options) => {
    options.exclude = /node_modules\/(?!(react-native-vector-icons)\/).*/
    return options
  }
}

• 第三步：清理缓存后重新执行构建

# 清理docz及Babel缓存
rm -rf node_modules/.cache
npx docz clean
# 重新启动docz/执行构建

如果调整后仍有报错，检查@babel/plugin-proposal-class-properties的大版本是否和项目中@babel/core的大版本匹配，保持两者均为7.x正式版即可。

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