基础Babel转换报错并抛出堆栈追踪，请求排查原因

问题重现 #

你的Babel配置如下：

module.exports = {
  plugins: [
    ['@babel/proposal-decorators', { legacy: true }],
    ['@babel/proposal-class-properties', { loose: true }],
  ],
};

待构建代码：

class Foo { @Decorator #bar = ''; }

执行构建时抛出错误：

TypeError: Property value expected type of string but got null
at Object.validate (./node_modules/@babel/types/lib/definitions/utils.js:161:13)
at validate (./node_modules/@babel/types/lib/validators/validate.js:17:9)
at builder (./node_modules/@babel/types/lib/builders/builder.js:46:27)
at Object.StringLiteral (./node_modules/@babel/types/lib/builders/generated/index.js:335:31)
at ./node_modules/@babel/plugin-proposal-decorators/lib/transformer-legacy.js:93:83
at Array.reduce (<anonymous>)
at applyTargetDecorators (./node_modules/@babel/plugin-proposal-decorators/lib/transformer-legacy.js:84:32)
at applyMethodDecorators (./node_modules/@babel/plugin-proposal-decorators/lib/transformer-legacy.js:70:10)
at PluginPass.ClassExpression (./node_modules/@babel/plugin-proposal-decorators/lib/transformer-legacy.js:156:94)
at newFn (./node_modules/@babel/traverse/lib/visitors.js:193:21)

环境依赖版本：@babel/cli@^7.4.4、@babel/core@^7.4.5、@babel/plugin-proposal-decorators@^7.4.4、@babel/plugin-proposal-class-properties@^7.4.4

问题原因分析 #

你遇到的问题核心在于：在Babel 7.4.x版本中，@babel/plugin-proposal-decorators的legacy模式完全不支持装饰私有类成员。

旧的legacy装饰器提案制定时，私有类成员还没有进入ECMAScript标准，所以Babel的legacy装饰器实现根本没考虑这种语法组合。当你尝试装饰私有成员时，插件内部处理逻辑会因为无法识别私有成员的结构而抛出底层的类型错误，而不是友好的语法不支持提示。

另外，你提到换成语法插件后报错“装饰器未启用”，是因为语法插件仅负责让Babel解析装饰器语法，但如果没有配套的转换逻辑（或者没有在解析器配置中显式启用装饰器支持），Babel会认为装饰器语法未被正确启用；而且旧版本的语法插件同样对私有成员+装饰器的组合支持不完善。

解决方案 #

这里提供几个可行的解决途径：

1. 升级Babel版本（推荐） #

后续的Babel版本（从7.10.x开始）针对legacy装饰器与私有类成员的兼容性做了修复，同时优化了错误提示。执行以下命令升级依赖：

npm update @babel/cli @babel/core @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties

升级后保持原配置不变，即可正常处理带装饰器的私有类成员代码。

2. 调整插件加载顺序（临时规避，仅适用于无法升级的场景） #

如果你暂时无法升级版本，可以尝试调换两个插件的顺序——把类属性插件放在装饰器插件之前：

module.exports = {
  plugins: [
    ['@babel/plugin-proposal-class-properties', { loose: true }],
    ['@babel/plugin-proposal-decorators', { legacy: true }]
  ]
};

这个方法在部分旧版本中可以临时规避类型错误，但不能保证所有场景都有效。

3. 跳过Babel的装饰器转换（适配你的实际需求） #

既然你提到装饰器的转换由其他插件处理，可以尝试仅启用装饰器语法支持，不使用Babel的转换插件：

module.exports = {
  parserOpts: {
    plugins: ['decorators-legacy', 'classProperties']
  },
  plugins: [
    ['@babel/plugin-proposal-class-properties', { loose: true }]
  ]
};

这样配置后，Babel会正确解析装饰器和私有成员语法，同时把装饰器的转换工作留给你指定的其他插件处理。

关于是否是Babel的bug #

没错，这确实是Babel旧版本的一个bug。对于不支持的语法组合，Babel没有给出清晰的错误提示，而是抛出了底层的类型错误。这个问题在后续版本中已经被修复，不仅解决了兼容性问题，还添加了明确的语法不支持提示信息。

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