"Module parse failed: Unexpected character '@'" 将 lit 组件与 NextJS 一起使用时

Question

我试图在NextJS项目中导入一个照明组件。

这是我的组件：

import {html, css, LitElement} from 'lit';
import {customElement} from 'lit/decorators.js';
@customElement('my-element')
export class MyElement extends LitElement {
static get styles() {
...
}
render () {
return html`
<div>Hello World !</div>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
'my-element': MyElement;
}
}

这是我的NextJS元素：

import '.../my-element';
function HomePage() {
return (
<div>
<my-element label="coucou"/>
<div>coucou</div>
</div>
);
}
export default HomePage

这是输出：

.../my-element.ts
Module parse failed: Unexpected character '@' (20:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|  */
| 
> @customElement('my-element')
| export class MyElement extends LitElement {
|     static get styles() {

我是NextJS和React的新手。这真的是Webpack问题吗？还是我应该以某种方式修复我的元素？

Answer 1

你需要确保你有这些babel插件设置：

• @babel/plugin提案装饰器
• @babel/plugin建议类属性

plugins = [
'@babel/plugin-proposal-class-properties',
['@babel/plugin-proposal-decorators', {decoratorsBeforeExport: true}],
];