[mini-css-extract-plugin]: Conflicting order

[leecalcote]

Description

The recent upgrade to Gatsby v5 has left many build warnings, particularly those of conflicting CSS, like in the example below.

Expected Behavior

Ideally, each of these warnings are eliminated. This issue can be addressed over the course of a few pull requests.

Implementation

The gatsby-plugin-loadable-components-ssr plugin is not used, but should be investigated for use. This plugin can be helpful in optimizing how components (and their associated CSS) are loaded, which can sometimes resolve or reduce CSS ordering conflicts.

Screenshots/Logs

Here is an example of build warnings:

warn chunk commons [mini-css-extract-plugin]
Conflicting order. Following module has been added:
 * css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[8].oneOf[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[8].oneOf[1].use[2]!./fonts.css
despite it was not able to fulfill desired ordering with these modules:
 * css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[8].oneOf[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[8].oneOf[1].use[2]!./node_modules/slick-carousel/slick/slick-theme.css
   - couldn't fulfill desired order of chunk group(s) component---src-pages-cloud-native-management-meshery-meshery-operator-js, component---src-pages-cloud-native-management-playground-js
   - while fulfilling desired order of chunk group(s) component---src-pages-cloud-native-management-catalog-js, component---src-pages-cloud-native-management-generate-aws-architecture-diagram-js,
component---src-pages-cloud-native-management-generate-gcp-architecture-diagram-js, component---src-pages-cloud-native-management-generate-kubernetes-architecture-diagram-js,
component---src-pages-cloud-native-management-kanvas-collaborate-index-js, component---src-pages-cloud-native-management-kanvas-collaborate-peer-reviews-index-js,
component---src-pages-cloud-native-management-kanvas-design-js, component---src-pages-cloud-native-management-kanvas-index-js, component---src-pages-cloud-native-management-kanvas-visualize-js,
component---src-pages-cloud-native-management-meshery-index-js, component---src-pages-cloud-native-management-meshery-integrations-js, component---src-pages-index-js, component---src-pages-learn-index-js,
component---src-pages-learn-service-mesh-books-js, component---src-pages-pricing-js, component---src-pages-products-index-js, component---src-pages-projects-image-hub-js, component---src-pages-projects-index-js,
component---src-pages-solutions-architecture-diagram-index-js, component---src-pages-solutions-cloud-native-deployments-by-diagram-index-js, component---src-pages-solutions-developer-defined-infrastructure-index-js,
component---src-pages-solutions-gitops-index-js, component---src-pages-solutions-gitops-performance-management-js, component---src-pages-solutions-gitops-snapshot-js,
component---src-pages-solutions-kubernetes-multi-cluster-operation-index-js, component---src-pages-solutions-orchestration-management-index-js, component---src-templates-blog-single-js,
component---src-templates-integrations-js, component---src-templates-news-single-js, component---src-templates-resource-single-js, component---src-pages-cloud-native-management-catalog-jshead,
component---src-pages-cloud-native-management-generate-aws-architecture-diagram-jshead, component---src-pages-cloud-native-management-generate-gcp-architecture-diagram-jshead,
component---src-pages-cloud-native-management-generate-kubernetes-architecture-diagram-jshead, component---src-pages-cloud-native-management-kanvas-collaborate-index-jshead,
component---src-pages-cloud-native-management-kanvas-design-jshead, component---src-pages-cloud-native-management-kanvas-index-jshead, component---src-pages-cloud-native-management-kanvas-visualize-jshead,
component---src-pages-cloud-native-management-meshery-index-jshead, component---src-pages-cloud-native-management-meshery-integrations-jshead,
component---src-pages-cloud-native-management-meshery-meshery-operator-jshead, component---src-pages-cloud-native-management-playground-jshead, component---src-pages-index-jshead,
component---src-pages-learn-index-jshead, component---src-pages-learn-service-mesh-books-jshead, component---src-pages-pricing-jshead, component---src-pages-products-index-jshead,
component---src-pages-projects-image-hub-jshead, component---src-pages-projects-index-jshead, component---src-pages-solutions-architecture-diagram-index-jshead,
component---src-pages-solutions-cloud-native-deployments-by-diagram-index-jshead, component---src-pages-solutions-developer-defined-infrastructure-index-jshead, component---src-pages-solutions-gitops-index-jshead,
component---src-pages-solutions-kubernetes-multi-cluster-operation-index-jshead, component---src-templates-blog-single-jshead, component---src-templates-integrations-jshead, component---src-templates-news-single-jshead,
 component---src-templates-resource-single-jshead
 * css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[8].oneOf[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[8].oneOf[1].use[2]!./node_modules/slick-carousel/slick/slick.css
   - couldn't fulfill desired order of chunk group(s) component---src-pages-cloud-native-management-meshery-meshery-operator-js, component---src-pages-cloud-native-management-playground-js
   - while fulfilling desired order of chunk group(s) component---src-pages-cloud-native-management-catalog-js, component---src-pages-cloud-native-management-generate-aws-architecture-diagram-js,
component---src-pages-cloud-native-management-generate-gcp-architecture-diagram-js, component---src-pages-cloud-native-management-generate-kubernetes-architecture-diagram-js,
component---src-pages-cloud-native-management-kanvas-collaborate-index-js, component---src-pages-cloud-native-management-kanvas-collaborate-peer-reviews-index-js,
component---src-pages-cloud-native-management-kanvas-design-js, component---src-pages-cloud-native-management-kanvas-index-js, component---src-pages-cloud-native-management-kanvas-visualize-js,
component---src-pages-cloud-native-management-meshery-index-js, component---src-pages-cloud-native-management-meshery-integrations-js, component---src-pages-index-js, component---src-pages-learn-index-js,
component---src-pages-learn-service-mesh-books-js, component---src-pages-pricing-js, component---src-pages-products-index-js, component---src-pages-projects-image-hub-js, component---src-pages-projects-index-js,
component---src-pages-solutions-architecture-diagram-index-js, component---src-pages-solutions-cloud-native-deployments-by-diagram-index-js, component---src-pages-solutions-developer-defined-infrastructure-index-js,
component---src-pages-solutions-gitops-index-js, component---src-pages-solutions-gitops-performance-management-js, component---src-pages-solutions-gitops-snapshot-js,
component---src-pages-solutions-kubernetes-multi-cluster-operation-index-js, component---src-pages-solutions-orchestration-management-index-js, component---src-templates-blog-single-js,
component---src-templates-integrations-js, component---src-templates-news-single-js, component---src-templates-resource-single-js, component---src-pages-cloud-native-management-catalog-jshead,
component---src-pages-cloud-native-management-generate-aws-architecture-diagram-jshead, component---src-pages-cloud-native-management-generate-gcp-architecture-diagram-jshead,
component---src-pages-cloud-native-management-generate-kubernetes-architecture-diagram-jshead, component---src-pages-cloud-native-management-kanvas-collaborate-index-jshead,
component---src-pages-cloud-native-management-kanvas-design-jshead, component---src-pages-cloud-native-management-kanvas-index-jshead, component---src-pages-cloud-native-management-kanvas-visualize-jshead,
component---src-pages-cloud-native-management-meshery-index-jshead, component---src-pages-cloud-native-management-meshery-integrations-jshead,
component---src-pages-cloud-native-management-meshery-meshery-operator-jshead, component---src-pages-cloud-native-management-playground-jshead, component---src-pages-index-jshead,
component---src-pages-learn-index-jshead, component---src-pages-learn-service-mesh-books-jshead, component---src-pages-pricing-jshead, component---src-pages-products-index-jshead,
component---src-pages-projects-image-hub-jshead, component---src-pages-projects-index-jshead, component---src-pages-solutions-architecture-diagram-index-jshead,
component---src-pages-solutions-cloud-native-deployments-by-diagram-index-jshead, component---src-pages-solutions-developer-defined-infrastructure-index-jshead, component---src-pages-solutions-gitops-index-jshead,
component---src-pages-solutions-kubernetes-multi-cluster-operation-index-jshead, component---src-templates-blog-single-jshead, component---src-templates-integrations-jshead, component---src-templates-news-single-jshead,
 component---src-templates-resource-single-jshead

---

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

• 📚 See contributing instructions.
• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.

Join the Layer5 Community by submitting your community member form.

[miacycle]

This is interesting. I'm curious as to how bad these conflicts still exist after the mdx plugin is upgraded.

[hustlernik]

How could I solve this problem? Guide me @leecalcote .

[hustlernik]

Will installing this plugin solves the issue gatsby-plugin-loadable-components-ssr?
Should I also consider adding postcss-ordered-values or postcss-discard-duplicates to help manage the order and deduplication of CSS?

[Aryam2121]

i want to work on this issue

[Ashparshp]

Thank you all @miacycle, @hustlernik, and @Aryam2121 for your interest in this issue! I'm currently looking into it. @hustlernik, your suggestions regarding gatsby-plugin-loadable-components-ssr and postcss-ordered-values/postcss-discard-duplicates are definitely worth exploring. However, since these approaches might not fully resolve the conflict, I’d recommend holding off for a bit as I dig deeper.

I’ll update you all soon. Thanks again for your enthusiasm and support!

[sudhanshutech]

@miacycle i wonder if this is related to mdx plugin . Thoug the mdx plugin is not updated but soon it will be ,there is a pr for that.
@hustlernik @Aryam2121 is anyone of you have you tried to using the gatsby loadable plugin, please try and come with solutions then we can get you assigned.

[Aryam2121]

ok

[Ashparshp]

@sudhanshutech, Ig we're already using it.

[sudhanshutech]

great, then it would be good if we found the root cause for this warnings . @hustlernik @Ashparshp @Aryam2121 are you ready to do so?

[Aryam2121]

yes

[hustlernik]

@sudhanshutech Yes, I am ready to take it up, searching for the root cause.

[Ruhi-Khan]

Amazing... this issue will definitely make us learn something new.