New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add ignoreOrder option to avoid the OrderUndefinedError #166

Merged
merged 1 commit into from Feb 4, 2017

Conversation

Projects
None yet
@MicheleBertoli
Copy link
Contributor

MicheleBertoli commented Mar 19, 2016

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

This comment has been minimized.

Copy link

bvaughn commented Apr 7, 2016

Would be fantastic to get this merged.

@kuzvac

This comment has been minimized.

Copy link

kuzvac commented Apr 11, 2016

We really need this! :)

@lucasmotta

This comment has been minimized.

Copy link

lucasmotta commented May 4, 2016

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

This comment has been minimized.

Copy link

AlexGilleran commented May 16, 2016

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 :).

emmenko added a commit to emmenko/extract-text-webpack-plugin that referenced this pull request May 20, 2016

@dtinth

This comment has been minimized.

Copy link

dtinth commented May 31, 2016

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

This comment has been minimized.

Copy link

taion commented Jun 16, 2016

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.

mhink added a commit to mhink/elevenohthree-client that referenced this pull request Jul 20, 2016

@taion taion referenced this pull request Jul 22, 2016

Closed

Optional Sass Support #78

@rwngallego

This comment has been minimized.

Copy link

rwngallego commented Aug 17, 2016

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

This comment has been minimized.

Copy link

grrowl commented Aug 30, 2016

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

This comment has been minimized.

Copy link

grrowl commented Aug 31, 2016

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

stefwalter added a commit to stefwalter/cockpit that referenced this pull request Nov 1, 2016

Fix failure of 'webpack --watch' with extracted chunks
This should fix the strange failure of 'webpack --watch' with
the following message:

 Order in extracted chunk undefined

There are upstream pull requests in webpack which work to fix
this, but for now we just work around the issue.

webpack-contrib/extract-text-webpack-plugin#166

mvollmer added a commit to cockpit-project/cockpit that referenced this pull request Nov 2, 2016

Fix failure of 'webpack --watch' with extracted chunks
This should fix the strange failure of 'webpack --watch' with
the following message:

 Order in extracted chunk undefined

There are upstream pull requests in webpack which work to fix
this, but for now we just work around the issue.

webpack-contrib/extract-text-webpack-plugin#166

Closes #5288
@tj

This comment has been minimized.

Copy link

tj commented Jan 3, 2017

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

@taion

This comment has been minimized.

Copy link

taion commented Jan 3, 2017

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

@felixsanz

This comment has been minimized.

Copy link

felixsanz commented Jan 27, 2017

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

@bebraw bebraw added this to the 2.1 milestone Jan 28, 2017

@d3viant0ne

This comment has been minimized.

Copy link
Member

d3viant0ne commented Jan 28, 2017

@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

This comment has been minimized.

Copy link

tj commented Jan 28, 2017

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

This comment has been minimized.

Copy link

okonet commented Jan 28, 2017

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

This comment has been minimized.

Copy link

taion commented Jan 28, 2017

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

This comment has been minimized.

Copy link

taion commented Jan 28, 2017

@naoufal

This comment has been minimized.

Copy link

naoufal commented Jan 28, 2017

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

@sunny-g

This comment has been minimized.

Copy link

sunny-g commented Jan 28, 2017

@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

This comment has been minimized.

Copy link

tj commented Jan 28, 2017

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

@felixsanz

This comment has been minimized.

Copy link

felixsanz commented Jan 28, 2017

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).

  1. 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.

@d3viant0ne d3viant0ne force-pushed the webpack-contrib:master branch 2 times, most recently from 664e78c to 76a171d Jan 28, 2017

@JoeStanton JoeStanton referenced this pull request Jan 31, 2017

Closed

Webpack 2 #355

0 of 16 tasks complete

@joscha joscha referenced this pull request Feb 4, 2017

Closed

`chunks` option #80

@bebraw bebraw merged commit 10781f5 into webpack-contrib:master Feb 4, 2017

4 checks passed

codecov/patch Coverage not affected when comparing a599665...614c3bb
Details
codecov/project 0.00% remains the same compared to a599665
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
licence/cla Contributor License Agreement is signed.
Details
@bebraw

This comment has been minimized.

Copy link
Contributor

bebraw commented Feb 4, 2017

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

This comment has been minimized.

Copy link

MatteoGabriele commented Feb 7, 2017

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

@bebraw

This comment has been minimized.

Copy link
Contributor

bebraw commented Feb 7, 2017

@MatteoGabriele Correct.

@MatteoGabriele

This comment has been minimized.

Copy link

MatteoGabriele commented Feb 7, 2017

@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

This comment has been minimized.

Copy link
Contributor

bebraw commented Feb 7, 2017

@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

This comment has been minimized.

Copy link

MatteoGabriele commented Feb 7, 2017

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

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

@bebraw

This comment has been minimized.

Copy link
Contributor

bebraw commented Feb 7, 2017

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

@MatteoGabriele

This comment has been minimized.

Copy link

MatteoGabriele commented Feb 7, 2017

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

d-low added a commit to d-low/d-low.com_v3 that referenced this pull request Feb 23, 2017

Fix "Order in extracted chunk undefined" error
- Use temp fix documented here: webpack-contrib/extract-text-webpack-plugin#166 (comment)
- Above fix is included in webpack 2.0 and will be resolved in upgrade
@delijah

This comment has been minimized.

Copy link

delijah commented May 8, 2017

Any progress on this?! This is quite annoying!

@bebraw

This comment has been minimized.

Copy link
Contributor

bebraw commented May 8, 2017

@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

This comment has been minimized.

Copy link

delijah commented May 8, 2017

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

@bebraw

This comment has been minimized.

Copy link
Contributor

bebraw commented May 8, 2017

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

@delijah

This comment has been minimized.

Copy link

delijah commented May 8, 2017

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!!!

@keepitreal keepitreal referenced this pull request May 30, 2017

Closed

Add ignoreOrder check #520

@gl2748

This comment has been minimized.

Copy link
Contributor

gl2748 commented Jun 9, 2017

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",

terebentina added a commit to terebentina/react-scripts-cssmodules that referenced this pull request Nov 12, 2017

Prevent build errors with many small css modules
There's a problem when building from a codebase that is using many small css modules - you get something like
```
Failed to compile.
Order in extracted chunk undefined
```
when you run `build`.
A "manual" solution would be to combine all small css modules (`links.module.css`, `buttons.module.css`, etc) into a single one (say, `styles.module.css`) and only compose from that one. It would be a shame to, though.
ExtractTextPlugin has a fix for this namely the `ignoreOrder: true` option.
See https://github.com/webpack-contrib/extract-text-webpack-plugin
Discussion with the fix: webpack-contrib/extract-text-webpack-plugin#166 (comment)
Comment with the "manual" fix: css-modules/css-modules#12 (comment)
@ro-savage

This comment has been minimized.

Copy link

ro-savage commented Nov 13, 2017

@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).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment