reactjs - "การวิเคราะห์โมดูลล้มเหลว: ตัวอักษรที่ไม่คาดคิด '@'" เมื่อใช้คอมโพเนนต์ lit กับ NextJS

ฉันพยายามนำเข้าคอมโพเนนต์ lit ในโปรเจกต์ 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 จริงหรือ หรือฉันควรแก้ไข element ของฉันอย่างไร

คำตอบ #1

คุณต้องแน่ใจว่าคุณได้ตั้งค่าเบเบิลปลั๊กอินเหล่านี้แล้ว:

• @babel/plugin-proposal-decorators
• @babel/ปลั๊กอิน-ข้อเสนอ-คุณสมบัติของคลาส

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