CSS Problem after build, but not in development' environment. (chunk styles [mini-css-extract-plugin] Conflicting order.)

[baloghrebecca]

Description

My website is not displaying properly after gatsby build (or deployment on Gatsby Cloud) and my content is not showing, but it works just fine when I run gatsby develop. Whenever I try to run gatsby build, it runs successfully but shows following warning:

chunk styles [mini-css-extract-plugin] Conflicting order. Following module has been added: * css ./node_modules/css-loader??ref--14-oneOf-1-1!./node_modules/postcss-loader/src??postcss-3!./node_modules/sass-loader/dist/cjs.js??ref--14-oneOf-1-3!./src/components/footer.scss despite it was not able to fulfill desired ordering with these modules: * css ./node_modules/css-loader??ref--14-oneOf-1-1!./node_modules/postcss-loader/src??postcss-3!./node_modules/sass-loader/dist/cjs.js??ref--14-oneOf-1-3!./src/components/forms.scss - couldn't fulfill desired order of chunk group(s) component---src-pages-index-js * css ./node_modules/css-loader??ref--14-oneOf-1-1!./node_modules/postcss-loader/src??postcss-3!./node_modules/sass-loader/dist/cjs.js??ref--14-oneOf-1-3!./src/components/headerMain.scss - couldn't fulfill desired order of chunk group(s) component---src-pages-index-js - while fulfilling desired order of chunk group(s) component---src-pages-about-js, component---src-pages-books-js, component---src-pages-cart-js, component---src-pages-imprint-js, component---src-pages-product-details-js, component---src-pages-stockists-js

What I've tried so far to resolve this issue
I've tried to follow instructions in this thread and it was suggested to re-order my imports. Since my project is rather small, this is not a problem, but maybe I've messed something up while doing so. I'm using global styles.

I've tried to only import my css only in the index.js (the error disappeared but the site was still displayed incorrectly after deployment)

and I've tried to use the sort-imports plugin in vsc. (nothing changed)

Steps to reproduce

gatsby develop
works fine, pages load, css correct

gatsby clean
gatsby build
gatsby serve
css warning + pages not found 404

Expected result

After running gatsby build the website should look the same as in my development environment. (Content should show, CSS should behave like in development)

Actual result

The actual build looks different, and behaves differently. Also content is not showing. Completely different result to what I have in my development environment.

Environment

System:
OS: macOS 10.15.5
CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 14.5.0 - /usr/local/bin/node
npm: 6.14.5 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 84.0.4147.125
Firefox: 78.0.2
Safari: 13.1.1
npmPackages:
gatsby: ^2.24.2 => 2.24.2
gatsby-cli: ^2.12.87 => 2.12.87
gatsby-image: ^2.4.12 => 2.4.12
gatsby-plugin-anchor-links: ^1.1.1 => 1.1.1
gatsby-plugin-favicon: ^3.1.6 => 3.1.6
gatsby-plugin-offline: ^3.2.9 => 3.2.9
gatsby-plugin-react-helmet: ^3.3.4 => 3.3.4
gatsby-plugin-react-svg: ^3.0.0 => 3.0.0
gatsby-plugin-sass: ^2.3.4 => 2.3.4
gatsby-plugin-sharp: ^2.6.18 => 2.6.18
gatsby-plugin-smoothscroll: ^1.1.0 => 1.1.0
gatsby-plugin-snipcart: ^1.1.2 => 1.1.2
gatsby-plugin-snipcart-advanced: ^1.0.0 => 1.0.0
gatsby-plugin-web-font-loader: ^1.0.4 => 1.0.4
gatsby-remark-images: ^3.3.10 => 3.3.10
gatsby-source-filesystem: ^2.0.28 => 2.0.28
gatsby-source-strapi: 0.0.12 => 0.0.12
gatsby-source-stripe: ^3.1.1 => 3.1.1
gatsby-transformer-remark: ^2.8.17 => 2.8.17
gatsby-transformer-sharp: ^2.5.10 => 2.5.10
npmGlobalPackages:
gatsby-cli: 2.5.9-ink.61

(I had to revert to gatsby-cli: 2.5.9-ink.61 since 2.12.87 was giving me an error when I tried to run gatsby info --clipboard. I'm using Gatsby CLI version: 2.12.87)

EDIT: Reproducing the issue should now be easier. And hopefully my issue is now easier to understand. :)

[baloghrebecca]

Okay, this issue seems to be somewhat solved. I went back all my commits to check when this error started occurring. Then I've made all my global page styles into modules, and rearranged my imports. I arranged them according to in which order they are used in the component. It was feasable, as my project was rather small. It took care of the [mini-css-extract-plugin] error message.

I honestly don't know what made my pages disappear on build, but this issue seems to be solved with the solved css issue. Therefore I'm closing this thread.

[coskuncakir]

hi @baloghrebecca,
I had the same problem and I spent one day to solve it :)

as you said, I arranged the imports like below and it worked.

import React from "react"
import Header from "../components/layout/header"
import Layout from "../components/layout"
import SEO from "../components/seo"
import Title from "../components/typography/title"
import Footer from "../components/layout/footer"

export default function ServicesPage() {
  return (
    <>
      <Header />
      <Layout>
        <SEO title="Services" />
        <Title headingLevel="h1">Services</Title>
      </Layout>
      <Footer />
    </>
  )
}

Thanks!

[Steamforge]

I was having the same issues where gatsby build displayed differently than gatsby develop. My setup used css modules instead of sass. I solved it with the import ordering mentioned from @baloghrebecca and @coscakir.

I would prefer to have the component imports alphabetized but I'll take "in order of appearance" and working. Thank you for the solution.

[m4heshd]

Amazing. Matching the import order of components in all chunks worked. Thank you @baloghrebecca.

[tomwrankmore]

thank you! arranging the imports as the components are used worked for me.