menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

Gatsby

Fast in every way that matters. Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps.

Channels
Team

Having issue related to `chunk commons [mini-css-extract-plugin]`

October 22, 2019 at 8:25pm

Having issue related to `chunk commons [mini-css-extract-plugin]`

October 22, 2019 at 8:25pm
I'm getting this error when I run build:
warn chunk commons [mini-css-extract-plugin]
Conflicting order between:
* css ./node_modules/css-loader??ref--12-oneOf-0-1!./node_modules/postcss-loader/src??ref--12-oneOf-0-2!./src/css/grid.module.css
* css ./node_modules/css-loader??ref--12-oneOf-0-1!./node_modules/postcss-loader/src??ref--12-oneOf-0-2!./src/components/Header/style.module.css
* css ./node_modules/css-loader??ref--12-oneOf-0-1!./node_modules/postcss-loader/src??ref--12-oneOf-0-2!./src/components/HeaderNav/style.module.css
warn chunk commons [mini-css-extract-plugin]
Conflicting order between:
* css ./node_modules/css-loader??ref--12-oneOf-0-1!./node_modules/postcss-loader/src??ref--12-oneOf-0-2!./src/components/HeaderNav/style.module.css
* css ./node_modules/css-loader??ref--12-oneOf-0-1!./node_modules/postcss-loader/src??ref--12-oneOf-0-2!./src/components/BlogRoll/style.module.css
warn chunk commons [mini-css-extract-plugin]
Conflicting order between:
* css ./node_modules/css-loader??ref--12-oneOf-0-1!./node_modules/postcss-loader/src??ref--12-oneOf-0-2!./src/components/Header/style.module.css
* css ./node_modules/css-loader??ref--12-oneOf-0-1!./node_modules/postcss-loader/src??ref--12-oneOf-0-2!./src/components/BlogRoll/style.module.css
warn chunk commons [mini-css-extract-plugin]
Conflicting order between:
* css ./node_modules/css-loader??ref--12-oneOf-0-1!./node_modules/postcss-loader/src??ref--12-oneOf-0-2!./src/components/Footer/style.module.css
* css ./node_modules/css-loader??ref--12-oneOf-0-1!./node_modules/postcss-loader/src??ref--12-oneOf-0-2!./src/components/BlogRoll/style.module.css
warn chunk commons [mini-css-extract-plugin]
Conflicting order between:
* css ./node_modules/css-loader??ref--12-oneOf-0-1!./node_modules/postcss-loader/src??ref--12-oneOf-0-2!./src/css/type.module.css
* css ./node_modules/css-loader??ref--12-oneOf-0-1!./node_modules/postcss-loader/src??ref--12-oneOf-0-2!./src/components/BlogRoll/style.module.css
warn chunk commons [mini-css-extract-plugin]
Conflicting order between:
* css ./node_modules/css-loader??ref--12-oneOf-0-1!./node_modules/postcss-loader/src??ref--12-oneOf-0-2!./src/components/BlogRoll/style.module.css
* css ./node_modules/css-loader??ref--12-oneOf-0-1!./node_modules/postcss-loader/src??ref--12-oneOf-0-2!./src/components/Layout/style.module.css
Any idea on how we can fix this?

November 1, 2019 at 4:08pm
If you're using CSS modules, you can ignore them that way:
// 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)
}
}
If you're using plain CSS, you should consider fixing your imports order and class naming.
Edited
like-fill
6

November 5, 2019 at 5:06pm
Hi Thanks for this, but I'm not sure I understand what is happening. I seem to get similar problems. And I just seemed to push the problem around a bit by trialing moving import around. Any help to understand what the issue is and how I can actually fix it would be really welcome.

November 8, 2019 at 5:08pm
This works great, would ignoring the problem, fix this problem or just not report the error?
, if you are using plain CSS files, it's an issue because class names are global and the order of importation matters because only the last definition for a given class would be applied. However, if you are using CSS module files (.module.css), every class names is scoped to a file (at packaging time, they are prefixed with unique text in order to prevent name clashes). So order doesn't matter and you can instruct Webpack to set the ignoreOrder option of the miniCssExtractPlugin to true.
Edited
like-fill
2
It ignores the warning (which is not applicable only if you are using CSS modules).

November 11, 2019 at 11:32am
That's really helpful - thank you!

April 26, 2021 at 12:42pm
I witnessed this chunk commons [mini-css-extract-plugin] warnings after upgrading to Gatsby 3 and gatsby-plugin-sass to 4.3.0 and tried to ignore the warnings by adding the quoted in gatsby-node, but no luck, all the warnings are still being consoled.
Anyone can tell me where I am wrong?

June 9, 2021 at 7:29pm
After I tried, change the stage build-javascript to develop can works. Code snippet:
// gatsby-node.js
exports.onCreateWebpackConfig = helper => {
const { stage, actions, getConfig } = helper
if (stage === "develop") {
// 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)
}
}