webpack hangs at on "95% emit" / "95% emitting"

Question

This is my production webpack config. The two quotes in the title refer to webpack2 and webpack respectively. Both hang for me with a similar error.

This is my command to trigger the build

set NODE_ENV=production && webpack --config config/webpack.config.prod.js --progress --display-error-details

What am I missing?

Here is the output after running npm run pack which correlates to my production webpack build:

$ npm run pack

> somedir@ pack C:\somedir
> set NODE_ENV=production && webpack --config config/webpack.config.prod.js --progress --display-error-details
                           95% emitting

There is no error message, webpack is hanging on "95% emitting" :,) — bitten, Aug 22 '16 at 17:57
Define "hang"? How long did you leave it for? How big is the output file you're expecting? Are you using SourceMaps? Are you using a minifier like Uglify? — loganfsmyth, Aug 22 '16 at 19:00
@loganfsmyth i've let it run for 5 minutes, 30 minutes, 45 minutes, and now 2 hours (since i posted the question). the output can be a simple console.log to a small react component rendering to the dom. both instances hang. yes i'm using uglify and `devtool: 'source-map'`, although i've removed both from my config (stripped it down to just the entry point). i'm making some progress now.. — bitten, Aug 22 '16 at 21:05
i've fixed it. it looks like having a colon in the `output.path` throws it off. `output.path: './build'` is fine, `output.path: '/build/this:is:not:okay/` is not okay — bitten, Aug 22 '16 at 21:06
This would be a good situation to run node 6.3 --inspect flag and run a heap snapshot in dev tools. — Sean Larkin, Aug 22 '16 at 21:40
of course it makes sense since they are reserved characters.. but still, derp. thanks loganfsmyth and @martriay for your suggestion however! — bitten, Aug 22 '16 at 22:15

score 9 · Accepted Answer · answered Aug 29 '16 at 12:23

9

So I figured this out. It turns out I was including reserved characters in my output path. I've since opened an issue on github.

When using an invalid or reserved character in the output.path webpack will hang with no output. Running with the --progress flag will show that it's hanging on 95% emit(ting) (suffix depending on webpack version).

answered Aug 29 '16 at 12:23

bitten

2,463
2
25
44

3

Thanks for the pointer, to figure this out as well I ran `node --inspect node_modules/webpack/bin/webpack.js` and then opened output URL in chrome that allowed me to debug code. I then saw it got stuck in `mkdirp` so added a `console.log` in the function in that node module to see what path was triggering the infinite loop. The issue for me was a path like `c:\path\to\output\c:\source\file` and threw an error due to the colon. – Michael Jul 16 '17 at 06:30
2

Same issue here, but my root cause was a SASS file that triggered a missing variable error, which webpack processed as JS (`throw new Error`) and included it as a file. Which on Windows has an absolute source file path, including the `:` character which triggered the mkdirP function infinite loop. – Bart Verkoeijen Nov 08 '17 at 02:03
1

holy moly what a ride – bitten Nov 08 '17 at 12:22

score 4 · Answer 2 · answered Aug 31 '18 at 19:40

In my case (Windows environment and laravel-mix) there weren't any incorrect characters in the path, since even a dead simple configuration didn't work. It was just webpack (webpack@3.12.0) doing something stupid of his own and the problem has been solved using publicPath option like this:

mix.options({
    publicPath: ('./')
});

which according to the documentation:

allows you to specify the base path for all the assets within your application

Alternatively you can use:

mix.setPublicPath('./');

score 2 · Answer 3 · answered Jun 16 '18 at 07:29

2

I use laravel-mix as a standalone. This is my my config:

let mix = require('laravel-mix');

mix.setPublicPath('./')
   .js('resources/js/app.js', 'js')
   .sass('resources/sass/app.scss', 'css');

This worked for me.

answered Jun 16 '18 at 07:29

Rijo

2,568
1
22
30

score 2 · Answer 4 · answered Nov 06 '19 at 12:37

2

I fixed by upgrading to `webpack@4.41.2`

answered Nov 06 '19 at 12:37

Orkhan Alikhanov

9,122
3
39
60

score 1 · Answer 5 · answered Nov 15 '17 at 16:30

In my case I was trying to use Angular 4, Webpack 3, AOT and lazy loading.
Using @ngtools/webpack and AotPlugin made it freeze at 95%.

What fixed was:
1). Install node-sass with npm install node-sass --no-bin-links, because it was not installed automatically with sass-loader.
2). Adding these loaders for the SCSS/CSS files (even inside node modules):

        {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader'
            ]
        },
        {
            test: /\.scss$/,
            use: [
                'raw-loader',
                'sass-loader'
            ]
        }

score 1 · Answer 6 · answered Dec 08 '17 at 13:01

1

npm rebuild node-sass

solved ist by me.

answered Dec 08 '17 at 13:01

Ralf Stich

11
2

score 1 · Answer 7 · answered Jan 14 '19 at 06:08

1

This error also occurs if you have invalid import. Import referring from other files which is not getting compiled.

answered Jan 14 '19 at 06:08

Chetan Laddha

993
8
22

score 1 · Answer 8 · answered Dec 09 '20 at 20:39

This will also happen if you use indexTransform property and the function is throwing an error. To handle this you can wrap your function in a try/catch;

module.exports = (targetOptions, indexHtml) => {
  try {
    ...
  } catch (error) {
    console.error(error)
    process.exit(1) // Kills webpack
  }
}

score 0 · Answer 9 · answered Feb 20 '20 at 18:32

0

Running ng build and node --inspect node_modules/webpack/bin/webpack.js should give output of the problem paths

answered Feb 20 '20 at 18:32

aabiro

3,842
2
23
36

score 0 · Answer 10 · answered Jun 19 '20 at 13:23

0

I have missclick when copy index.html (cut this file from angular folder). After copy them back problem is gone.

answered Jun 19 '20 at 13:23

Andreas Griechihin

41
1
5

score 0 · Answer 11 · edited Nov 08 '20 at 22:17

0

I had the same issue in Angular when I was setting up a project. The problem was that I wrongly placed the index.html file out of ./src folder.

edited Nov 08 '20 at 22:17

Phoenix

1,045
1
14
22

answered Nov 08 '20 at 20:13

Mantzoros Elias

1
1

score 0 · Answer 12 · answered Aug 25 '21 at 01:50

0

In my case it was something with the directory defined in output.path. After deleting it's content (different folders with different bundles) everything was working again.

answered Aug 25 '21 at 01:50

FullStack Alex

1,783
19
31

score 0 · Answer 13 · answered Oct 20 '21 at 19:55

0

I had the same problem. I was missing a closing > on a <div>.

Webpack (mix) would hang instead of just failing to compile and I'm not sure why. Hopefully, this can save someone a few hours of going down the wrong rabbit hole.

answered Oct 20 '21 at 19:55

Joey Carlisle

586
4
12

webpack hangs at on "95% emit" / "95% emitting"

13 Answers13

I fixed by upgrading to `webpack@4.41.2`

Linked

webpack hangs at on "95% emit" / "95% emitting"

13 Answers13

I fixed by upgrading to webpack@4.41.2

Linked

I fixed by upgrading to `webpack@4.41.2`