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.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.
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.0npm -v: 5.3.0yarn --version(if you use Yarn): N/Anpm ls react-scripts(if you haven’t ejected): N/AThen, specify:
Steps to Reproduce
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.:
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.