"Module parse failed: Unexpected character '@'" when using lit component with NextJS

Question

I try to import a lit component in my NextJS project.

Here is my component:

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;
    }
}

Here is my NextJS element:

import '.../my-element';

function HomePage() {
    return (
        <div>
            <my-element label="coucou"/>
            <div>coucou</div>
        </div>
    );
}

export default HomePage

Here is the 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() {

I am new to NextJS and React. Is it really a Webpack issue or should I fix somehow my element?

Answer 1

you need to make sure you have these babel plugins setup:

• @babel/plugin-proposal-decorators.
• @babel/plugin-proposal-class-properties

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