web-dev-qa-db-ja.com

HTMLElementの拡張：webpackを使用するとコンストラクターが失敗する

次のTypeScriptプログラムをES5に変換しました。

ファイル1：

class BaseElement extends HTMLElement {
    constructor() {
        super();
    }
}

ファイル2：

import {BaseElement} from './BaseElement';

class MyElement extends BaseElement {
    constructor() {
        super();
    }
}

var el = new MyElement();

ファイル内にすべてを手動で配置すると、コードは正常に機能し、ブラウザーで実行され、HTMLElementは問題なく構築されます。ただし、webpackでパックするとすぐに、次のエラーメッセージが表示されます。

Uncaught TypeError: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

Webpackを使用しない場合、次のJSコードが作成されます。

var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var BaseElement = (function (_super) {
    __extends(BaseElement, _super);
    function BaseElement() {
        _super.call(this);
    }
    return BaseElement;
}(HTMLElement));
var MyElement = (function (_super) {
    __extends(MyElement, _super);
    function MyElement() {
        _super.call(this);
    }
    MyElement.prototype.createdCallback = function () {
        this.innerHTML = "lol";
    };
    return MyElement;
}(BaseElement));
var el = new MyElement();

Webpackを使用して、次のコードが作成されます。

var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};

/******/    // The require function
/******/    function __webpack_require__(moduleId) {

/******/        // Check if module is in cache
/******/        if(installedModules[moduleId])
/******/            return installedModules[moduleId].exports;

/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            exports: {},
/******/            id: moduleId,
/******/            loaded: false
/******/        };

/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/        // Flag the module as loaded
/******/        module.loaded = true;

/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }


/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;

/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;

/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";

/******/    // Load entry module and return exports
/******/    return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {

    __webpack_require__(1);
    __webpack_require__(2);

/***/ },
/* 1 */
/***/ function(module, exports) {

    "use strict";
    var BaseElement = (function (_super) {
        __extends(BaseElement, _super);
        function BaseElement() {
            _super.call(this);
        }
        return BaseElement;
    }(HTMLElement));
    exports.BaseElement = BaseElement;


/***/ },
/* 2 */
/***/ function(module, exports, __webpack_require__) {

    "use strict";
    var BaseElement_1 = __webpack_require__(1);
    var MyElement = (function (_super) {
        __extends(MyElement, _super);
        function MyElement() {
            _super.call(this);
        }
        MyElement.prototype.createdCallback = function () {
            this.innerHTML = "lol";
        };
        return MyElement;
    }(BaseElement_1.BaseElement));
    exports.MyElement = MyElement;
    // TODO: inject
    var p = new MyElement();
/***/ }
/******/ ]);

基本的に、webpackはモジュールを関数に入れ、それらの間でエクスポート変数を維持しますが、HTMLElementの構築は失敗します。 webpack（上記のコード）がなければ、正常に動作します。

何か案は？

javascripttypescriptwebpackweb-component
22
mbue

蒸散問題です。 ES5をトランスパイルまたは使用している場合は、ネイティブWebコンポーネントをサポートするブラウザー用のネイティブシムをバンドルする必要があります（ https://github.com/webcomponents/custom-elements/blob/master/src/native- shim.js ）

