Forem

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 to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay