Laravel-mix: npm run dev fails on fresh 5.4 install

[JordanDalton]

I encountered this on a fresh 5.4 install.

Jordans-MacBook-Pro:Mix jordandalton$ npm run dev

> @ dev /Users/jordandalton/Code/Projects/Mix
> node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

/Users/jordandalton/Code/Projects/Mix/node_modules/laravel-mix/setup/webpack.config.js:120
        let extractPlugin = new plugins.ExtractTextPlugin(
        ^^^

SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
    at exports.runInThisContext (vm.js:54:16)
    at Module._compile (module.js:375:25)
    at Object.Module._extensions..js (module.js:406:10)
    at Module.load (module.js:345:32)
    at Function.Module._load (module.js:302:12)
    at Module.require (module.js:355:17)
    at require (internal/module.js:13:17)
    at requireConfig (/Users/jordandalton/Code/Projects/Mix/node_modules/webpack/bin/convert-argv.js:96:18)
    at /Users/jordandalton/Code/Projects/Mix/node_modules/webpack/bin/convert-argv.js:109:17
    at Array.forEach (native)

npm ERR! Darwin 14.5.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev"
npm ERR! node v5.2.0
npm ERR! npm  v4.1.2
npm ERR! code ELIFECYCLE
npm ERR! @ dev: `node node_modules/cross-env/bin/cross-env.js 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 1
npm ERR! 
npm ERR! Failed at the @ dev script 'node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs 
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls 
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/jordandalton/Code/Projects/Mix/npm-debug.log

So I tried updating laravel-mix to 0.5.9 but no luck. Also updated node and npm to latest versions...no luck as well.

[JeffreyWay]

Upgrade Node.

[davidnsparks]

Im using 6.9.4 node and have the same issue on a fresh install - HELP :(

[ggdx]

Same and Node 7.5.0

[davidnsparks]

I added

"babel": { "presets": [ "es2015" ] }

To pacakge.json and it fixed everything.

On Feb 10, 2017, at 8:49 AM, Daniel White <[email protected][e-mail]> wrote:

Same and Node 7.5.0

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHubhttps://github.com/JeffreyWay/laravel-mix/issues/227#issuecomment-278996764, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ARN49i2h0p2BV1ewm6Z-Lp7QEG-WlaTRks5rbJUigaJpZM4Lw6ha.

[ggdx]

There it is. Thanks @davidnsparks !

[mandeepsinghgill]

Same problem Node 7.7.1, Added "babel": { "presets": [ "es2015" ] } but still error

[ahadabasi]

I hade a problem with sass compile and try reinstalling node-sass, it worked for me.
npm install node-sass

[lcpiragibe]

Add in devDependencies in package.json:

"babel-preset-es2015": "^6.22.0"

[AttaUrRehman24]

You can solve this problem 100%
https://github.com/AttaUrRehman24/laravel-mix

[harryhan24]

@AttaUrRehman24 100%? no absolutely not

[ahmed-raza]

Im having the same problem, tried everything mentioned above upgraded node/npm as well no success so far.

[GregKeaney]

For what it's worth. I have same issue. Upgrading node did nothing. Using phpStorm I was getting an unresolved asset error. Resolved that with this - https://stackoverflow.com/questions/29805943/set-background-css-image-in-phpstorm-cannot-resolve-file

Still failed until I changed first line of webpack.mix.js

from - let mix = require('laravel-mix');
to - const mix = require('laravel-mix');

Runs now, frankly not exactly sure why.

[JeffreyWay]

There's no way that that change fixed it. It had to be something else.

[GregKeaney]

I agree as it has now returned.

npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ dev: ` cross-env NODE_ENV=development node_modules/webpack/bin/webpac
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 log

And this:

This relative module was not found:

• ./images/invictus_logo.png in ./node_modules/css-loader?{"url":true,"sourceMap":fa
  lse,"importLoaders":1}!./node_modules/postcss-loader/lib?{"sourceMap":true,"ident":"
  postcss","plugins":[null]}!./node_modules/resolve-url-loader?{"sourceMap":true,"root
  ":"C://xampp//htdocs//invictus//node_modules"}!./node_modules/sass-loader/lib/loader
  .js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sas
  s/invictus.scss

[GregKeaney]

Very odd. Followed the solution here - https://github.com/JeffreyWay/laravel-mix/issues/805

npm run dev now works ONLY if my second myapp.sass file does not include an image asset that phpStorm feels it can't locate. If I mark my public dir as Resouces Root and then use the url 'images/my_image.png', phpStorm locates it but npm run dev fails.

The message popup say ERROR: Can't resolve .images/my_image.png.

?? this is all new.

[NicolasVanhecke]

@GregKeaney Not sure if this will fix anything, but problems with image (or just url's in general), might be fixed by adding this at the bottom of your webpack.mix.js. Something to do with relative/absolute paths to files and images and far as I understand.

mix.options({ processCssUrls: false });

[telliott22]

I had the same issue, solved it by adding babel-preset and node-sass to devDependencies in package.json:

"devDependencies": {
    "babel-preset-es2015": "^6.22.0",
    "node-sass": "^4.5.3",
     ....
  },
"babel": {
    "presets": [
      "es2015"
    ]
  }

And running npm install