0
0

More than 3 years have passed since last update.

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

Posted at

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をインストールしたところ
ビルド成功:smirk:

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0