Error: PostCSS received undefined instead of CSS string

プログラミング
スポンサーリンク
language

webpackでsassをコンパイルするときに、以下のエラーが出るようになりました。

Error: PostCSS received undefined instead of CSS string

また、このエラーはreact.jsやvue.jsをコンパイルするときにも同じエラーが出ます。

この記事ではこのエラーの解消方法と原因を紹介します。

スポンサーリンク

エラーの解消方法はsass-loaderを再インストール

このエラーはsass-loaderが吐き出しているエラーです。

sass-loaderを再インストールすることで、sassのコンパイルエラーを解消できます。

再インストールする手順は以下の通りです。

  • sass-loaderをアンインストール
  • sass-loaderをインストール

上記の手順の再インストールは、以下のコマンドで行います。

# npm
$ npm uninstall sass-loader
$ npm install sass-loader --save-dev

# yarn
$ yarn remove sass-loader
$ yarn add sass-loader --dev

node-sassも入れている方はnode-sassも再インストールする必要があります。

# npm
$ npm uninstall sass-loader node-sass
$ npm install sass-loader node-sass --save-dev

# yarn
$ yarn remove sass-loader node-sass
$ yarn add sass-loader node-sass --dev

原因はnodeのバージョンに対応していないこと

このエラーはsass-loaderがnodeのバージョンに対応していない事によって吐き出されるエラーです。

グローバルのnodeのバージョンを上げたタイミングでこのエラーが出ます。
最新のnodeのバージョンはsass-loader11.1.1から互換性があります。

Release v11.1.1 · webpack-contrib/sass-loader
11.1.1 (2021-05-13) Bug Fixes disabled auto importing fiber on node >= 16 due incompatibility problems (#950) (4ca004b)

まとめ

webpackでsassをコンパイルするときに以下のエラーが出る原因は、sass-loaderがnodeのバージョンに対応していないからです。

Error: PostCSS received undefined instead of CSS string

このエラーを解消するにはsass-loaderを以下のコマンドで再インストールする必要があります。

# npm
$ npm uninstall sass-loader
$ npm install sass-loader --save-dev

# yarn
$ yarn remove sass-loader
$ yarn add sass-loader --dev

node-sassも入れている方はnode-sassも再インストールする必要があります。

# npm
$ npm uninstall sass-loader node-sass
$ npm install sass-loader node-sass --save-dev

# yarn
$ yarn remove sass-loader node-sass
$ yarn add sass-loader node-sass --dev

タイトルとURLをコピーしました