Can we set ignor order in [mini-css-extract-plugin] to prevent from conflicting order warnings?

[don-esteban]

Gatsy 2.32.3

After reordering import statements, I got this kind of warnings:

warn chunk styles [mini-css-extract-plugin]
Conflicting order. Following module has been added:
 * css ./node_modules/css-loader??ref--19-oneOf-0-1!./node_modules/postcss-loader/src??postcss-4!./node_modules/sass-loader/dist/cjs.js??ref--19-oneOf-0-3!./src
/components/breadcrumb/styles.module.scss
despite it was not able to fulfill desired ordering with these modules:
 * css ./node_modules/css-loader??ref--19-oneOf-0-1!./node_modules/postcss-loader/src??postcss-4!./node_modules/sass-loader/dist/cjs.js??ref--19-oneOf-0-3!./src
/components/mdx/blue-box.module.scss
   - couldn't fulfill desired order of chunk group(s) component---src-templates-product-page-js
   - while fulfilling desired order of chunk group(s) component---src-pages-cart-index-js
s

Searching for offending orders I stripped the component down to this code:

import React from "react"
import BlueBox from "../components/mdx/blue-box"
import Breadcrumb from "../components/breadcrumb/component"

export default function () {
  return <div />
}

Both components import their SCSS module.

import React from "react"
import styles from "./blue-box.module.scss"

export default ({ children }) => <div className={styles.wrapper}>{children}</div>

I cleared the SCSS modules. So they are empty.

If I change import order, the warnings disappear

...
import Breadcrumb from "../components/breadcrumb/component"
import BlueBox from "../components/mdx/blue-box"
...

I found a workaround, which works fine
https://stackoverflow.com/questions/63124432/how-do-i-configure-mini-css-extract-plugin-in-gatsby

// File: gatsby-node.js
exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => {
  if (stage === 'build-javascript') {
    const config = getConfig()
    const miniCssExtractPlugin = config.plugins.find(
      plugin => plugin.constructor.name === 'MiniCssExtractPlugin'
    )
    if (miniCssExtractPlugin) {
      miniCssExtractPlugin.options.ignoreOrder = true
    }
    actions.replaceWebpackConfig(config)
  }
}

Is this a valid workaround or do I buy other issues? Is there a better way to resolve this issue?

Thanks in advance

[nagiek]

What version of gatsby are you using? I was using the exact same workaround in v2, but started receiving warnings again in 3.0.2.

[don-esteban]

Sorry, missed that information. I'm using Gatsby version: 2.32.3

[don-esteban]

Found this pugin. gatsby-plugin-silence-css-order-warning. Did not test it yet. Perhaps it helps with Gatsby version: 3.0.2

[chris-erickson]

This doesn't work for me anymore on V3 (it worked fine on V2) ☹️

[LekoArts]

Is this a valid workaround or do I buy other issues? Is there a better way to resolve this issue?

Yeah, it's an okay solution to this. It won't break anything else.

[dmorda]

I'm seeing this too in both development and production modes. I can't for the life of me track down what could be causing the conflicting order. One of the first things I tried was ordering all imports alphabetically for all components, but that had no effect. I could use this workaround, but I feel like I might actually have an issue I need to resolve. Plus, that specific snippet works for building, but it doesn't seem to work just when in development mode...at least for me.

I'm on Gatsby 3.0.3 and using CSS modules. Is there anything else I should look into?

[chris-erickson]

I think the original proposal only works in V2 - it's very similar to the also linked plugin, which has stopped working for me in V3.

[kara-ryli]

This is still an issue for me in v5. But luckily Webpack 5 makes this way easier to fix:

gatsby-node.js

exports.onCreateWebpackConfig = ({ actions }) => {
  // https://github.com/gatsbyjs/gatsby/discussions/30083
  actions.setWebpackConfig({
    ignoreWarnings: [/chunk (commons|styles) \[mini-css-extract-plugin\]/],
  });
};