2

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 ?

Neilujd
  • 61
  • 1
  • 9
  • decorators like @customElement usually needs you to update the build config. Do you have a babel plugin for this maybe ? – Apolo Jun 03 '21 at 14:48
  • check the "Enabling decorators" section here: https://lit-element.polymer-project.org/guide/decorators – Apolo Jun 03 '21 at 14:49
  • I've added the babel config but there is still the error. – Neilujd Jun 03 '21 at 15:44

1 Answers1

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}],
];
Apolo
  • 3,844
  • 1
  • 21
  • 51
  • I did what you've said but the result is the same: I've created a `.babelrc` file which contains: ```json { "presets": ["next/babel"], "plugins": [ "@babel/plugin-proposal-class-properties", ["@babel/plugin-proposal-decorators", {"decoratorsBeforeExport": true}] ] } ``` I also added `"experimentalDecorators": true,` to my `tsconfig.json` file. – Neilujd Jun 03 '21 at 15:22
  • have you restarted your build script after updating the config ? – Apolo Jun 03 '21 at 15:53
  • Maybe it because my component is actually in a npm packages that I have installed. Should I change something so the babel config is applied for my package ? – Neilujd Jun 03 '21 at 16:32
  • I don't think so. What's the extension of your file ? try to change it to '.ts' or '.tsx' and see if that work maybe – Apolo Jun 04 '21 at 08:28
  • 1
    I'm running into the same problem, were you able to find a solution to this? – user3183717 Apr 08 '22 at 21:16