How do I avoid the warning: chunk styles [mini-css-extract-plugin] Conflicting order in GatsbyJS?

Question

I'm using GatsbyJS and TypeScript along with the gatsby-plugin-sass plugin. I'm trying to import individual styling for components like the following example - import './Card.scss'.

import React from 'react';
import Colors from '../../constants/Colors';
import './Card.scss'

interface CardProps {
  children: any,
  padding?: number,
  marginBottom?: number,
  borderRadius?: number,
  hover?: boolean,
  border?: boolean
}

const Card: React.FunctionComponent<CardProps> = ({ children, padding, marginBottom, borderRadius, hover, border }) => {

  const cardStyling = {
    backgroundColor: Colors.white,
    padding: padding,
    marginBottom: marginBottom,
    borderRadius: borderRadius,
    border: (border ? '1px solid #E8EAED' : '0'),
  } as React.CSSProperties;

  return(
      <div style={cardStyling} className={hover ? 'card-shadow card-hover card-padding' : 'card-shadow card-padding'}>
          {children}
      </div>
  );
}

Card.defaultProps = {
  padding: 40,
  marginBottom: 20,
  borderRadius: 15,
  hover: true,
  border: true
} as Partial<CardProps>;

export default Card;

However, I'm receiving the following message when I use gatsby build.

warn chunk styles [mini-css-extract-plugin]
Conflicting order. Following module has been added:
 * css ./node_modules/css-loader??ref--12-oneOf-1-1!./node_modules/postcss-loader/lib??postcss-2!./node_modules/bootstrap/dist/css/bootstrap.css
despite it was not able to fulfill desired ordering with these modules:
 * css ./node_modules/css-loader??ref--13-oneOf-1-1!./node_modules/postcss-loader/lib??postcss-3!./node_modules/sass-loader/dist/cjs.js??ref--13-on
eOf-1-3!./src/components/cards/style.scss
   - couldn't fulfill desired order of chunk group(s) component---src-pages-404-tsx, component---src-pages-handelsbetingelser-tsx,
component---src-pages-kontakt-tsx, component---src-pages-priser-tsx, component---src-pages-privatpolitik-tsx
   - while fulfilling desired order of chunk group(s) component---src-pages-baggrund-tsx, component---src-pages-betaling-tsx,
component---src-pages-din-rapport-tsx, component---src-pages-foer-du-starter-tsx, component---src-pages-hent-rapport-tsx,
component---src-pages-hvorfor-klagen-tsx, component---src-pages-newcase-tsx, component---src-pages-send-din-sag-tsx, component---src-pages-tak-tsx,
 component---src-pages-vurdering-tsx
 * css ./node_modules/css-loader??ref--13-oneOf-1-1!./node_modules/postcss-loader/lib??postcss-3!./node_modules/sass-loader/dist/cjs.js??ref--13-on
eOf-1-3!./src/components/layout/MoveupContainer.scss
   - couldn't fulfill desired order of chunk group(s) component---src-pages-404-tsx, component---src-pages-blog-tsx,
component---src-pages-case-rosario-tsx, component---src-pages-handelsbetingelser-tsx, component---src-pages-kontakt-tsx,
component---src-pages-priser-tsx, component---src-pages-privatpolitik-tsx, component---src-pages-send-din-sag-tsx, component---src-pages-tak-tsx
   - while fulfilling desired order of chunk group(s) component---src-templates-tag-tag-template-tsx,
component---src-templates-category-category-template-tsx, component---src-pages-hvorfor-klagen-tsx
 * css ./node_modules/css-loader??ref--13-oneOf-1-1!./node_modules/postcss-loader/lib??postcss-3!./node_modules/sass-loader/dist/cjs.js??ref--13-on
eOf-1-3!./src/components/blog/BlogCard.scss

My main imports are done in the layout file like so:

import React from 'react'
import 'bootstrap/dist/css/bootstrap.css';
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import 'scss/theme.scss'
import 'scss/typography.scss'
import 'scss/animations.scss'
import 'scss/forms.scss'
import CallToAction from '../calltoaction/CallToAction'
import Footer from '../footer/Footer';
import ReactstrapNavbar from '../navigation/ReactstrapNavbar';

interface ComponentProps {
  children: any,
  location: string,
  simpleNavigation?: boolean,
  showCallToAction?: boolean
}

const Layout: React.FunctionComponent<ComponentProps> = ({ children, location, simpleNavigation, showCallToAction }) => {
    return (
        <div>
            <ReactstrapNavbar location={location} simpleNavigation={simpleNavigation} />
            {children}
            {showCallToAction && (
              <CallToAction />
            )}
            <Footer />
        </div>
    )
}

Layout.defaultProps = {
    simpleNavigation: false,
    showCallToAction: true
} as Partial<ComponentProps>;

export default Layout;

I have only found information on how to suppress the warning. I want to solve the problem. I have seen plenty of Gatsby templates using the same approach without the warnings.

Do you know how to solve it?

Answer 1

I'm not sure it will fix your problem as well, but in my case I had to reorder the imports alphabetically in one of the components

Answer 2

The order needs to be consistent everywhere the imports are referenced; otherwise webpack doesn't know how to order them when it creates the chunks.

This comment (which happens to be in a CRA issue) explains it well: https://github.com/facebook/create-react-app/issues/5372#issuecomment-685932009

Answer 3

In my case, I moved react-slick css import after all other imports.

import "slick-carousel/slick/slick.css" import "slick-carousel/slick/slick-theme.css"