#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を指定せずに最新版をインスト―ルしてしまったようです