“模块解析失败：使用带有 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

这是 output：

.../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-proposal-decorators。
• @babel/plugin-proposal-class-properties

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