Laravel-mix: Stuck at 95% Emitting

[tylernathanreed]

Environment:

• Laravel Mix Version: 1.4.2
• Node Version: 6.11.2
• NPM Version: 5.3.0
• OS: Windows 7 (Using WAMP)

Description:

I've let this issue sit for awhile, as I've been researching the issues on this repository to fix things myself, and I can't for the life of me get this to work.

Essentially, on both my working project, and a brand new Laravel installation (5.4.33), when I run:

npm run dev

it looks like it's working, but then it sits at 95% emitting.

Here's my console output:

F:\Links\www\laravel\54>npm run dev

> @ dev F:\Links\www\laravel\54
> npm run development

npm WARN invalid config loglevel="notice"

> @ development F:\Links\www\laravel\54
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-
modules --config=node_modules/laravel-mix/setup/webpack.config.js

 95% emitting

I tried waiting awhile, in hopes that it's just being really slow, but I gave up after 5 minutes of nothing new (From all of the benchmarks I've heard about, this really shouldn't take longer than 8 to 10 seconds).

Steps To Reproduce:

1) Be on my computer (Because you probably won't have this issue)
2) Install a new Laravel project
3) Run npm install (or yarn install)
4) Run npm run dev

Additional Details:

I did this using a fresh Laravel install, so my package.json and webpack.mix.js come straight from the source code. I've also tried this over the past three or four weeks on my working project, but I've never once gotten this to fully work.

I think that this might be JavaScript related. If I comment out the compilation of JavaScript, and just run the sass mixer, I'm able to run everything correctly (This just means I have to do my JavaScript the old fashioned way).

Here's the output:

F:\Links\www\laravel\54>npm run dev

> @ dev F:\Links\www\laravel\54
> npm run development

npm WARN invalid config loglevel="notice"

> @ development F:\Links\www\laravel\54
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

95% emitting

DONE  Compiled successfully in 3421ms                                                                                                                                                              
5:39:01 PM


                                                                                                    Asset     Size  Chunks             Chunk Names
  fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.eot?f4769f9bdb7466be65088239c12046d1  20.1 kB          [emitted]
fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.woff2?448c34a56d699c29117adc64c43affeb    18 kB          [emitted]
 fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.woff?fa2772327f55d8198301fdb8bcfc8158  23.4 kB          [emitted]
  fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.ttf?e18bbf611f2a2e43afc071aa2f4e1512  45.4 kB          [emitted]
  fonts/vendor/bootstrap-sass/bootstrap/glyphicons-halflings-regular.svg?89889688147bd7575d6327160d64e760   109 kB          [emitted]
                                                                                                   mix.js   177 kB       0  [emitted]  mix

Also, I my working project, I've gotten all of my custom JS scripts to compile using the mix.scripts() method, which makes me believe that this issue is exclusive to the mix.js() method.

I'm open to any ideas that might work, just know that I've already tried the following:

