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