Бабель 7: Function.prototype.toString: 'this' не является объектом Function

Question

Я хотел бы создать веб-компоненты, которые должны работать на ie11. Я собираю js с gulp (и gulp-babel, который включает в себя babel 7).

К настоящему времени, когда я компилирую с Babel, он работает в Chrome, но отправляет ошибку в ie11: Function.prototype.toString: 'this' is not a Function object,

В gulpfile.js у меня есть это:

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

В JS у меня есть что-то вроде этого (пример кода, который я нашел в Интернете для тестирования):

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)
}

Конечно я добавил <my-custom-tag></my-custom-tag> в HTML.

Ошибка генерируется чем-то, сгенерированным Babel, когда в коде присутствует "extends HTMLElement" (Babel генерирует что-то вроде "_.isNative", которое использует Function.prototype.Tostring, если я хорошо помню - извините, я сейчас на другом компьютере) Я уверен, что упускаю что-то глупое, но я не могу найти ответ на эту ошибку. Я пытался добавить @babel/plugin-transform-classes, babel-plugin-transform-builtin-classes, но ничего не работает, и это сводит меня с ума.

Любая идея?

Answer 1

Я просто потратил впустую часы на ту же самую проблему! Сначала я подозревал, что Webpack делает что-то странное, потом подумал, что это проблема с Бабелем и т. Д. И т. Д.

Наконец, я понял, что вам нужно загрузить полифилл webcomponents.js, чтобы исправить это для IE11! Вот как:

npm install @webcomponents/webcomponentsjs

Затем загрузите полифил в заголовок вашего HTML-файла:

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

Теперь даже IE должен хорошо играть с вашими веб-компонентами.

Answer 2

Angular 10 с веб-компонентами в IE11.

Для меня это был порядок импорта полифилла. После изменения порядка, чтобы полифиллы веб-компонентов были до импорта core-js/es/array , проблема исчезла.

Окончательная версия файла polyfills.ts:

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

Версии:

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