Custom Elements hello world throws error #3225

owencm · 2017-10-01T02:38:15Z

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.

The text was updated successfully, but these errors were encountered:

owencm · 2017-10-01T08:18:52Z

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...

owencm · 2017-10-01T20:15:53Z

Rob Dodson talks about this issue in the context of Angular here: https://youtu.be/Ucq9F-7Xp8I?t=7m57s

Sounds like the solution is to use Webpack to bundle in https://github.com/webcomponents/webcomponentsjs/blob/master/custom-elements-es5-adapter.js without transpiling.

gaearon · 2017-11-03T17:42:03Z

Yep, this isn't expected to work with Babel.
You will probably get a better answer from the community who use custom elements.

robdodson · 2017-11-24T15:15:37Z

FWIW, using this babel plugin https://github.com/github/babel-plugin-transform-custom-element-classes seems to fix the issue. The problem is Babel can't properly extend built-ins like HTMLElement, Array, etc.

robdodson · 2017-12-12T21:09:35Z

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

dzole0311 · 2018-09-21T12:09:20Z

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

This solved my issue with Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function. In my case I was accidentally transpiling 'custom-elements-es5-adapter.js' with gulp.

oswee · 2018-12-05T22:56:31Z

Using Webpack there. Tnx to @robdodson avice added those 2 plugins:

        rules: [
            {
                test: /\.js$/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['es2015'],
                            plugins: ['transform-custom-element-classes', 'transform-es2015-classes']
                        },
                    }
                ],
            },
            {
                test: /\.scss$/,
                use: extractPlugin.extract({
                    use: ['css-loader', 'sass-loader']
                }),
            },
        ]
    },

to my webpack.config.js. Works like a charm.

gaearon closed this as completed Nov 3, 2017

owencm mentioned this issue Nov 3, 2017

Add this behavior to Babel github/babel-plugin-transform-custom-element-classes#11

Open

mhoyer mentioned this issue Mar 23, 2018

Bundling or using WebComponents in my project parcel-bundler/parcel#1049

Closed

morewry mentioned this issue Apr 28, 2018

Uncaught TypeError: Illegal constructor in Chrome when a custom element is bundled twice WebReflection/document-register-element#142

Closed

lock bot locked and limited conversation to collaborators Jan 9, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Custom Elements hello world throws error #3225

Custom Elements hello world throws error #3225

owencm commented Oct 1, 2017

owencm commented Oct 1, 2017

owencm commented Oct 1, 2017

gaearon commented Nov 3, 2017

robdodson commented Nov 24, 2017

robdodson commented Dec 12, 2017

dzole0311 commented Sep 21, 2018

oswee commented Dec 5, 2018 •

edited

Loading

Custom Elements hello world throws error #3225

Custom Elements hello world throws error #3225

Comments

owencm commented Oct 1, 2017

Is this a bug report?

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

Which terms did you search for in User Guide?

Environment

Steps to Reproduce

Expected Behavior

Actual Behavior

Reproducible Demo

owencm commented Oct 1, 2017

owencm commented Oct 1, 2017

gaearon commented Nov 3, 2017

robdodson commented Nov 24, 2017

robdodson commented Dec 12, 2017

dzole0311 commented Sep 21, 2018

oswee commented Dec 5, 2018 • edited Loading

oswee commented Dec 5, 2018 •

edited

Loading