Babel 7: Function.prototype.toString: 'this' is not a Function object

Question

I'd like to create web components that should work on ie11. I'm compiling js with gulp (and gulp-babel, that includes babel 7).

By now, when I compile with Babel, it works in Chrome, but sends an error in ie11: Function.prototype.toString: 'this' is not a Function object.

In gulpfile.js I have this:

.pipe(babel({
    "presets": [
        ["@babel/preset-env", {
            "targets": {
                "browsers": [
                    "Chrome >= 52",
                    "FireFox >= 44",
                    "Safari >= 7",
                    "Explorer 11",
                    "last 4 Edge versions"
                ]
            }
        }]
    ]
}))

In js I have something like this (sample code I found on the web for testing):

class MyCustomTag extends HTMLElement {
    connectedCallback() {
        this.innerHTML = '<h2>My custom element</h2><button>click me</button>';
        this.style.backgroundColor = 'blue';
        this.style.padding = '20 px';
        this.style.display = 'inline-block';
        this.style.color = 'white';
    }
}

try {
    customElements.define('my-custom-tag', MyCustomTag)
} catch (err) {
    const h3 = document.createElement('h3')
    h3.innerHTML = "This site uses webcomponents which don't work in all browsers! Try this site in a browser that supports them!"
    document.body.appendChild(h3)
}

Of course I added <my-custom-tag></my-custom-tag> in HTML.

The error is thrown on something generated by Babel when "extends HTMLElement" is in the code (Babel generates something like "_.isNative" that uses Function.prototype.Tostring, if I remember well - sorry I'm currently on another computer) I'm sure I'm missing something stupid, but I can't find any answer on this error. I tried adding @babel/plugin-transform-classes, babel-plugin-transform-builtin-classes, but nothing works and it drives me crazy.

Any idea?

score 15 · Answer 1 · answered Oct 24 '18 at 14:16

15

I just wasted hours on the exact same issue! I first suspected Webpack of doing something strange, then I thought it was an issue with Babel, etc., etc.

Finally I figured out, that you need to load the webcomponents.js polyfill to fix this for IE11! Here is how:

npm install @webcomponents/webcomponentsjs

Then load the polyfill in the head of your HTML file:

<!-- load webcomponents bundle, which includes all the necessary polyfills -->
<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>

Now even IE should play nice with your web components.

answered Oct 24 '18 at 14:16

Mario Fink

674
4
10

1

@Kateriine Sorry to be curious, but did that work for you? – Mario Fink Nov 09 '18 at 13:35
1

Thanks! Helped a lot! Instead of loading via script, I just added `import '@webcomponents/webcomponentsjs';` to webpack entry file. – Rozkalns Feb 19 '20 at 08:58
1

I'm also getting same error in IE. Installed webcomponentsjs package. Cloud you please mention where to add import '@webcomponents/webcomponentsjs'; – Senthil Raja Ramasamy Mar 14 '21 at 08:29

Andres Kiik · Answer 2 · 2021-01-06T15:55:56.610

Angular 10 with webcomponents on IE11.

For me it was the order of polyfill imports. After changing the order so that webcomponts polyfills were before core-js/es/array import the problem was gone.

The final version of polyfills.ts file:


/***************************************************************************************************
 * BROWSER POLYFILLS
 */

// if you are compiling to ES5 (check tsconfig.json) then you need this
import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';
// for browser not supporting custom elements
import '@webcomponents/custom-elements/custom-elements.min.js';


/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js';  // Run `npm install --save classlist.js`.

/** For IE 11 */
import 'core-js/es/promise';
import 'core-js/es/string';
import 'core-js/es/map';
import 'core-js/es/set';
import 'core-js/es/array';


/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.

Versions:

"@angular/core": "~10.2.4",
"@angular/elements": "^10.2.4",
"@webcomponents/custom-elements": "^1.4.3",
"@webcomponents/webcomponentsjs": "^2.5.0",

Babel 7: Function.prototype.toString: 'this' is not a Function object

2 Answers2