Lit 3字段用标准装饰器报错求助：Unsupported decorator location: field

这个报错的核心原因是Babel对标准装饰器的配置不符合Lit 3的要求，尤其是装饰器插件的顺序、配套插件的缺失，以及类字段语法的转换逻辑。以下是具体的解决步骤：

1. 调整Babel插件顺序与配套插件 #

Lit 3的@query属于类字段装饰器，在Babel启用2023-05标准装饰器模式时，必须满足两个关键配置：

• @babel/plugin-proposal-decorators必须放在所有类相关插件（如@babel/plugin-proposal-class-properties、@babel/plugin-proposal-auto-accessors）之前
• 如果代码中使用了accessor关键字，必须添加@babel/plugin-proposal-auto-accessors插件（这是ES自动访问器提案的支持插件）

修改后的Babel配置示例：

module.exports = {
  presets: [
    ['@babel/preset-env', {
      targets: { esmodules: true }, // 保留现代语法，避免过度转换类字段
      useBuiltIns: 'usage',
      corejs: 3
    }]
  ],
  plugins: [
    ['@babel/plugin-proposal-decorators', { version: '2023-05' }],
    '@babel/plugin-proposal-auto-accessors', // 支持accessor关键字
    '@babel/plugin-proposal-class-properties'
  ]
};

2. 代码适配（可选） #

如果不需要使用accessor，可以直接移除关键字，简化代码：

import { query } from 'lit/decorators.js';
import { html, LitElement } from 'lit';

class MyElement extends LitElement {
  @query('iframe,video') player;
}

注意：即使移除accessor，仍需保证Babel配置正确处理类字段装饰器。

3. 排查Rollup构建干扰 #

如果使用Rollup，需确保@rollup/plugin-babel正确加载了你的Babel配置，且没有其他插件（如旧版的类字段转换插件）提前修改了类语法。可以在Rollup配置中明确指定Babel配置路径：

import babel from '@rollup/plugin-babel';

export default {
  plugins: [
    babel({
      babelHelpers: 'bundled',
      configFile: './babel.config.js' // 明确指向你的Babel配置文件
    })
  ]
};

4. 确认Lit版本 #

确保项目安装的是Lit 3.x版本，执行以下命令检查：

npm list lit

如果版本低于3.x，升级到最新稳定版：

npm install lit@latest

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