Webpack5にアップデートしてエラーの対処方法2つ

2021-01-09 最終更新日:2021-01-24

webpack4（4.41.5）から webpack5（5.12.1）にあげました。特に難しい設定は行っておらず主にscssと共通モジュールの設定だけで使っているのですがそれでもエラーが出たのでエラーとともに対処方法ご紹介いたします。変更箇所はwebpack.config.jsの設定内容になります。

webpack

PostCSSのエラー

以下のようなエラーが出ました、なんかpostcss-loaderが良くないぞということのようですね。

Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'plugins'. These properties are valid:
......

postcss-loaderでautoprefixerを入れていたので以下の設定にしてありました。このままコンパイルすると上記エラーが出ました。CSS、SCSS関連読み込んでいる場合はすべてこれが原因でした。

// PostCSSのための設定
	{
		loader: 'postcss-loader',
		options: {
			sourceMap: true,
			plugins: [
				require('autoprefixer')({
					grid: true,
				}),
			]
		}
	},

以下のようにしたら解消されました。optionsの下にpostcssOptionsを追加しました。

// PostCSSのための設定
	{
		loader: 'postcss-loader',
		options: {
			postcssOptions: {
				sourceMap: true,
				plugins: [
					require('autoprefixer')({
						grid: true,
					}),
				]
			}
		}
	},

devtoolエラー

ソースマップ出力方法もちょっと変わりました。

Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$".
   BREAKING CHANGE since webpack 5: The devtool option is more strict.
   Please strictly follow the order of the keywords in the pattern.

あとdevtoolがnoneがなくなりfalseに変わりました。

   devtool: 'none',

   devtool:  false,

あとはプラグイン関連も設定が変わっているっぽいです。エラーがでていなかったのでわからないですがここら辺は調べていくとわかるかもです。有名どころではTerserとかですかね。

TerserWebpackPlugin

因みにnodeのアップデートを行ってもエラーが出る始末、node_modulesを削除してnpm installで入れ直したら解消されました。やたらめったらアップデートしない方が良さそうです。調査→検索→検証→確認→エラー→調査→検索→確認→解消というループにはまる。このあたりは調査報告はまとめておいた方が良いですね。調べて自分のサイトに書いてあるとかありました。

Snowpackというツールも気になるところ。最新のWeb用に設計された超高速のフロントエンドビルドツールです。