I'm trying to define a trivial custom element using HyperHTMLElement, however I can't seem to extend HyperHTMLElement without getting complaints from Chrome (as well as Safari).
src/index.js
import 'document-register-element'
import HyperHTMLElement from 'hyperhtml-element/esm'
const { bind } = HyperHTMLElement
class Hello extends HyperHTMLElement {
created() { this.textContent = 'hello' }
}
Hello.define('hello-element')
bind(document.body)`<hello-element />`
rollup.config.js
import nodeResolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import babel from 'rollup-plugin-babel'
export default {
input: 'src/index.js',
output: [{ file: 'bundle.js', sourcemap: 'inline', format: 'iife', name: 'oye' }],
plugins: [
babel({
exclude: 'node_modules/**',
presets: [ ["env", { "modules": false }] ],
plugins: [ "external-helpers" ]
}),
nodeResolve({ module: true, jsnext: true, main: true, browser: true }),
commonjs(),
]
}
index.html:
<!DOCTYPE html>
<html>
<head></head>
<body>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
Rollup bundles everything without errors:
However, Chrome reports this:
I've also tried switching to Webpack+Babel, to no avail — the same stack trace is still reported (with Webpack specific minor differences).
Looks like babel needs to be told no to exclude
node_modules/hyperhtml-element/**:However, I'm not entirely sure this is the right solution.