«Ошибка синтаксического анализа модуля: неожиданный символ '@'» при использовании светящегося компонента с 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 / плагин-предложение-декораторы.
• @ babel / плагин-предложение-свойства-класса

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