Add ignoreOrder option to avoid the OrderUndefinedError

[MicheleBertoli]

Following the discussions in:
/issues/80
/pull/81
css-modules/css-modules#12

This commit adds an ignoreOrder option to avoid the OrderUndefinedError when the order doesn't matter.

[bvaughn]

Would be fantastic to get this merged.

[kuzvac]

We really need this! :)

[lucasmotta]

Hey @sokra, I hate having to mention people on github issues, but we need to get some attention somehow.

I've noticed that there are quite a lot of pull requests open (like this one), and most are very useful things to have in this module. I understand that you and other contributors are very busy, but this is an essential package for webpack users.

Is there any way you could have a look into this? Or at least give some feedback?

Thank you ;)

[AlexGilleran]

Thanks @MicheleBertoli, this works perfectly for us - using composes without this is a massive pain. It'd be great if we could get it merged :).

[dtinth]

This PR got the compilation to succeed for me. Here’s the command I use to install it:

npm i --save-dev 'MicheleBertoli/extract-text-webpack-plugin#614c3bb1ed72587218aa644df12bbf514fb77a06'

[taion]

I'm hitting this as well.

I think this is a fairly meaningful problem – even in cases where there are no conflicts (i.e. no undefined behavior), this still causes problems with getting builds to succeed.

[rwngallego]

This PR has solved the problem I had with React CSS Modules when building the production dist:
ERROR: Order in extracted chunk undefined

Steps to solve it:

1. Install this PR with the command @dtinth has indicated.
2. In your webpack file:

new ExtractTextPlugin('styles.css', {
  allChunks: true,
  ignoreOrder: true   // <- Add this
})

[grrowl]

Is this still a problem with the latest beta 2.0.0-beta.3? In my limited testing I haven't seen the issue occur since switching back off MicheleBertoli's ignoreOrder branch.

edit: It's still a problem, Order in extracted chunk undefined

[grrowl]

I have rebased @MicheleBertoli's order-undefined-error branch to master of this repo and added some pull requests: https://github.com/grrowl/extract-text-webpack-plugin/tree/order-undefined-error

• Add ignoreOrder option to avoid the OrderUndefinedError (version 2) #241
• Update "Order undefined error" branch to [email protected] MicheleBertoli/extract-text-webpack-plugin#1

[tj]

👍 not sure what's going on here but also busted with CSS modules, is no one using it in production?

[taion]

This especially makes sense with CSS modules because CSS modules doesn't guarantee any deterministic ordering anyway

[felixsanz]

why does this happens? i don't have circular dependencies

[joshwiens]

@felixsanz - We need to get a stable 2.0 out. This has been added to the 2.1 milestone, which we will begin working on as soon as 2.0 is @latest

For reference, if you need something addressed you will have more success directing the request to either myself or bebraw. Tobias, Sean & Kees are focused on webpack/webpack anything under webpack-contrib is handled by a separate group now so we can address issues faster and bump up the frequency of releases for all plugins / loaders.

You can ping me on here, or if it's pressing on twitter (same name) which will ding my cell

[tj]

I'm still kinda confused, does literally no one use css modules in production? Or is there a workaround? I ironically ditched browserify just for the nicer CSS modules implementation, but it's broken for production haha.

[okonet]

It works for some cases I guess. At least I have used it in production. It stopped working as soon as I introduced variables aka values.

[taion]

I have a temporary fork on npm under my namespace with this code. We've been running with that for the last several months.

[taion]

https://www.npmjs.com/package/@taion/extract-text-webpack-plugin in case I was unclear

[naoufal]

@tj I've been doing the same as @taion.

[sunny-g]

@tj I don't know what's changed since I last had this issue, but since upgrading to webpack 2.2.0, version 2.0.0-beta.5 of this plugin has been working fine for me in production. :/

[tj]

@sunny-g interesting! I'll try upgrading soon and see how that goes

[felixsanz]

