やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

📌 ？
トップ > webpack > webpack5でprivateキーワード#がエラーになった

webpack5でprivateキーワード#がエラーになった

webpack JavaScript

　なんでや。ブラウザでなら普通に実行できたのに。

前提

　JSはclassのメンバをprivateにするとき#キーワードを使う。

エラー

　webpackで#を使ったコードをビルドするとエラーが出た。

ERROR in ./src/parser/id/Unique.js 3:22
Module parse failed: Unexpected character '#' (3:22)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| export default class Unique {
|     static getInputName(radio) {
>         return Unique.#generateGroupId(radio);
|     }
|     static getInputId(group_id, option) {
 @ ./src/parser/bare.js 1:0-36 7:27-46 9:29-46
 @ ./src/parser/ParserFactory.js 1:0-34 3:0-32 7:56-63 8:22-31
 @ ./src/index.js 1:0-54 8:12-32
モジュール解析に失敗しました：予期しない文字 '＃'（3:22）
このファイルタイプを処理するには、適切なローダーが必要になる場合があります。現在、このファイルを処理するように構成されているローダーはありません。 https://webpack.js.org/concepts#loadersを参照してください

　ちなみにコードは以下のような感じ。privateメソッド#generateGroupIdを呼び出したかった。

export default class Unique {
    static getInputName(radio) {
        return Unique.#generateGroupId(radio);
    }
    static #generateGroupId(radio) {
        const id = radio.getAttribute('id');
        if (id) { return id; }
        else { return Unique.#generate(); }
    }
    ...
}

　ぐぐってみた

私はこの問題を次のようなbabelプラグインで解決しました：

@ babel / plugin-proposal-private-methods

　で、出たーバベル。やっぱ使わなきゃいけないの？　面倒くさい。

　バベルをloaderとしてセットせにゃならんらしい。なんだよローダーって。読んでもわかんねーよ。ビルドしろよ。こっちがビルドを組み立てなきゃいけないってどういうことだよ。お前のほうでよろしくやれや。

Babel

対象環境

$ uname -a
Linux raspberrypi 5.4.83-v7l+ #1379 SMP Mon Dec 14 13:11:54 GMT 2020 armv7l GNU/Linux