Getting error while using Decorators in js

Question

I'm trying to write a simple web component using LitElement. When I try to use:

 - @customElement('my-element')
 - @property()

I'm getting error.

Support for the experimental syntax 'decorators-legacy' isn't currently enabled.

Is this something related to babel?

import { LitElement, html } from 'lit-element';

@customElement('my-element')
class MyElement extends LitElement {
  render(){    
    return html`
      <!-- template content -->
      <p>A paragraph</p>
    `;
  }
}

score 1 · Answer 1 · answered Apr 12 '20 at 13:05

JS decorators are still a proposal but they can be enabled in Babel by using @babel/plugin-proposal-decorators. Class fields also have to be enabled in order to use the @property decorator.

Install the plugins:

$ npm i -d @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties

and add them to your .babelrc:

{
  "plugins": [
    ["@babel/plugin-proposal-decorators", {
      "legacy": true
    }],
    "@babel/plugin-proposal-class-properties"
  ]
}

score 0 · Answer 2 · answered May 04 '21 at 17:39

Decorators are a proposal for JS but are supported in Babel (as already covered by Umbo's answer, which you should accept) and natively supported by TypeScript (which Lit targets).

To use these in TS you have to add a setting to tsconfig.json:

{
  "compilerOptions": {
    "experimentalDecorators": true

And then import the decorators:

import {html, css, LitElement} from 'lit';
import {customElement, property} from 'lit/decorators.js';

@customElement('my-element')
class MyElement 
    extends LitElement {
    render(){    
        return html`<p>A paragraph</p>`;
    }
}

You should accept the Babel answer to this question, but it should be clear that this works in Typescript too.

Getting error while using Decorators in js

2 Answers2