webpack4, postcss-loaderのバージョンアップでエラー

webpackプラグインでは恒例の、バージョンアップのオプション変更でエラーが出ました。

postcss-loaderを3.x系から4.x系に変更すると『pluginsなんか知らん！』と出ます。

どうやらオプションの指定する場所が変わったらしい。

postcss-loaderのバージョンアップは半年ぶりです。メジャー番号が変わったのでオプション変更くらいは起きるでしょう。

webpack5の安定版がリリースされたので、その前作業でプラグインのバージョンアップを行いました。

post-loaderに必要なpostcssのバージョン変更はしていません。

そこで出たのが毎度おなじみの『そんなオプションは知らん！』エラーです。

変更前の設定です。

const mode = require("./webpack.config/mode");
const getEntry = require("./webpack.config/entry");
const entry = getEntry()
const CSSLoader = require("../rules/loader/css-loader");
const PostCSSLoader = {
  loader: "postcss-loader",
  options: {
    sourceMap: "development",
    plugins: [
      require("cssnano")(),
      require("autoprefixer")({ grid: true })
    ],
  },
};
const SassLoader = require("../rules/loader/sass-loader");

module.exports = {
  mode: mode.MODE,
  entry: entry,

  module: {
    rules: [
      {
        test: /[\-a-z0-9]*\.scss/,
        use: [
          CSSLoader,
          PostCSSLoader,
          SassLoader,
        ],
      },
    ],
  },
};

（postcss-loader以外は関係ないので、モジュール化している内容、説明は割愛。）

するとこんなエラーが。

ERROR in ./src/sample.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: 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:
   object { postcssOptions?, execute?, sourceMap? }
    at validate (C:\Users\***\sample_pj\node_modules\schema-utils\dist\validate.js:104:11)
    at Object.loader (C:\Users\***\sample_pj\node_modules\postcss-loader\dist\index.js:43:29)
    at C:\Users\***\sample_pj\node_modules\webpack\lib\NormalModule.js:316:20
    at C:\Users\***\sample_pj\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at C:\Users\***\sample_pj\node_modules\loader-runner\lib\LoaderRunner.js:233:18

おぉう。またか。オプション設定の方法が変わったらしい。ドキュメントを確認してみた。

やっぱり変わってますね？ pluginsはpostcssOptionsの中に入ったようです。変更後の設定です。

const mode = require("./webpack.config/mode");
const getEntry = require("./webpack.config/entry");
const entry = getEntry()
const CSSLoader = require("../rules/loader/css-loader");
const PostCSSLoader = {
  loader: "postcss-loader",
  options: {
    sourceMap: "development",
    postcssOptions: 
      plugins: [
        require("cssnano")(),
        require("autoprefixer")({ grid: true })
      ],
    },
  },
};
const SassLoader = require("../rules/loader/sass-loader");

module.exports = {
  mode: mode.MODE,
  entry: entry,

  module: {
    rules: [
      {
        test: /[\-a-z0-9]*\.scss/,
        use: [
          CSSLoader,
          PostCSSLoader,
          SassLoader,
        ],
      },
    ],
  },
};

変更はこれだけ。...と言いたいところですがもう一つ。

ボクはpostcss-loaderでautoprefixerを使っています。がここで問題が。

autoprefixer（npmパッケージ）のバージョンを最新に上げるとpostcss-loaderのバージョンと合わずエラーになります。

autoprefixerの10.x系はNGです。9.x系を使いましょう。