Conflicting order in css modules causes failed CI

[RyanDawkes]

Description
When trying to run yarn build, Mini CSS throws a warning regarding the order of CSS modules. In a CI process, this causes the run to fail unless process.env.CI is set to false (which is not ideal behaviour).

To Reproduce Steps to reproduce the behavior:

1. In CLI, run yarn build-web
2. Inspect build logs to see that Mini CSS is producing a "Conflicting error" warning

Expected behavior
The CSS modules should build without warnings.

Screenshots If applicable, add screenshots to help explain your problem.

Additional context Add any other context about the problem here.
I am using GitHub Actions to product my build. Simple workflow script that installs and builds the template

[Gnito]

Did that happen on a fresh unmodified copy of this template?
We use Circle CI (which sets CI env variable) and the build check does go through.

I've seen this kind of conflict a couple of times when the import order of certain files/modules is not fixed.
This is partly the reason why shared components are imported through components/index.js, since it ensures that those modules are loaded in a specific order.

E.g. have you added Styleguide examples? Those examples might reveal that the CSS imports of child components are not always following the same order, which then throws this warning.

[RyanDawkes]

I've figured out the issue - I create two new panel components (EditListingAboutPanel and EditListingSpecsPanel), and I had them imported in src/containers/EditListingPage/EditListingWizard/EditListingWizardTab.js as so:

import EditListingAboutPanel from './EditListingAboutPanel/EditListingAboutPanel';
import EditListingAvailabilityPanel from './EditListingAvailabilityPanel/EditListingAvailabilityPanel';
import EditListingDetailsPanel from './EditListingDetailsPanel/EditListingDetailsPanel';
import EditListingDeliveryPanel from './EditListingDeliveryPanel/EditListingDeliveryPanel';
import EditListingLocationPanel from './EditListingLocationPanel/EditListingLocationPanel';
import EditListingPhotosPanel from './EditListingPhotosPanel/EditListingPhotosPanel';
import EditListingPricingPanel from './EditListingPricingPanel/EditListingPricingPanel';
import EditListingPricingAndStockPanel from './EditListingPricingAndStockPanel/EditListingPricingAndStockPanel';
import EditListingSpecsPanel from './EditListingSpecsPanel/EditListingSpecsPanel';

The issue seems to be that I was importing the EditLisingAboutPanel above the other panels. When I moved it down below EditListingPricingAndStockPanel, it fixed the issue

[Gnito]

This is a pretty good description on how to debug these:
facebook/create-react-app#5372 (comment)

[Gnito]

Closing this - as the issue seems to be resolved for now.