will hang on "95% emit(ting)" if output.path contains reserved characters

[bitttttten]

From those coming from Google

It seems that hanging on "95%" is a symptom from many different issues. If there is an uncaught problem at a certain point in your build, webpack will just get stuck here. It doesn't mean it is because of reserved characters for you (although it might be). The comments in this thread may help you debug your own issue. Godspeed!

I'm submitting a feature request

Webpack version:
1.10.x & 2.x

Please tell us about your environment:
Windows 10

Current behavior:

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

Webpack 1.13.2: hangs on 95% emit
Webpack v2.1.0-beta.21: hangs on 95% emitting

Expected/desired behavior:

Perhaps throw an error if output.path contains reserved characters?

What is the motivation / use case for changing the behavior?

To save debugging time for future people who try to use reserved characters names in the output path :,)

I'm happy to set up a PR on this if need be, I just wanted to make it known here.. perhaps there's a reason to this.

[wegry]

@bitttttten Mind posting your webpack.config? I'm running into a similar issue with Webpack 2's 25th beta. It seems like the file-loader is the only loader not properly emitting though.

[wegry]

We're using Node 6.7 and webpack@2.1.0-beta.25.

  output: {
    path: '../../../../anotherPath',
    filename: '[name].js'
  }

loaders: {
      {
        test: /\.(gif|woff|woff2|svg|png|ttf|eot|otf)$/,
        loader: 'file',
        query: {
          name: '[path][name]-[hash].[ext]',     // Removing [path] works but breaks page at runtime
        },
      }
}

[bitttttten]

This will happen if your [path] contains invalid characters. Just to confirm, are you running a Windows OS?

[wegry]

@bitten I'm using Windows Server 2008. The path contains reserved characters as well (''), but works with webpack 2.1's beta-22.

On Oct 10, 2016, at 6:43 AM, bitten notifications@github.com wrote:

This will happen if your [path] contains invalid characters. Just to confirm, are you running a Windows OS?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.

[bitttttten]

My webpack config just looked like yours or any boiler plate config. I was just trying to generate a filename with a timestamp so it ended up like "18:44.js" and just changed it to "18-44.js".

Perhaps they've fixed this by swapping out reserved characters for safe ones in Webpack 2. A way to fix this in Webpack 1 is to dig into your loader and do some kind of regex replace on the name.

[howdoicomputer]

I'm getting this problem but I don't think my path has reserved characters.

[jsgoupil]

Yep... failure...
my output path is absolute so using something like C:\Users\jsgoupil\AppData\Local\Temp\___deployTemp17920 stays stuck on emitting.

But I'm not sure this is the issue?
Because I'm using some boilerplate code and the output is

helpers.root(OUTPUT + '/wwwroot/dist')

This will point usually to D:\root... and it works when I'm not using my prod config.

[jsgoupil]

Alright, for some people the culprit might be this helpers.root that you got from AngularClass.
If you pass in a full path to that helper.root, you'll get something like

D:\git\path1\D:\path2

[ppolyzos]

I am not sure this helps anyone but I had the same issue while running node v7.2.1. I switched to 6.9.2 and stopped having this problem.

[manuelbieh]

Same problem here with Windows 10 + webpack 1.14.0 + Node 6.9.0 but it only hangs when I add ManifestPlugin to my list of plugins. If I leave it out, everything works fine. No matter what my output.path is (in my case it is path.resolve('./web'))

[MartinJohns]

I'm having the same issue. The culprit seems to be the : character. When the path contains this character emit gets stuck and it will never finish.

[rainice]

Hi for me the issue is the [path] placeholder in file-loader. It uses context so you have to define
plugins: [ new webpack.LoaderOptionsPlugin({ options: { context: __dirname}}) ]
for it to work.
Alternatively, you can remove [path] if your location is already __dirname.
Also try using "./" instead of __dirname.

[sudsy]

Also having this issue, Suggestion from @rainice fixed it.
It doesn't throw an error just hangs at 95%

[homeslicesolutions-zz]

@rainice fixed my issue too. I was using the ExtractTextPlugin. I had to change this:

new ExtractTextPlugin({
  filename  : path.resolve(__dirname, 'dist/[name].bundle.css'),
  allChunks : true
})

to

new ExtractTextPlugin({
  filename  : './dist/[name].bundle.css'),
  allChunks : true
})

[SirPole]

Hey guys, I was stuck with this problem for a few hours now, tried everything I found posted here and elsewhere (node-sass issues, file-loader issues).

What eventually solved it for me was removing noInfo option from my dev config. Not really sure why, what it changes internally, but maybe it will help someone else... :)

[jackhftang]

Same here on windows

[ProphetDaniel]

Can somebody help with this issue? skevy/graphiql-app#67

[bitttttten]

