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

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

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

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


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とかですかね。

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

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

参考になれば幸いです。


∞Tadashi Suyama∞

js webpack versionup
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイト内検索

最近の投稿

アイキャッチ
エラー処理について

COJPドメンを取得する際に「登記年月日」という項目があります。 その項目通り登記した年月日を入れる訳ですが、なぜかエラーが出ました。 半角英数字にして下さいというよくあるエラーです。当然半角英...

24 Jan 2021

アイキャッチ
javascriptのundefinedの判定

jqueryで高さの数値をとって足し算をしていたらエラーも出ずに動かないということになったので調べてみました。 ワードプレスで管理画面のアドミンバーが一度ログインするとフロント画面でも表示される...

17 Jan 2021

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

webpack4(4.41.5)から webpack5(5.12.1)にあげました。 特に難しい設定は行っておらず主にscssと共通モジュールの設定だけで使っているのですがそれでもエラーが出たの...

09 Jan 2021

アイキャッチ
明けましておめでとうございます

明けましておめでとうございます。 本年も何卒よろしくお願いいたします。 今年の初詣は雪でしたね、久しぶりの雪が積もってコロナの影響もあり人が少なめ 本年は武内神社に大晦日深夜の初詣にいって...

05 Jan 2021

アイキャッチ
年末年始のお知らせ

去年に引き続き更新できず、、、、今年ももう終わりですね。 ブログ更新のjekyllやめようと考えてますが、移行作業も大変ですし、なんだかんだでそのままになりそう 当事務所は12/28〜1/5ま...

27 Dec 2020

著者

ウェブエンジニアの須山のブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

タグクラウド

js webpack versionup
フッターイメージ