App stuck at 'wait until bundle finished: /assets/app.js'

[harrisrobin]

So, for some reason the app won't get past wait until bundle finished: /assets/app.js when I run 'npm start' or 'npm run serve'.

Also, 'npm run dist' gets stuck at > copyfiles -f ./src/index.html ./src/favicon.ico ./dist

Anyone running into this issue as well?

I am on node v5.0.0 Latest version of the generator.

I have been using this for a week now without a problem, so im not sure what is causing it now.

[harrisrobin]

UPDATE: I am now able to reproduce this.

Only way to get out of this problem that throws no error is by going to Main.js , removing all the components import, restarting the server and when app is ready putting them back in.

Anyone who runs into this, please see if you can reproduce as well. I will leave this open but feel free to close if no one runs into this issue.

[harrisrobin]

UPDATE2: even though I got around the issue above, npm run dist still does not get past > copyfiles -f ./src/index.html ./src/favicon.ico ./dist

[harrisrobin]

Removing the components again, I get this when running npm run dist

I'm kind of lost with this generator haha..

[weblogixx]

Hello @HarrisRobin,

Interesting, I do not had such problems once. Could you please provide a link to the code where the error happens? Also, which operating system are you working on?

[harrisrobin]

@weblogixx I am on OSX El Capitan. and I cannot host it because I can't even build the project. However, here is a repo: https://github.com/HarrisRobin/react-flux-movie-UI

I am really stuck and at this point the only thing i can try is regenerating the project and migrating all my code but I would be curious as to why this is happening in the first place.

[weblogixx]

After just skimming through the code a bit, the only thing that I see that could cause problems is the way you incloude node-bourbon in the config.

I will have a closer look over the weekend.

[harrisrobin]

@weblogixx interesting. what red flags do you see? @import bourbon; is working just fine fyi.

If you pull my project, you can run it only after you do the steps i outlined before (make sure the app works without including all the components and only then include them back in and wait for the app to rebuild).

[weblogixx]

Hi @HarrisRobin,

had another look at it. There are known problems with bourbon in webpack configs. Someone worked around these and build https://github.com/lowik/bourbon-sass-loader. Maybe you should try this out. When I check out your repo and just remove the Aside.scss require statement it builds. Seems like it really has to do with the way that webpack tries to build the dependencies.

As I am no sass expert by myself, someone else may help here?

[harrisrobin]

@weblogixx thanks for the feedback. I will try the bourbon-sass-loader and report back if it works :)

[harrisrobin]

@weblogixx just wanted to come back and say that i don't think the problem is with bourbon. removing bourbon completely did not solve my issue and I still have to do the same thing in order to get the project to compile and work (remove the highlighted block of stuff in the screenshot, re-run npm start and then add them again)

I will keep digging and figure out what's going on. I'll also try doing it from a project from scratch and see.

[harrisrobin]

Yeah so unless I reduce the amount of components or remove them before i run npm start then the app never finishes to bundle and it gets stuck on :

webpack: wait until bundle finished: /assets/app.js infinitely. I ruled out bourbon as the issue and don't really know what's going on.

[weblogixx]

@HarrisRobin: I think I identified the problem know. https://github.com/jtangelder/sass-loader/issues/168 brought me closer to it. Seems like the sass version shipped with the generator is way too old. In the meantime it made a jump from 1.0 to 3.1. The following works for my setup, hope for yours too:

• First, npm uninstall sass-loader
• Remove the sass-loader from npm config
• Run npm install --save sass-loader. It should now be installed with the latest version (3.1.x)
• Start your project.

After going this steps, it should work the way it is expected. There was a threadpool limit that gets hit in the old version of sass-loader and node-sass. This seems to cannot be fixed without updating the plugin.

In any case, I will update the dependencies for sass.

Please tell me if this helps.

[harrisrobin]

@weblogixx spot on! that was it.

thanks for the fix :) cheers

[tusharmath]

@weblogixx I am facing the exact same issue, but I am not using any of above mentioned packages. —

webpack: bundle is now VALID.
webpack: bundle is now INVALID.
webpack: wait until bundle finished: /

The index.html file is being created via a custom plugin that I have written. It's highly possible that's the culprit but I am not sure why. My logic is simple — I listen to the emit event on the compiler and create my index.html file. Once the file is generated I call the callback.

[weblogixx]

Hi @tusharmath,

have you tried with the built in index.html? If you need a custom index.html generated, you could also have a look at https://github.com/ampedandwired/html-webpack-plugin.

If not, please provide a link to your repo if this is possible.

Thanks!

[tusharmath]

@weblogixx Thanks for responding. There was a ridiculously lame bug in my code. I was using RxJS to listen to the emit event using the fromCallback operator which only gets fired once.

I should have used the fromEventPattern to convert the emit events into a stream and then consume.

[nrvakil]

using an older version of node worked for me: v12.18.4 to v10.18.1