HTMLElementコンストラクターは_new.target_の値を使用して現在呼び出されているコンストラクターのカスタム要素定義を検索するため、ES5スタイルのクラスはネイティブカスタム要素では機能しません。 _new.target_は、newが呼び出されたときにのみ設定され、super（）呼び出しによってのみ伝達されます。 super（）はES5ではエミュレートできません。 SuperClass.call(this)`` only works when extending other ES5-style classes, and does not propagate new.target`のパターン。

問題のディスカッションを確認してください https://github.com/webcomponents/custom-elements/issues/29

16
Amit

ES5スタイルのクラスは、ネイティブカスタム要素では機能しません

回避策を実行するには、tsconfig.jsonファイルのターゲットをes6に変更するだけです。

8
Darsan S Kumar

この問題を解決してこの問題を修正しました- https://github.com/facebook/create-react-app/issues/3225

基本的に私はnpmを介してこれら2つのプラグインをインストールし、私のWebPack構成にそれらの2つのプラグインをBabelに追加しました：

use: [
    {
        loader: 'babel-loader',
            options: {
                presets: ['es2015'],
                // https://github.com/facebook/create-react-app/issues/3225
                plugins: ['transform-custom-element-classes', 'transform-es2015-classes']
            },
        }
    ],
1
Dzintars

1）Babel 7.6.0

個人的には、エラーはこれらの特定のdevDependenciesでなくなっているようです：

"devDependencies": {
    "@babel/core": "^7.6.0",
    "@babel/preset-env": "^7.6.0",
    "babel-loader": "^8.0.6",
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.8"
}

そして、このwebpack.config.js：

var glob = require('glob');
var path = require('path');

module.exports = {
    entry: glob.sync('./app/scripts/**.js').reduce(function(obj, el){
        obj[path.parse(el).name] = el;
        return obj
    },{}),
    output: {
        path: path.resolve(__dirname, './dist/scripts'),
        filename: "[name].js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: [
                    path.resolve(__dirname, 'app/scripts')
                ],
                options: {
                    presets: ['@babel/env']
                }
            }
        ]
    }
};

つまり、基本的には/ app/scriptsフォルダー内の.jsファイルをトランスパイルし、@babel/preset-envパッケージを使用してbabel-loaderを使用して/ dist/scriptsに保存するようにwebpackに指示しています。

2）バベル6。*。0

ただし、@babel/core6.*.*を使用している場合は、これを確認することをお勧めします https://medium.com/@allenhwkim/chrome-browser-custom-element-error-e86db5ae3b8c 。それは非常に単純で、すべてのbabelパッケージを更新しようとする前に、私はすでにそれをうまく使用していました。

あなたがする必要がある「すべて」はnpm install babel-plugin-transform-es2015-classes babel-plugin-transform-custom-element-classes --save-devであり、それらをwebpack.config.jsに追加します（npm install --save-dev babel-preset-es2015も忘れないでください）：

module: {
    rules: [
        {
            test: /\.js$/,
            loader: 'babel-loader',
            include: [
                path.resolve(__dirname, 'app/scripts')
            ],
            options: {
                presets: ['es2015'],
                plubins: ["transform-custom-element-classes", "transform-es2015-classes"]
            }
        }
    ]
}
0
ZyDucksLover

Webpackがなくても動作しますか？ playground を介して実行すると、（実行時に）説明したのと同じエラーが発生します。

とにかく、HTMLElementを拡張するべきではありません。
HTMLElementは、実際にはTypeScriptのインターフェイスであるため、何らかの形で実装する必要があります。
ブラウザではオブジェクトタイプとして存在しますが、TypeScriptクラスとして宣言されていないため、TypeScriptはそれを適切に拡張できません。

この問題を回避する方法については、この answer を参照してください。

0
Jeppe Stougaard

Webコンポーネント用のBabel 7 + Webpack 4構成：

package.json：

"devDependencies": {
    "@babel/core": "^7.3.4",
    "@babel/plugin-proposal-class-properties": "^7.3.4",
    "@babel/preset-env": "^7.3.4",
    "babel-loader": "^8.0.5",
    "babel-plugin-transform-custom-element-classes": "^0.1.0",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.2.1"
}

webpack.config.js：

module: {
  rules: [
    {
      test: /\.js$/,
      use:{
          loader: 'babel-loader',
              options: {
                  presets: ['@babel/preset-env'],
                  plugins: [
                    "transform-custom-element-classes",
                    "@babel/plugin-proposal-class-properties",
                  ]
              },
          },
      exclude: /node_modules/
    }
  ]
}

transform-es2015-classesプラグインを使用すると、Babel 7を使用するときにbabel-preset-envにすでに含まれているため、ビルドプロセスが中断されます。 @babel/plugin-proposal-class-propertiesは、ライフサイクルコールバックに必要です。 es2015などの毎年のプリセットの使用はBabel 7で廃止されました。代わりに@babel/preset-envを使用してください。

0
webpreneur