Parcel: TypeScript - Failed to construct 'HTMLElement'

Created on 18 Feb 2019 · 1Comment · Source: parcel-bundler/parcel

index.html

<html>
<body>
    <app-root></app-root>
    <script src="/index.ts"></script>
</body>
</html>

class AppRoot extends HTMLElement {

}

customElements.define('app-root', AppRoot)

Running parcel index.html, the browser throws

Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
    at new AppRoot

Is error is due to parcel targeting es5. I have tried a few permutations of setting the tsconfig to target es6, a .babelrc targeting the last 2 versions of chrome, a .browserrc and setting the value in the package.json and just can not get it working.

When I rename my index.ts file to index.js. It works. So I assume the issue is in the TS -> JS compiling step.

Any ideas?

Source

alshdavid

👍1

Most helpful comment

I had to do this:

tsconfig.json

{
    "compilerOptions": {
        "target": "es6"
    }
}

package.json

"babel": {
    "presets": [
      [
        "@babel/preset-env",
        {
          "browserlist": [
            "last 2 chrome versions"
          ]
        }
      ]
    ]
  }

I also had to delete the .cache and dist folders

alshdavid on 18 Feb 2019

🎉3

>All comments

I had to do this:

tsconfig.json

{
    "compilerOptions": {
        "target": "es6"
    }
}

package.json

"babel": {
    "presets": [
      [
        "@babel/preset-env",
        {
          "browserlist": [
            "last 2 chrome versions"
          ]
        }
      ]
    ]
  }

I also had to delete the .cache and dist folders

alshdavid on 18 Feb 2019

🎉3

Was this page helpful?

0 / 5 - 0 ratings