@ProphetDaniel I had to dig into the webpack source files in my node_modules folder and start dropping console logs all over the place to see where it stopped.

It took me a good while to find out my original issue, and from seeing this thread it seems like there isn't one reason why this happens. Your fix may not be listed here. So I wish you good luck!

[ProphetDaniel]

@bitttttten , did you also try upgrading to webpack 2 approach? skevy/graphiql-app#67 (comment)

[bitttttten]

No, I haven't looked at this issue for a bit over 2 years now. I just stopped using reserved characters in my output path 😅

I think this sympton of being stuck on 95% emitting can be caused by many things and many things will solve it for different people.

[fjswhl]

Webpack 4, My output path has no reserved charaters and I am not using __dirname, any method listed here do not work for me. It a sad story

[bitttttten]

@fjswhl

I had to dig into the webpack source files in my node_modules folder and start dropping console logs all over the place to see where it stopped.

If you are really stuck, you may have to go down this route 😬

[lkiarest]

Same problem here with Windows 10 + webpack 1.14.0 + Node 6.9.0 but it only hangs when I add ManifestPlugin to my list of plugins. If I leave it out, everything works fine. No matter what my output.path is (in my case it is path.resolve('./web'))

hi, I have the same problem with ManifestPlugin and Mac, and have you fixed it yet ?

[bitttttten]

Updated the top post to add a disclaimer since it seems that many people come to this issue for many different reasons.

[schel4ok]

Also have this problem when run npm run watch

λ npm run watch

> @ watch C:\laragon\www\mysite
> npm run development -- --watch
> @ development C:\laragon\www\mysite

> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js "--watch"

10% building 1/1 modules 0 active
webpack is watching the files…

95% emitting unnamed compat plugin

I cannot understand reason of this problem.
Last 2 days I didn't touch webpack.mix.js. I was busy only to edit scss and css files.
And npm run watch was working during these days without any problem.
But in one moment I got this error in console and I cannot understand how I can return to normal state.
Assuming I did something wrong in scss and css files I tried to delete mix.sass and mix.styles from webpack.
But it is not solving problem.

here is my webpack.mix.js

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

mix.react('resources/js/app.js', 'public/js');

mix.scripts([
    'public/js/app.js',
    'resources/js/includes/ral.js',
    'resources/js/includes/script.js'
],  'public/js/app.js')
	.sourceMaps()
	.version();

mix.sass('resources/sass/app.scss', 'public/css');
mix.styles([
    'public/css/app.css',
    'resources/sass/style.css'
],  'public/css/app.css')
	.sourceMaps()
	.version();

[schel4ok]

Trying to find the problem I found that if I delete string mix.react('resources/js/app.js', 'public/js'); from webpack it will remove error.
Then I changed these 2 strings like that:

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

Then I see that npm run commands works, but app.css and app.js are compiled to publicc instead css and js subfolders.
Then I change back and now all works without error at 95%

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

But still I cannot understand what is the problem, because I didn't touch webpack for a few days. So it is not my stupid fault os mistype and I also didn't do something special to remove this error.

[yinsang]

rm -rf node_modules
rm package-lock.json
npm i
Works for me.
I had upgrade webpack-dev-server and met this problem.
No code had changed, but still hang up.
I guess that node processes is conflict in not compatible packages.

[pvsgit]

Trying to find the problem I found that if I delete string mix.react('resources/js/app.js', 'public/js'); from webpack it will remove error.
Then I changed these 2 strings like that:

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

Then I see that npm run commands works, but app.css and app.js are compiled to publicc instead css and js subfolders.
Then I change back and now all works without error at 95%

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

But still I cannot understand what is the problem, because I didn't touch webpack for a few days. So it is not my stupid fault os mistype and I also didn't do something special to remove this error.

I have run into the same error, using the following environment:

• Host machine Windows 10
• Laravel 7.21.0
• Homestead 10.9.1 + VirtualBox Ubuntu 18.04.4 LTS (GNU/Linux 4.15.0-96-generic x86_64)

I tried all the potential workarounds in this thread. The only one that worked for me was the above suggestion from @schel4ok.

In other words when I modify my webpack.mix.js as follows,
mix.js('resources/js/app.js', 'public/app.js') .sass('resources/sass/app.scss', 'public/app.css');
the build completes successfully, creating files public/app.js and public/app.css.

When I move these files into the correct folders (public/js and public/css respectively) my application works correctly.

However, when I reset webpack.mix.js to read
mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css');
the file public/css/app.css is built correctly, but public/js/app.js is created with zero bytes, and the process terminates with the message 95% emitting unnamed compat plugin.

I have not had time yet to work through webpack files placing console log messages, it seems that is the logical next step.

In the meantime this quick and dirty fix allows me to keep working on my project.

[vankop]

Should work with webpack@latest. Feel free to report new issue with reproducible repo.