Resolving mini‑css‑extract‑plugin Warnings in Gatsby

When developing applications, especially with frameworks like Gatsby JS, it wouldn't be unusual to encounter various warnings in your terminal during the build process. These are messages from tools such as webpack, giving you a heads‑up that there might be a potential issue, or suboptimal practices in your code.

Whilst some warnings could indicate serious problems that need to be addressed urgently, others are less critical and do not impact the functionality of your application at all.

In the case of developing with Gatsby, I've often come across this type of warning, originating from the mini‑css‑extract‑plugin:

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[9].oneOf[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[9].oneOf[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[9].oneOf[1].use[3]!./src/components/SkipLinks/skip-links.scssdespite it was not able to fulfill desired ordering with these modules

What Causes These Warnings?

These warnings arise because the mini‑css‑extract‑plugin expects that the order of CSS imports is consistent across every page and every page load. If you're working with the likes of BEM, or CSS Components, then these warnings are irrelevant; import ordering isn't important and CSS Modules are scoped locally to components anyway (preventing the exact style leakage that the ordering restriction that mini‑css‑extract‑plugin is throwing the warning about in the first place).

However, mini‑css‑extract‑plugin does not inherently recognise this scoping mechanism and expects a consistent global order of CSS imports to avoid potential style conflicts. It is this discrepancy that leads to the warnings about conflicting order you are seeing, even though the actual impact on your application is negligible due to the isolated nature of CSS Modules.

In my case, the warnings could be many, many screens long, burying more important messages from webpack in masses of irrelevant warnings.

The Solution

In my case (and almost certainly in your case too if you're using CSS Modules and seeing these messages), the solution is simply to suppress these warnings altogether in order to clean up your Gatsby build logs.

For this, I use a plugin called webpack‑filter‑warnings‑plugin, which does exactly what you would expect from the name: it filters out specific warnings from your webpack output.

So, there are really only two steps to this:

Install webpack‑filter‑warnings‑plugin

If you've installed a dependency before you'll already know how to do this:

yarn add -D webpack-filter-warnings-plugin

Of course if you're using npm, then the command is ever‑so‑slightly different...

Configure it in gatsby‑node.ts

Now, all you need to do is configure it in your gatsby‑node.ts (or gatsby‑node.js) file in your webpack configuration:

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:/,      }),    ],  });};

And that's it! Stop your server, start it up again, and enjoy a much cleaner output from Gatsby!

Why Not Use stats.warningsFilter?

stats.warningsFilter is a built‑in configuration in webpack for filtering warnings ‑ exactly what we've been discussing. However, it is not respected by all tools and configurations. In the case of Gatsby, the default webpack configuration does not inherently support stats.warningsFilter because of the multiple stages and customisations Gatsby uses for different build processes​. (Gatsby)​​ (RelativeCI)​​ (GitHub).

Because of this, and from my own experience, when you're dealing with unwanted warnings in your Gatsby log, the webpack‑filter‑warnings‑plugin offers a more reliable solution for explicitly filtering out specific warnings during the compilation process.