How to fix `Class constructor LitElement cannot be invoked without 'new'`?

user_9722433 0
Viewed 4769

I am setting up a new project using lit-element from polymer and the build setup includes the use of parcel. I am also using typescript to write my code.

I started by initializing npm and added all the necessary dependencies:

"dependencies": {
  "@polymer/lit-element": "^0.6.5",
  "@webcomponents/webcomponentsjs": "^2.2.1"
},
"devDependencies": {
  "parcel-bundler": "^1.11.0",
  "tslib": "^1.9.3",
  "typescript": "^3.2.2"
}

Now when I run the parcel to start with index.html which includes:

@webcomponents/webcomponentsjs/webcomponents-bundle.js

I get an error saying:

Class constructor LitElement cannot be invoked without 'new'

Based on others suggestion I have tried setting tsconfig target to "es2016" but this does not solve the error.

my-element.ts

import { 
  LitElement,
  html,
  customElement,
  property 
} from '@polymer/lit-element'

@customElement('ui-text')
export class UiText extends LitElement {
  render() {
    return html`<p>Hi</p>`
  }
}
parcel polymer lit-element web-component typescript
4 Answers

After struggling with it for a while, it seems parcel (as of v1.12.3) has an issue where it doesn't consider the browserslist unless index.html is in the same folder as packages.json,package-lock.json, and node_modules. After I reorganized my source files and added "browserslist": ["Chrome > 46"] it started working fine.

user_76540300

Create file .browserslistrc with:

last 1 chrome versions

And make sure that parcel cache is clear. I recommend you run parcel with a flag:

parcel entryPoint --no-cache

More info.

user_1754040

At the moment, proposed custom-elements-es5-adapter.js does not really "adapt" whatever is produced by parceljs (for Chrome). There's much more on this subject in this issue: https://github.com/Polymer/lit-element/issues/54. Explicitly stating targeted browsers in package.json will help a lot, here's an example:

"browserslist": [
  ">2%",
  "Edge > 14",
  "Firefox > 63",
  "Chrome > 67"
]

Afterwards, you can check actually targeted browsers with this statement by running npx browserslist - see the syntax and more in https://github.com/browserslist/browserslist

The project structure is not an issue and parceljs will detect browserslist regardless of index.html and other source files location.

Unfortunately, in my case, IE11 usage is around horrifying 10%, but I'm planning to drop its support regardless with a friendly fall back message.

user_13625350
user_46170360
Related