DEV Community

Robert Marshall
Robert Marshall

Posted on • Originally published at robertmarshall.dev on

5 1

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]!.


This article was originally posted (and is more up to date) at https://robertmarshall.dev/blog/fix-warn-chunk-commons-mini-css-extract-plugin-error-in-gatsby-js/


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.

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:/,
      }),
    ],
  });
};
Enter fullscreen mode Exit fullscreen mode

You should now have clean logs!

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more