WebPack - WARNING in chunk ... [mini-css-extract-plugin] Conflicting order. Following module has been added:
I have decided to configure Webpack to extract/split my CSS files into separated files and multiple chunks - like JS files are. I need it for SSR in my React project.
It looks like CSS extracting/splitting can be made by mini-css-extract-plugin package.
But, there is some warning related to styles order. I noticed that the problem occurs when I use multiple dynamic imports to modules that both use indirectly the same styles inside.
I use import style from './style.scss' to attach styles to components.
Is there some way to order styles in the correct way?
Webpack error:
WARNING in chunk frontend_src_components_Editor_index_tsx-frontend_src_components_Editor-60b40a [mini-css-extract-plugin]
Conflicting order. Following module has been added:
* css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js!./frontend/src/components/Editor/style.scss
despite it was not able to fulfill desired ordering with these modules:
* css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js!./frontend/src/components/Editor/Tools/style.scss
- couldn't fulfill desired order of chunk group(s) site-writer
- while fulfilling desired order of chunk group(s) site-reader
* css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js!./frontend/src/components/Editor/Path/style.scss
- couldn't fulfill desired order of chunk group(s) site-writer
- while fulfilling desired order of chunk group(s) site-reader
Resources
The problem you try to solve is complicated.
There are available few solutions:
- re-organize styles imports order - it may not solve the problem,
- style each component locally and disable warnings by
ignoreOrder: trueproperty,
e.g.webpack.config.jsfile:// ... module.exports = { plugins: [ // ... new MiniCssExtractPlugin({ filename: "[name].[chunkhash:5].css", chunkFilename: "[name].chunk.[chunkhash:5].css", ignoreOrder: true }), // ... ], // ... }; - do not use dynamic imports or lazy loading for React components - I know it opposite of what you need.
BTW: by styling components locally I mean to use unique className props with elements in components to prevent styles overriding.