menu

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
# All channels
view-forward
# General
view-forward
# I Made This
view-forward
# Meta
view-forward
# Themes
view-forward
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
  • reply
  • like

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.
  • reply
  • like

November 8, 2019 at 5: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.
This works great, would ignoring the problem, fix this problem or just not report the error?
  • reply
  • like
, 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
  • reply
  • like
It ignores the warning (which is not applicable only if you are using CSS modules).
  • reply
  • like

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

April 26, 2021 at 12:42pm
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.
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?
  • reply
  • like

June 9, 2021 at 7:29pm
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?
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)
}
}
  • reply
  • like