I updated to the latest versions today and it's not fixed. Its tagged to be fixed on 2.1

@tj, if you want a nice workaround, try this:

1. Install postcss-modules-values plugin. https://github.com/css-modules/postcss-modules-values
2. Create a single css file where you import all your shared stuff. For example index.css, and it should contain this:

@import "./layout.css";
@import "./typography.css";
@import "./elements.css";
@import "./animations.css";

This way, this is the only place where you import those files, so the order will be always the same. (No more issue).

3. To make use of them, in your components use something like:

@value typography: "../../styles/composition/index.css";
@value elements: "../../styles/composition/index.css";

.whatever {
  composes: defaultLink from typography;
  composes: defaultInput from elements;
}

What happened is that you import your files only 1 time in your code, and then you create values for those classes. And with the postcss plugin you can compose those shared classes from the value (not directly from the file).

Of course, since you are importing those values from index.css, in my example typography is just a copy of elements, both have all the shared classes, but if you don't duplicate the shared classes names it works fine. You can just do:

@value shared_classes: "../../styles/composition/index.css";

.whatever {
  composes: defaultLink from shared_classes;
  composes: defaultInput from shared_classes;
}

But i prefer duplicating them because when i compose the classes it's more clear the original location of the shared class. (and it doesn't alter the size, it just doesn't matter)

Hope it helps.

[bebraw]

Included in 2.0.0-rc3. I prioritized this a bit as it's just a flag and the issue affects a lot of people.

[MatteoGabriele]

Hi @bebraw
So this issue is only fixed for webpack 2?

[bebraw]

@MatteoGabriele Correct.

[MatteoGabriele]

@bebraw any chance of a workaround for webpack1 "owners"? I need to put a project in production today and I don't know how to fix it.

thanks! :)

[bebraw]

@MatteoGabriele Probably the fastest way for you would be to fork the webpack 1 branch and patch that. If you have time, PRing that fix could be nice so you could consume an official version after that.

[MatteoGabriele]

@bebraw I was thinking about that one. is this the only line i need to change?

extract-text-webpack-plugin/index.js

Line 312 in 10781f5

if(!options.ignoreOrder && isInvalidOrder(a, b)) {

[bebraw]

@MatteoGabriele Correct. The fix itself is very simple. 👍

[MatteoGabriele]

@bebraw Thanks man! I'm going to do it!

[delijah]

Any progress on this?! This is quite annoying!

[bebraw]

@delijah I don't think we'll see a webpack 1 specific release. Maybe the fastest way to get the fix there is to branch the webpack 1 version and apply the fix there although migrating to webpack 2 is the preferred way.

[delijah]

But this is not really fixed in webpack 2, isn't it?

[bebraw]

@delijah Please open a separate issue if the PR didn't work for you.

[delijah]

By using version 2.1.0 of extract-text-webpack-plugin, webpack 2.4.1 and the config options

new ExtractTextPlugin('styles.css', {
  allChunks: true,
  ignoreOrder: true   // <- Add this
})

it seems to work for me now. Sorry for the confusion, i have got lost in dependencies and the sheer amount of pullrequests and issues regarding this issue.

Thank you soooo much for providing a solution for this!!!

[gl2748]

Slight twist on @delijah ...

This works for me:

new ExtractTextPlugin({
  filename: 'styles.css',
  ignoreOrder: true
}),

Per: https://github.com/webpack-contrib/extract-text-webpack-plugin/blob/master/index.js#L112-L124

PR: To update this error text, here:
#539

Versions in use:

"webpack": "2.4.1",
"extract-text-webpack-plugin": "2.1.0",

[ro-savage]

@bebraw @MicheleBertoli - Can you explain how ignoreOrder: true would affect regular css imports?

facebook/create-react-app/pull/2285 allows both css modules and regular css in the same project. To fix cssmodule errors we'd like to add ignoreOrder: true, but I am unsure if this will negatively affect those who aren't using css modules (or are using both).