Nextjs v9: Conflicting order between extract-css-chunks-plugin error

[secretlifeof]

Environment

Nextjs: v9.0.6-canary.0
Linaria: v1.4.0-alpha.1
React: c16.9.0

Description

We use a combination of linaria, styled-components, styled-jsx. An error is printed to the console:

chunk commons [extract-css-chunks-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/components/ImageByURL/index.linaria.css
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/styles/Grid/index.linaria.css
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/utils/mediaQuery.linaria.css

chunk commons [extract-css-chunks-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/components/ShopDetailInformation/index.linaria.css
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/styles/Grid/index.linaria.css
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/utils/mediaQuery.linaria.css

chunk commons [extract-css-chunks-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/components/ShopDetail/index.linaria.css
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/styles/Grid/index.linaria.css
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/utils/mediaQuery.linaria.css

chunk commons [extract-css-chunks-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/components/Hover/index.linaria.css
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/styles/Grid/index.linaria.css
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/utils/mediaQuery.linaria.css

chunk commons [extract-css-chunks-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/styles/FlexGridItem/index.linaria.css
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/styles/Grid/index.linaria.css
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/utils/mediaQuery.linaria.css

chunk commons [extract-css-chunks-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/components/IndexDetail/index.linaria.css
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/styles/Grid/index.linaria.css
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/utils/mediaQuery.linaria.css

chunk commons [extract-css-chunks-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/components/ImageSrcset/index.linaria.css
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/styles/Grid/index.linaria.css
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/utils/mediaQuery.linaria.css

chunk commons [extract-css-chunks-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/components/Project/modules.linaria.css
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/styles/Grid/index.linaria.css
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/utils/mediaQuery.linaria.css

chunk commons [extract-css-chunks-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/components/Project/index.linaria.css
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/styles/Grid/index.linaria.css
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/utils/mediaQuery.linaria.css

chunk commons [extract-css-chunks-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/styles/Grid/index.linaria.css
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/utils/mediaQuery.linaria.css

chunk commons [extract-css-chunks-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/styles/FillArea/index.linaria.css
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/components/IndexList/index.linaria.css
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/utils/mediaQuery.linaria.css

chunk commons [extract-css-chunks-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/utils/mediaQuery.linaria.css
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/components/ShopList/index.linaria.css
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/components/IndexList/index.linaria.css

chunk commons [extract-css-chunks-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/components/ShopList/index.linaria.css
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/components/IndexList/index.linaria.css

chunk commons [extract-css-chunks-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/components/PaypalButtonSmart/index.linaria.css
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/components/IndexList/index.linaria.css

chunk commons [extract-css-chunks-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/components/ShoppingCart/index.linaria.css
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/components/IndexList/index.linaria.css

chunk commons [extract-css-chunks-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/components/MenuMobileBrick/index.linaria.css
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/components/IndexList/index.linaria.css

chunk commons [extract-css-chunks-plugin]
Conflicting order between:
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/components/IndexList/index.linaria.css
 * css ./node_modules/css-loader??ref--5-1!./.linaria-cache/components/MenuMobile/index.linaria.css

Why does this happen?

Also there is an other problem:
Just in production mode when combining linaria and styled-components the wrong way. I do not understand which combination is wrong. Are there some ways these cannot be combined?

[ShanonJackson]

Problem is well known with that plugin, i use NextJS with Linaria and to get around it you can basically copy the code of @zeit/next-css locally and make an adjustment to silence the warnings.

They come where css files are imported in different orders in different files and therefore because in css the order files are declared matters it says it doesn't know what to do.

(it doesn't know which style sheet to render above which one in the outputted style sheet).

This is not a problem with Linaria at all. Hope this helps.

change this...

  if (!isServer && !extractCssInitialized) {
    config.plugins.push(
      new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        filename: dev
          ? 'static/css/[name].css'
          : 'static/css/[name].[contenthash:8].css',
        chunkFilename: dev
          ? 'static/css/[name].chunk.css'
          : 'static/css/[name].[contenthash:8].chunk.css'
      })
    )
    extractCssInitialized = true
  }

to this..

  if (!isServer && !extractCssInitialized) {
    config.plugins.push(
      new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        filename: dev
          ? 'static/css/[name].css'
          : 'static/css/[name].[contenthash:8].css',
        chunkFilename: dev
          ? 'static/css/[name].chunk.css'
          : 'static/css/[name].[contenthash:8].chunk.css',
	 	 ignoreOrder: true,
      })
    )
    extractCssInitialized = true
  }

[jayu]

I experienced this issue in Next.js with other styling solutions so I guess it's not related to linaria. AFAIR Next's team was planning to add more verbose logging of this issue. The error does not give any clue on where to start looking to set the correct order

[TGE24]

I'm still experiencing this issue without linaria. is there any solution yet?

[ShanonJackson]

Its not a linaria issue. Its an issue where-in allowing users to import css you cannot gaurentee in what order those imports are resolved. The good thing is linaria doesn't really rely on css ordering so you can just silence the warnings by turning on ignoreOrder: true in webpack on MiniCssExtractPlugin

[msand]

@TGE24 Hoist your conflicting / global css imports from your next.js pages and components to your _app.js file, this way they are always included and always in the same order, and thus no strange css cascade / specificity / ordering bugs.

[ShanonJackson]

That's not true, there is still in Next 9.3.2 issues with CSS specificity order due to the fact that that next duplicates styles across chunks. Will be fixed in 9.3.4 by the looks of it.

vercel/next.js#11448 (comment)

Example in this issue i opened awhile ago.