ツイート
シェア
LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

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

Node.js image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

webpackおなじみの、バージョンアップのオプション変更でエラーが出ました。

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

答えは『指定する場所が変わった。』

変更前3.0.0
変更後4.0.4
postcss-loaderのバージョン
webpack4.44.2
webpack-cli3.3.12
webpackのバージョン

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

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

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

postcss7.0.32

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

変更前の設定です。

webpack.config.js
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プロパティは知らん。

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

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

webpack.config.js
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のバージョンと合わずエラーになります。

postcss-loaderautoprefixer相性
4.0.49.8.6
4.0.410.0.1×
postcss-loaderとautoprefixerのバージョン

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

前のページ
webpack4, @babel, IE11でforEachがエラー
webpackを4から5にアップデートしたら起きたこと。
次のページ

JavaScriptの本

post-cta-image

『自分は向いていない』『やってみたけど挫折した』『プログラマだけどjavaScriptは未経験』『フロントエンドエンジニアを目指したい』など、いろいろなタイプに合わせた書籍を集めました。

どうしてもネットで自分で調べるのが苦手という人におすすめです。

将来的には、書籍を買わずにネット上の公式ドキュメントで情報収集できるようなものを選んでいます。


javaScriptの本5選

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください