React/mini-css-extract-plugin conflicting import order error: Verbose build logs?

Question

I'm working on a CRA react app and I've recently come across some CSS import order warnings from mini-css-extract-plugin:

chunk 1 [mini-css-extract-plugin]
Conflicting order. Following module has been added:
 * css ./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-7-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-7-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-7-4!./src/components/RouterLink.module.scss
despite it was not able to fulfill desired ordering with these modules:
 * css ./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-7-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-7-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-7-4!./src/components/Error/PageError.module.scss
   - couldn't fulfill desired order of chunk group(s) ,
   - while fulfilling desired order of chunk group(s) , , ,

I know I can suppress these warnings but I want to fix them properly to avoid odd issues down the line. I can't get any more info about the files involved, however.

My understanding of what's happening here is that the TSX files that are importing these modules are being imported in different order in different places. I've tried to rearrange these in every place that they're imported, but I think the problem is more complex than that. I'd really like more information from mini-css-extract-plugin though, and I can't figure out how to get more verbose output. Is this possible? I've tried npm run build -- --stats but there's no more information about this in build/bundle-stats.json that I can see.

I've tried following along with this thread: https://github.com/facebook/create-react-app/issues/5372#issuecomment-685932009 but this is a complex app and manually tracking down every issue like this is intimidating and will be extremely time consuming. I don't think it's feasible to sort all imports in all files. I really just want a pointer to which file generated the conflict. Thoughts? Thanks!

Answer 1

You can try to install this package https://www.npmjs.com/package/eslint-plugin-simple-import-sort and integrate it with your current codebase.

This has the eslint --fix feature, which can fix the order in your codebase.