Fix warn chunk commons [mini-css-extract-plugin] error in Gatsby JS

Are you using CSS Modules with Gatsby JS and seeing the following error in your logs when running gatsby develop or gatsby build?

warn chunk commons [mini-css-extract-plugin]
Conflicting order. Following module has been added:
css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[0].use[1]!./node_modules/gatsby/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[0].use[2]!./node_modules/gatsby-plugin-sass/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[10].oneOf[0].use[3]!.

Until recently so was I. After a bit of research I found the solution.

What causes the ‘mini-css-extract-plugin Conflicting order’ warning?

This error/warning is caused by the Webpack plugin  mini-css-extract-plugin wanting all CSS imports to be in the same order. This is because it confused CSS modules with plain CSS.

Plain CSS is used globally and the order of importing matters as the last imported CSS class overwrites any before it.

As CSS Modules are scoped to a component the order of importing does not matter.

How to remove ‘warn chunk commons’ message?

To clean up your Gatsby JS build logs, you can use a plugin called webpack-filter-warnings-plugin.

This Webpack plugin is added to the Gatsby onCreateWebpackConfig function, and uses regex to hide these errors.

Firstly install the plugin:

npm i webpack-filter-warnings-plugin
or
yarn add webpack-filter-warnings-plugin

And then add the following code to your gatsby-node.js file.

const FilterWarningsPlugin = require("webpack-filter-warnings-plugin");

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    plugins: [
      new FilterWarningsPlugin({
        exclude:
          /mini-css-extract-plugin[^]*Conflicting order. Following module has been added:/,
      }),
    ],
  });
};

You should now have clean logs!

[support-block]