Custom Elements hello world throws error
See original GitHub issueIs 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.0npm -v
: 5.3.0yarn --version
(if you use Yarn): N/Anpm 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 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...
Read more >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...
Read more >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...
Read more >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 ......
Read more >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...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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
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…