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

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

0 голосов
/ 13 сентября 2018

Я хотел бы создать веб-компоненты, которые должны работать на 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, но ничего не работает, и это сводит меня с ума.

Есть идеи?

1 Ответ

0 голосов
/ 24 октября 2018

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

Наконец-то я понял, что вам нужно загрузить webcomponents.js polyfill, чтобы исправить это для 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 должен хорошо играть с вашими веб-компонентами.

...