Order in extracted chunk undefined - css_modules

[zoeabryant]

ERROR in ./site/components/header/style.css
Order in extracted chunk undefined

ERROR in ./site/components/footer/style.css
Order in extracted chunk undefined

Caused by this line

One suggested fix here on css_module's issues. Basically says import from one file, not multiple, as we cannot guarantee the order things get imported in.

[tabazevedo]

Could we potentially have a css/index.css where we import all the stuff in _colors.css, _fonts.css etc. and expose it in one place? Essentially what that issue suggests doing, but more manual.

[Roisi]

@asavin bit of a loss with this one

[asavin]

I'd say it's a low priority issue, most likely related to this:

Note that composing should not form a circular dependency. Elsewise it's undefined whether properties of a rule override properties of a composed rule. The module system may emit an error.
https://github.com/css-modules/css-modules#dependencies

[grahammendick]

The solution suggested by @tabazevedo works. Here are the steps:

• Created a _style.css in the css folder and copied all the styles from the separate files in the css folder (including _fonts.css) into there
• Put all the value definitions at the top and the class definitions at the bottom
• Deleted all @value ... from ... from _style.css because all references are local now
• Deleted all composes ... from ... from _style.css because all references are local now
• Globally replaced all references to common css files, e.g, replaced _colors.css with _style.css

And here’s the screen print showing that all ‘Order in extracted chunk undefined’ errors have gone from website honestly (only website-next ones left). It also shows that a bit of the site correctly styled.

If we don't like all the styles in one file then we could look at the PostCss import plugin

[jaredh159]

Adding the ignoreOrder: true flag fixed the issue for us:

const extract = new ExtractTextPlugin({
  filename: 'css/app.css',
  allChunks: true,
  ignoreOrder: true, // <-- add this ¯\_(ツ)_/¯
});

[markholland]

Likely addressed in commit