Webpackビルド時のエラー対応まとめ

5591 ワード
JavaScript ビルド Build error webpack JavaScript テキストリンク

Webpackビルド時のエラー対応まとめ

経緯
色々とモジュールを追加していたら、ビルドできなくなったのでエラー対応を行った。

エラー内容

user@DESKTOP  ~/Documents/Dev/project/webpack (master)
$ npx webpack --mode=development
C:\Users\user\Documents\Dev\project\webpack\node_modules\html-webpack-plugin\index.js:59
        compilation.hooks.htmlWebpackPluginAlterChunks = new SyncWaterfallHook(['chunks', 'objectWithPluginRef']);
                                                       ^

TypeError: Cannot add property htmlWebpackPluginAlterChunks, object is not extensible
    at C:\Users\user\Documents\Dev\project\webpack\node_modules\html-webpack-plugin\index.js:59:56
    at Hook.eval [as call] (eval at create (C:\Users\user\Documents\Dev\project\webpack\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:100:1)
    at Hook.CALL_DELEGATE [as _call] (C:\Users\user\Documents\Dev\project\webpack\node_modules\webpack\node_modules\tapable\lib\Hook.js:14:14)
    at Compiler.newCompilation (C:\Users\user\Documents\Dev\project\webpack\node_modules\webpack\lib\Compiler.js:943:26)
    at C:\Users\user\Documents\Dev\project\webpack\node_modules\webpack\lib\Compiler.js:984:29
    at Hook.eval [as callAsync] (eval at create (C:\Users\user\Documents\Dev\project\webpack\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\user\Documents\Dev\project\webpack\node_modules\webpack\node_modules\tapable\lib\Hook.js:18:14)
    at Compiler.compile (C:\Users\user\Documents\Dev\project\webpack\node_modules\webpack\lib\Compiler.js:979:28)
    at C:\Users\user\Documents\Dev\project\webpack\node_modules\webpack\lib\Compiler.js:470:12
    at Compiler.readRecords (C:\Users\user\Documents\Dev\project\webpack\node_modules\webpack\lib\Compiler.js:821:11)
    at C:\Users\user\Documents\Dev\project\webpack\node_modules\webpack\lib\Compiler.js:467:11
    at Hook.eval [as callAsync] (eval at create (C:\Users\user\Documents\Dev\project\webpack\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\user\Documents\Dev\project\webpack\node_modules\webpack\node_modules\tapable\lib\Hook.js:18:14)
    at C:\Users\user\Documents\Dev\project\webpack\node_modules\webpack\lib\Compiler.js:464:20
    at Hook.eval [as callAsync] (eval at create (C:\Users\user\Documents\Dev\project\webpack\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\user\Documents\Dev\project\webpack\node_modules\webpack\node_modules\tapable\lib\Hook.js:18:14)
    at run (C:\Users\user\Documents\Dev\project\webpack\node_modules\webpack\lib\Compiler.js:461:25)
    at Compiler.run (C:\Users\user\Documents\Dev\project\webpack\node_modules\webpack\lib\Compiler.js:484:4)
    at processOptions (C:\Users\user\Documents\Dev\project\webpack\node_modules\webpack-cli\bin\cli.js:353:14)
    at C:\Users\user\Documents\Dev\project\webpack\node_modules\webpack-cli\bin\cli.js:364:3
    at Object.parse (C:\Users\user\Documents\Dev\project\webpack\node_modules\yargs\yargs.js:567:18)
    at C:\Users\user\Documents\Dev\project\webpack\node_modules\webpack-cli\bin\cli.js:49:8
    at Object.<anonymous> (C:\Users\user\Documents\Dev\project\webpack\node_modules\webpack-cli\bin\cli.js:366:3)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at runCli (C:\Users\user\Documents\Dev\project\webpack\node_modules\webpack\bin\webpack.js:54:2)

ビルドが成功していた時のソースとのdiffをとったところ、下記の差分が確認された。

package.json
ビルドできないソース
"webpack": "^5.9.0",
"webpack-cli": "^3.3.11",

正常に動作していたときのソース
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10"

webpackのverの違いが原因なのでは？

それぞれ同じverをインストールしたところ
ビルド成功

おそらく色々いじっている時に、verを指定せずに最新版をインスト―ルしてしまったようです