laravel-mix: Stuck at 95% Emitting

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:

Be on my computer (Because you probably won’t have this issue)
Install a new Laravel project
Run npm install (or yarn install)
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.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 22
Comments: 33 (2 by maintainers)

Most upvoted comments

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.

+181

wouterrutgers on Aug 29, 2017

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

+19

cmosguy on Sep 21, 2017

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.

+13

peterson-umoke on Oct 9, 2017

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.

+13

webstractions on Sep 14, 2017

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

algomis on Sep 28, 2017

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.

ashbeats on Mar 14, 2018

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

sourovroy on Mar 14, 2018

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

while this did mix.setPublicPath('public')

rico-ocepek on Aug 20, 2018

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:

dist
--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');

zorca on Sep 15, 2017

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();

wouterrutgers on Aug 21, 2017