• Reinstalling node and npm
• Reinstalling all node_modules dependencies
• Using a fresh installation of Laravel
• Changing the public path (Even though I shouldn't have to)
• Disabling image loader options
• Restarting my computer (Because that's the general IT response)

(Edit) Diagnosis:

With the help of the commenters below, we've discovered that my issue running npm run dev using Command Prompt (on a Windows environment), where the current directory of the prompt is relying on a Symbolic Link. When running the same command without routing through the Symbolic Link, the command runs just fine.

[ruchern-chong]

Can you try updating your node version to 8 and see if the problem persists. Honestly, there are not much details from the logs posted.

[Eldair]

Same here, latest node but works if imgLoaderOptions is disabled

[wouter2203]

Experiencing this as well, but for me disabling imgLoaderOptions via mix.options({ imgLoaderOptions: { enabled: false } }) doesn't resolve the issue. My webpack.mix.js file isn't advanced, just some basic calls (the call to .options was later added following @Eldair's suggestion):

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

mix.options({ imgLoaderOptions: { enabled: false } })
  .js('resources/assets/js/app.js', 'public/js')
  .sass('resources/assets/sass/app.scss', 'public/css')
  .version();

[DannyFeliz]

Same error here using Windows 7

[tylernathanreed]

@ruchern I updated to Node v8.4.0, and I still got stuck at 95% emitting :/

Upon just trying to run the sass and scripts methods (which worked previously), I got a new error:

ERROR  Failed to compile with
1 errors
07:37:28

error  in F:/****/resources/assets/sass/app.scss

Module build failed: Error: Missing binding F:\****\node_modules\node-sass\vendor\win32-x64-57\binding.node
Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 8.x

Found bindings for the following environments:
  - Windows 64-bit with Node.js 6.x

This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass --force` to build the binding for your current environment.
    at module.exports (F:\****\node_modules\node-sass\lib\binding.js:15:13)
    at Object.<anonymous> (F:\****\node_modules\node-sass\lib\index.js:14:35)
    at Module._compile (module.js:573:30)
    at Object.Module._extensions..js (module.js:584:10)
    at Module.load (module.js:507:32)
    at tryModuleLoad (module.js:470:12)
    at Function.Module._load (module.js:462:3)
    at Module.require (module.js:517:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (F:\****\node_modules\sass-loader\lib\loader.js:3:14)
    at Module._compile (module.js:573:30)
    at Object.Module._extensions..js (module.js:584:10)
    at Module.load (module.js:507:32)
    at tryModuleLoad (module.js:470:12)
    at Function.Module._load (module.js:462:3)
    at Module.require (module.js:517:17)
    at require (internal/module.js:11:18)
    at loadLoader (F:\****\node_modules\loader-runner\lib\loadLoader.js:13:17)
    at iteratePitchingLoaders (F:\****\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
    at iteratePitchingLoaders (F:\****\node_modules\loader-runner\lib\LoaderRunner.js:165:10)
    at F:\****\node_modules\loader-runner\lib\LoaderRunner.js:173:18
    at loadLoader (F:\****\node_modules\loader-runner\lib\loadLoader.js:36:3)
    at iteratePitchingLoaders (F:\****\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
    at runLoaders (F:\****\node_modules\loader-runner\lib\LoaderRunner.js:362:2)
    at NormalModule.doBuild (F:\****\node_modules\webpack\lib\NormalModule.js:181:3)
    at NormalModule.build (F:\****\node_modules\webpack\lib\NormalModule.js:274:15)
    at Compilation.buildModule (F:\****\node_modules\webpack\lib\Compilation.js:146:10)
    at factoryCallback (F:\****\node_modules\webpack\lib\Compilation.js:329:11)
    at factory (F:\****\node_modules\webpack\lib\NormalModuleFactory.js:253:5)
    at applyPluginsAsyncWaterfall (F:\****\node_modules\webpack\lib\NormalModuleFactory.js:99:14)

 @ F:/****/resources/assets/sass/app.scss 4:14-127
 @ multi F:/****/node_modules/laravel-mix/src/builder/mock-entry.js ./resources/assets/sass/app.scss

                                                    Asset     Size  Chunks             Chunk Names
                                                   mix.js    19 kB       0  [emitted]  mix
F:\Links\www\laracasts\forum\public\assets\scripts\app.js  8.27 kB          [emitted]
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\****\npm-cache\_logs\2017-08-25T12_37_38_903Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\****\npm-cache\_logs\2017-08-25T12_37_39_076Z-debug.log

This essentially just looks like something was trying to compile under Node v6.x, but now that I'm using Node v8.x, it doesn't know how.

So I ran npm install, as the error suggested, which installed a bunch of stuff, and fixed the issue for sass and scripts that upgrading to Node v8.x caused.

I then tried my full mix file, which contains the stock js method, and I'm still stuck at 95% emitting.

tl;dr Didn't fix my issue.

Thanks for the suggestion though.

[arcanedev-maroc]

Related: #925 ??

[wouter2203]

By doing some trial and error I've found out there is a check in index.js which sets the Config.publicPath to public if it detects a Laravel app.

I'm using mix in a standalone project so it skips that part, but by manually setting my public path to public it started to work.

You might want to look into this and see if manually setting the public path by using mix.setPublicPath('public') resolves this issue for you as well.

[tylernathanreed]

@wouter2203 That's one of the many solutions I tried when googling this topic. Unfortunately, this didn't work for me.

@arcanedev-maroc Not sure. I'm not actually using mix.extract(). In your project, does it work if you _don't_ use the extract method? My projects seem to not like the mix.js() method, which is sort of a prerequisite for the mix.extract() method.

[Zedonboy]

Thanks @wouter2203.....It worked

[webstractions]

Just like @Zedonboy too. I use @wouter2203 suggestion and it worked. In my case, I am using webpack as a stand-alone for a WordPress theme. I used mix.setPublicPath('.\') however.

[zorca]

This problem is only with incorrect output path main.js. In my case: I have this script at root of project:

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

mix
  .setPublicPath('web/app/themes/theme/dist')
  .sass('web/app/themes/theme/assets/styles/main.scss', 'styles/main.css')
  .js('web/app/themes/theme/assets/scripts/main.js', 'scripts/main.js');

Everything works. But the output looks like this at theme folder:

--styles
----main.css
--web
----app
------themes
--------theme
----------dist
------------scripts
--------------main.js

Them I remove main.js implementation all works fine, but mix-manifest.js presents at root directory of project:

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

mix
  .sass('web/app/themes/theme/assets/styles/main.scss', 'web/app/themes/theme/dist/styles/main.css');

[cmosguy]

Hi All and @JeffreyWay ,

I finally figured out why my npm run watch command was choking at 95%.

The story is this: I am using Windows 10. I have a directory called c:\w\myproject which is a "Junction Link" that I created (its similar to a symbolic link in unix world). This c:\w\myproject is a symbolic link to c:\nobackup\w\myproject. What happens Jeff's laravel-mix does not resolve the output directory paths to public properly.

My fix: I have to first do cd c:\noback\w\myproject then run npm run watch and viola, it worked!

Cheers!
Adam

[tylernathanreed]

@cmosguy Interesting. I too am using a Junction Link for my projects. I'll have to try that out, and see if it works.

[grafikkaos]

Hope nobody objects to me chipping in, I am facing some of the same issues when trying to use mix.js in laravel mix.

This is my webpack.mix.js file

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

mix.options({
    processCssUrls: false,
    setResourceRoot: path.normalize('public'),
    publicPath: path.normalize('public')
});

mix.sass('app/Modules/Vuejslab/Assets/sass/test.scss', path.resolve(__dirname, 'public\\modules\\vuejslab\\css\\test_manny.css')).version();
mix.js('app/Modules/Vuejslab/Assets/js/vuejs_lab.js', path.resolve(__dirname, 'public\\modules\\vuejslab\\js\\vuejs_lab.js'));

The resulting mix file shows the following:

{
    "/D:/xampp/htdocs/alsv2/public/modules/vuejslab/js/vuejs_lab.js": "/D:/xampp/htdocs/alsv2/public/modules/vuejslab/js/vuejs_lab.js",
    "/modules/vuejslab/css/test_manny.css": "/modules/vuejslab/css/test_manny.css"
}

I have tried all suggesting mentioned here as well suggestions mentioned in other posts relating this is particular issue. The outcome is still the same. The css file is created but when it gets to creating the js file, the process is stuck at 95%

Any ideas on how to resolve this problem will be greatly appreciated.

Thanks

[algomis]

@Zedonboy @wouter2203 @webstractions suggestions worked for me.
I'm using mix as a standalone.
This is my my config:

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

mix.js('resources/js/app.js', 'public/js')
.stylus('resources/stylus/app.styl', 'public/css')
.setPublicPath('./');

Hope it helps.

[tylernathanreed]

@cmosguy That was my problem!

After compiling from command prompt by navigating to my project without taking the symbolic link first, it works just fine! Then after trying to compile through the symbolic link, it stops working.

So just to confirm, @JeffreyWay, the problem is using the js mixer on a Windows environment when command prompt executes through a symbolic link.

I have no idea _why_ that's a problem, but I'll leave you to figure that out.

Of course, I'd like to be able to compile through my symbolic link, as I made it as a time saver. I'd like to leave this issue open until that specific issue gets resolved.

[peterson-umoke]

the answer to this issue is simple.....

• you have to properly set the publicpath to your current working directory.
• then you run npm install....

`
// Using Laravel Mix in a Standalone project
let mix = require('laravel-mix');

/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for your application, as well as bundling up your JS files.
|
*/
mix.setPublicPath("./");
mix.js('src/app.js', 'dist/');
mix.sass('src/app.scss', 'dist/');`

Hope This Solves the issue.

[tylernathanreed]

@peterson-umoke I tried that before even submitting this issue, and that didn't work. My problem was in a stock Laravel project, not some non-Laravel project where I was using elixir externally.

Thanks for the advise, and I'm glad that works for some people, but this didn't work for me. The problem I'm reporting is the Junction Link issue, which changing the public path won't fix.

[hxshandle]

Hi @cmosguy you save my life.
-Handle

[ashbeats]

I had the same issue because the dir is in a symlinked folder on windows.

Here's how I fixed it.

// added before mix is called in webpack.mix.js
var fs   = require('fs');
let isIllusion = process.cwd() !== fs.realpathSync(process.cwd());
if(isIllusion){
    process.chdir(fs.realpathSync(process.cwd()));
}

This forces the correct paths and I can compile it from either folder.

[sourovroy]

I use mix.setPublicPath('assets/public'); and its fixed my issue.

[4eck-media]

.setPublicPath('/mypath') worked here!

[rico-ocepek]

For some reason this did not work for me
mix.setPublicPath('/public')

while this did
mix.setPublicPath('public')

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[tylernathanreed]

Stale bot says that this is stale, but the issue still exists.

So long as I continue to compile my assets through a junction, this issue persists.

[lkraav]

I just ran into this y-day. When I tried to be clever and symlink node_modules from an identical project branch, that sent whatever magic publicPath resolution contains, into a complete disarray.

[MGParisi]

Mine was due to an improper comment in webpack.mix.js

[sawwd]

@tylernathanreed

After compiling from command prompt by navigating to my project without taking the symbolic link first, it works just fine! Then after trying to compile through the symbolic link, it stops working.

So just to confirm, @JeffreyWay, the problem is using the js mixer on a Windows environment when command prompt executes through a symbolic link.

Even if you start the CMD as Administrator?

[aaronkorn]

I fixed something like by
`rm -rf node_modules

rm package-lock.json yarn.lock

npm cache clear --force

npm install`

See
https://laravel-mix.com/docs/4.0/troubleshooting

p.s. Hi Stale Bot!

[tylernathanreed]

@sawwd

Correct. I've tried command prompt, power shell, and git bash. All exhibited the same problem, even when elevated.

And again, if I don't cd into the symlink, and instead go through the longer path, all three work just fine.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[lorvent]

Problem is not solved yet,
i have tried all solutions mentioned,
updated to latest mix, vue, cross-env etc, still issue is not solved.