Zenn
Open8

【WIP】Optional Chainingが原因でbuildできない件を解決したい

webpack
JavaScript
kagunyankagunyan

jsコード内でoptional chainingを追加して、
npm run buildすると以下のエラーが出る。

ERROR in hoge.xxx.js from Terser
Unexpected token: punc (.) [webpack://./javascripts/hoge.js:67,22][hoge.xxx.js:13739,23]
kagunyankagunyan

TRY①　webpackのtargetにes11を追加してみる
optional chainingはES11で追加された機能なので、webpackのtargetにes11を追加してみた。
→何も変化なかったので元に戻した。

const config = {
  mode: NODE_ENV,
  entry: entrypoints,
  target: ['web', 'es11'],
kagunyankagunyan

TRY②　terserを5.2.0にバージョンアップしてみる
エラーが出た時にfrom Terserと出ているので、terserとterser-webpack-pluginのバージョンを見てみる。

hoge.xxx.js from Terser

npm ls terserで、自分のプロジェクトのterserのバージョンを確認。

├─┬ terser-webpack-plugin@2.3.8
│ └── terser@4.8.1
└─┬ webpack@5.76.0
  └─┬ terser-webpack-plugin@5.3.6
    └── terser@5.16.1
kagunyankagunyan

試しにterserを5.2.0にバージョンアップしてみる。

npm install terser-webpack-plugin@5.3.6

↓

└─┬ terser-webpack-plugin@5.3.6
  └── terser@5.30.2

メジャーバージョンを3段階上げたので流石に怒られた。先に解消必須。
→一旦元に戻した。

kagunyankagunyan

TRY③　babel-loaderにプラグインを追加してみる
そもそもdevelopment環境で使っているwebpackではterserを使っていなさそう。

module: {
    rules: [
     // ~~~
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          { loader: 'thread-loader' },
          {
            loader: 'babel-loader',
            options: { cacheDirectory: true },
          },
        ],
      },

jsファイルに対してはbabel-loaderが最初に作用していそう。

kagunyankagunyan

以下の記事を参考に、@babel/plugin-proposal-optional-chainingを追加する。
https://qiita.com/wwalpha/items/a2c7fd5470506a2d9e86

npm install @babel/plugin-proposal-optional-chaining --save-dev

optionsにpluginsを追加。

{
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          { loader: 'thread-loader' },
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              plugins: ['@babel/plugin-proposal-optional-chaining'],
            },
          },
        ],
      },

→結果何も変わらなかったので元に戻した。