Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Custom Elements hello world throws error

See original GitHub issue

Is this a bug report?

Yes

Can you also reproduce the problem with npm 4.x?

Yes

Which terms did you search for in User Guide?

Custom Elements, Web Components. No results.

Environment

node -v: v8.6.0
npm -v: 5.3.0
yarn --version (if you use Yarn): N/A
npm ls react-scripts (if you haven’t ejected): N/A

Then, specify:

Operating system: macOS 10.12.6
Browser and version (if relevant): Chrome Canary 63.0.3223.8 (also fails on Stable)

Steps to Reproduce

Create a file containing the following “hello world” Custom Element:

class HelloWorld extends HTMLElement {
  connectedCallback() {
    this.innerHTML = "Hello world";
  }
}

customElements.define('hello-world', HelloWorld)

import this file (e.g. import './hello-world.js) into any React component and use it: <hello-world />

Expected Behavior

Text “hello world” is rendered on screen.

This correct behavior is observed when using the custom element outside of React (included in repro repo), i.e.:

<!doctype>
<body>
<hello-world />
<script src='hello-world.js'></script>
</body>

Actual Behavior

Text isn’t rendered, console error is shown: Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

Reproducible Demo

Example minimal CRA project: https://github.com/owencm/custom-elements-issue

Running it demonstrates the issue.

Issue Analytics

State:
Created 6 years ago
Comments:7 (1 by maintainers)

Top GitHub Comments

5reactions

robdodsoncommented, Dec 12, 2017

Looping back around to this issue. If anyone runs across it, you can fix the error by including the custom-elements-es5-adapter.js detailed here: https://reactjs.org/docs/web-components.html#using-react-in-your-web-components

1reaction

owencmcommented, Oct 1, 2017

Looking into this, I think it’s because we’re transpiring ES6 classes by default, but customElements.define only works with ES6 classes.

Not sure of the solution though…

Top Results From Across the Web

html - Why is my custom element not showing up when using ...

It looks like you're using the pre 1.0 syntax but the 1.0+ version of Polymer. In Polymer 1.0+, you can create a module...

Unable to resolve c-hello-world from root/app while creating ...

When I name my lwc helloWorld (camel case) and reference it in the app html as kebab-case, I get an error in the...

How To Use Web Components in React

We successfully integrated a custom element into React. Still, there is an error in the editor: Property 'hello-world' does not exist on type...

Angular elements overview

Angular elements are Angular components packaged as custom elements (also called Web Components), a web standard for defining new HTML elements in a ......

5 Common Errors in Lightning Web Component

Access Elements the Custom Owns. Lightning Web Component gives you the ability to query the elements it owns. Let's take a situation where...