Laravel-mix: Unexpected character '@' after upgrade from v0.5.3 to v0.5.9

[rn1ee]

Upgrading from v0.5.3 to v0.5.9 causes the following errors:

Module parse failed: ...resources\assets\sass\portal.scss Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @font-face {
| font-family: 'Open Sans';
| font-style: normal;

Switching back to v0.5.3 or v0.5.7 without any other config changes everything is ok...

[poldixd]

Hi, i got the same error with v0.5.9! I've updated node.js and npm and deleted the node_modules folder and reinstalled the packages with npm install. Still the same error...

 ERROR  Failed to compile with 1 errors

 error  in ./resources/assets/sass/app.scss

Module parse failed: D:\xampp\htdocs\laravel5\resources\assets\sass\app.scss Unexpected character '@' (2:0)
You may need an appropriate loader to handle this file type.
| // Bootstrap
| @import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "dev"
npm ERR! node v6.9.4
npm ERR! npm  v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ dev: `cross-env NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ dev script 'cross-env NODE_ENV=development webpack --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!     cross-env NODE_ENV=development webpack --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.

package.json

{
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "cross-env NODE_ENV=production webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.15.2",
    "bootstrap-sass": "^3.3.7",
    "jquery": "^3.1.0",
    "laravel-mix": "^0.5.0",
    "lodash": "^4.16.2",
    "vue": "^2.0.1"
  }
}

webpack.mix.js

const { 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 the application as well as bundling up all the JS files.
 |
 */
mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

Update: With v0.5.8 everything works fine

[vovapas]

laravel-mix 0.5.9

error in ./resources/assets/sass/site/main.scss

Module parse failed: ...\resources\assets\sass\site\main.scss Unexpected character '@' (2:0)
You may need an appropriate loader to handle this file type.
| // Fonts
| @import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);
|
| // Variables

[gorpetric]

Same error here (v0.5.9). Even without the @ sign. E.g. having only

body { color: pink; } 

gives the same error.

You may need an appropriate loader to handle this file type.

[JeffreyWay]

Can someone give me steps that I can follow to reproduce this? I just did a fresh install of Laravel and Laravel Mix. Everything compiled properly.

[camiant]

using win10 environment with last homestead I need to revert laravel-mix to 0.5.8.... otherwise sass-loader doesn't work properly

[poldixd]

I used npm update to update all packages. I had installed an old version of laravel-mix (v0.5.0).

If i manually install v0.5.9, the error appears. When i switched back to v0.5.8, everything is ok.

I use Windows 10.

[JeffreyWay]

Please give me an example I can use to reproduce.

[gdhillon1]

@JeffreyWay don't know but looks like same kind of issue with scss file compiling.

[rn1ee]

Windows 10, last node.js + npm install

fresh Laravel project with composer create-project laravel/laravel
npm install
npm run dev

` error in ./resources/assets/sass/app.scss

Module parse failed: C:\Workspace\sasstest\resources\assets\sass\app.scss Unexpected character '@' (3:0)
You may need an appropriate loader to handle this file type.
|
| // Fonts
| @import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);
|
| // Variables

@ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
Asset Size Chunks Chunk Names
/js/app.js 1.16 MB 0 [emitted] [big] /js/app
mix-manifest.json 32 bytes [emitted]

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "dev"
npm ERR! node v7.4.0
npm ERR! npm v4.0.5
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 2
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! C:\Workspace\sasstest\npm-debug.log
`

[JeffreyWay]

I don't know what's in your Sass file. I need something like:

1. Install fresh Laravel project
2. Add this to resources/assets/sass/app.scss
3. Run npm run dev
4. ...

[camiant]

jeff, the error pops up with the default app.sass asset.. no modifications

[JeffreyWay]

I'm assuming that it has to be related to this commit:

https://github.com/JeffreyWay/laravel-mix/commit/be433ff97df7b9afac1ed243b72cb9e2acfd2029

Can someone experiencing this issue open node_modules/laravel-mix/setup/webpack.config.js, find this line..

test: new RegExp(toCompile.src.path),

and update it to:

test: new RegExp(toCompile.src.file),

Does that change the output? I bet it does. Maybe a Windows file path issue with the regex.

None of you are using a Mac, right?

[camiant]

using
test: new RegExp(toCompile.src.file),
it works like a charm in 0.5.9

great catch!

[JeffreyWay]

Success! Okay, can you console.log(toCompile.src) and paste the output here? Like this:

https://cl.ly/0i0S3g3s1N2B

[rn1ee]

{ path: 'C:\Workspace\sasstest\resources\assets\sass\app.scss',
pathWithoutExt: 'C:\Workspace\sasstest\resources\assets\sass\app',
hashedPath: 'C:\Workspace\sasstest\resources\assets\sass\app.[hash].scss',
base: 'C:\Workspace\sasstest\resources\assets\sass',
file: 'app.scss',
hashedFile: 'app.[hash].scss',
name: 'app',
isDir: false,
ext: '.scss' }

[JeffreyWay]

Thanks!

Yeah, that's definitely the issue. I'll fix and tag it right now.

[JeffreyWay]

Can someone do:

npm install https://github.com/JeffreyWay/laravel-mix

And then let me know if that fixed the issue? I think we can just force the POSIX implementation for those file paths on Windows.

[rn1ee]

I installed it - but npm run dev shows the same error like before:

` error in ./resources/assets/sass/app.scss

Module parse failed: C:\Workspace\sasstest\resources\assets\sass\app.scss Unexpected character '@' (3:0)
You may need an appropriate loader to handle this file type.
|
| // Fonts
| @import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);
|
| // Variables
`

[juresrpcic]

Just tried it - still tagged as 0.5.9 with this error for me:

ERROR  Failed to compile with 1 errors
error  in ./resources/assets/sass/app.scss
Module parse failed: C:\web\imcpr\resources\assets\sass\app.scss Unexpected character '@' (3:0)
You may need an appropriate loader to handle this file type.

node 6.9.4
npm 3.10.10

[kwhohasamullet]

I have the same setup as @rn2ee (Win 10 + latest node (7.4) and npm

Just ran npm install https://github.com/JeffreyWay/laravel-mix and it is now all working as expected with the default app.scss file

Thanks for the hard work!

[gorpetric]

Dos not fix it for me either.

[JeffreyWay]

I just tagged it as 0.5.10 a few minutes ago.

[rn1ee]

Installed it with your new tag in my real project - all is working now..

[JeffreyWay]

Woohoo! Stupid regular expression. :/

Sorry, folks! But thanks for the help!

[juresrpcic]

It still doesn't work for me - I have the 0.5.10 version installed (even manually deleted laravel-mix from node_modules and reinstalled) and the issue remains.

I tried a fresh laravel project, made sure packages.json has laravel-mix set at ^0.5.10 - still doesn't work.

If I go and manually change to test: new RegExp(toCompile.src.file), in the config file, it works.

I'm on Windows 7 x64, node 6.9.4, npm 3.10.10

[ghost]

Still a problem for me too. Windows 7 x64, node 6.94, npm 3.10.8

[IJack]

Same by me. Don't get it runnig with the new version: I've Windows 7 x64, node 6.9.1, npm 3.10.8

[camiant]

me too...

[JeffreyWay]

Okay, can you console.log(toCompile.src) in node_modules/laravel-mix/setup/webpack.config.js and paste the output here? Like this:

https://cl.ly/0i0S3g3s1N2B

[ghost]

{ path: 'D:\Laravel\Laravel54/resources/assets/sass/app.scss',
pathWithoutExt: 'D:\Laravel\Laravel54\resources\assets\sass\app',
hashedPath: 'D:\Laravel\Laravel54\resources\assets\sass\app.[hash].scss',
base: 'D:\Laravel\Laravel54/resources/assets/sass',
file: 'app.scss',
hashedFile: 'app.[hash].scss',
name: 'app',
isDir: false,
ext: '.scss' }

[ghost]

Yes it is, code below copied and pasted from file.

````
/**

• Register a generic CSS preprocessor.
  *
• @param {string} type
• @param {string} src
• @param {string} output
  */
  module.exports.preprocess = (type, src, output) => {
  src = new Mix.File(path.posix.resolve(src)).parsePath();
  output = new Mix.File(output).parsePath();
  ````

[themsaid]

This may sound odd, but I'm having same issue using macbook on a fresh laravel installation, to test if it's the same regex issue I've updated the following like:

test: new RegExp(toCompile.src.path),

to

test: /\.scss$/,

and the issue remained, so maybe something else is wrong not just a regex issue.

I'm not very familiar with webpack, I hope I was, so forgive me if I'm not including enough information.

[JeffreyWay]

@themsaid - What does your webpack.mix.js file look like? Is this a fresh install of the framework entirely?

[themsaid]

Yes, I just removed some unrelated lines to narrow down the issue:

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

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

[JeffreyWay]

And what specifically is the output for you?

[themsaid]

@JeffreyWay here's the full output:

Module parse failed: /Users/mac/sites/laravelmaster/resources/assets/sass/app.scss Unexpected character '@' (3:0)
You may need an appropriate loader to handle this file type.
| 
| // Fonts
| @import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);
| 
| // Variables

 @ multi mix


npm ERR! Darwin 15.4.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev"
npm ERR! node v6.9.4
npm ERR! npm  v3.10.10
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 2
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.

[pavvel11]

@JeffreyWay I have exact same issue on Win10, node v7.4.0, npm v4.1.2, fresh Laravel 5.4 install.

and the output is :

ERROR  Failed to compile with 1 errors

 error  in ./resources/assets/sass/app.scss

Module parse failed: D:\...\resources\assets\sass\app.scss Unexpected character '@' (3:0)
You may need an appropriate loader to handle this file type.
|
| // Fonts
| @import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);
|
| // Variables

 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

            Asset      Size  Chunks                    Chunk Names
       /js/app.js   1.16 MB       0  [emitted]  [big]  /js/app
mix-manifest.json  32 bytes          [emitted]

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\nodejs\\node.exe" "C:\\{user}\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "dev"
npm ERR! node v7.4.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 2
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!     D:\...\npm-debug.log

[JeffreyWay]

@themsaid Weird. I can't reproduce this. What happens if you change the test: new RegExp(toCompile.src.path) part in node_modules/laravel-mix/setup/webpack.config.js to:

test: new RegExp(toCompile.src.file),

[themsaid]

@JeffreyWay same error still, not sure what else to check. Let me know if you'd like me to make any changes and test again since I can generate the issue.

[activemonkeys]

Had the same issue as @themsaid and changing path to file did the trick.

Environment: Windows 10, node v6.9.4, npm 4.2.0

Prior to making the changes I also ran npm cache clean and afterwards npm update.

[pavvel11]

@activemonkeys what path did you change?

[activemonkeys]

@pavvel11 - as JeffreyWay explained:

Within node_modules/laravel-mix/setup/webpack.config.js, find this line..

test: new RegExp(toCompile.src.path),

and update it to:

test: new RegExp(toCompile.src.file),

[IJack]

Yes thats it @activemonkeys:
webpack,config.js change line 124 to
test: new RegExp(toCompile.src.file),

and run:
npm cache clean

and then:
npm update

[pavvel11]

Correct, replacing the line as @JeffreyWay suggested together with cache clean and update did the trick.

[JeffreyWay]

For anyone still experiencing this issue, it has to be related to this line: https://github.com/JeffreyWay/laravel-mix/blob/master/setup/webpack.config.js#L125

Try doing console.log(toCompile.src) and checking to see if there's anything funny in it. Are there back slashes, or a path that would fail that regular expression? If the file path in the regex doesn't exist, the Sass extraction won't work and you'll get this error.

[dedeiu]

I have the same issue as described above and i think it's related to Windows OS. This is the result of console.log(toCompile.src):

{ path: 'C:\\wamp64\\www\\ta_portal/resources/assets/sass/ta.scss', pathWithoutExt: 'C:\\wamp64\\www\\ta_portal\\resources\\assets\\sass\\ta', hashedPath: 'C:\\wamp64\\www\\ta_portal\\resources\\assets\\sass\\ta.[hash].scss', base: 'C:\\wamp64\\www\\ta_portal/resources/assets/sass', file: 'ta.scss', hashedFile: 'ta.[hash].scss', name: 'ta', isDir: false, ext: '.scss' }

[elastisteve]

I have the same problem. Could this be related to Windows that Jeffrey isn't seeing it?

this is all I have in the app.scss
```// Fonts
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);

npm run dev:

ERROR Failed to compile with 1 errors

error in ./resources/assets/sass/app.scss

Module parse failed: G:\Dropbox\PhpStorm Projects\mix_test\resources\assets\sass\app.scss Unexpected character '@' (3:0)
You may need an appropriate loader to handle this file type.
|
| // Fonts
| @import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);
|
|

webpack.mix.js:

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

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

Win 10 here with Homestead and L54

[gerciljunio]

I'm using macOS

Result console.log(toCompile.src):

{ path: '/Users/gr/Code/grcenter/resources/assets/sass/app.scss',
pathWithoutExt: '/Users/gr/Code/grcenter/resources/assets/sass/app',
hashedPath: '/Users/gr/Code/grcenter/resources/assets/sass/app.[hash].scss',
base: '/Users/gr/Code/grcenter/resources/assets/sass',
file: 'app.scss',
hashedFile: 'app.[hash].scss',
name: 'app',
isDir: false,
ext: '.scss' }

[elastisteve]

...inserted the console.log. I see the output for a second, before it disappears when running npm run dev Using PHPstorm terminal. How can I see the console.log??

[elastisteve]

was able to make a screenshot:

[JeffreyWay]

@elasticsteve Thanks.

Can any of you bump your Mix dependency to 0.5.12 and see if that makes any difference?

[elastisteve]

G:\Dropbox\PhpStorm Projects\mix_test>npm run dev

> @ dev G:\Dropbox\PhpStorm Projects\mix_test
> 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

module.js:471
    throw err;
    ^

Error: Cannot find module 'webpack.mix'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)

[JeffreyWay]

Does webpack.mix.js exist in your project root?

[gerciljunio]

@JeffreyWay I changed to 0.5.12 and the same issue continues...

[JeffreyWay]

@gerciljunio Are you working on a fresh project? Did you copy your webpack.config.js to your project root by any chance?

[gerciljunio]

I am not in a new project, however it is already upgraded to the latest versions of all packages, and yes, the webpack.config.js file exists in root and the content is: https://cl.ly/3x1P1v3n210Y

[JeffreyWay]

I mean the webpack.config.js file, not webpack.mix.js. Some people copy that file to their project root to edit it. If anyone does, they'll need to manually update it to reflect the changes in the master version of webpack.config.js.

[elastisteve]

I didn't copy it. I only inserted the console.log in the node_modules. Working in a bare-bone new test project here to iron out the issues with Mix.

[gerciljunio]

Sorry... no, I did not copy the webpack.config.js file to the root of my project. I had misunderstood.

[elastisteve]

just to be clear. The Error: Cannot find module 'webpack.mix' came after updating to 0.5.12.

[activemonkeys]

@elasticsteve that's right. When changing path to file in 0.5.0 it worked. After updating to 0.5.12 the error: Cannot find module 'webpack.mix' came up.

[gerciljunio]

However incredible it seems to be by removing the node_modules folder and running npm install again, everything worked fine. I'm using version 0.5.13 of laravel-mix.

Remembering what I'm using in an existing project that has just been updated to Laravel 5.4.

[activemonkeys]

Tried another fresh install (no files changed) and got the following error with 0.5.13 of laravel mix

ERROR Failed to compile with 1 errors

This dependency was not found in node_modules:

• D:Laragonlarachat
  ode_modulesue-loaderlibcomponent-normalizer

[JeffreyWay]

@activemonkeys I need more information/output than that.

I think someone else mentioned that Laragon has some weird issues with isolation. That could be related.

[elastisteve]

0.5.13 - still same error here...

npm run dev

 ERROR  Failed to compile with 1 errors

 error  in ./resources/assets/sass/app.scss

Module parse failed: G:\Dropbox\PhpStorm Projects\mix_test\resources\assets\sass\app.scss Unexpected character '@' (3:0)
You may need an appropriate loader to handle this file type.
|
| // Fonts
| @import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);
|
|

 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

Do you need the console.log? I have trouble seeing the output because PHPstorm only shows it 1 sec before it disappears...

[activemonkeys]

@JeffreyWay - Currently trying to find out where this dependency error with vue-loaderlibcomponent-normalizer comes from.

Perhaps this helps: the *half" compiled file public\js\app.js has this error in it

As you can see, in the path, slashes are missing and u000 is inserted somewhere in front of ue-loaderlibcomponent-normalizer. Also the v from vue is left out...

/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(9), __webpack_require__(37)(module)))

// }),
/ 34 /
// (function(module, exports, __webpack_require__) {

var Component = __webpack_require__(!(function webpackMissingModule() { var e = new Error("Cannot find module \"D:Laragonlarachatnode_modules\u000bue-loaderlibcomponent-normalizer\""); e.code = 'MODULE_NOT_FOUND'; throw e; }()))(
/* script /
__webpack_require__(30),
/ template /
__webpack_require__(35),
/ scopeId /
null,
/ cssModules */
null
)

[donnysim]

Currently the problem is that

new RegExp(toCompile.src.fileWithDir + '$')

generates

 test: /sass\/style.scss$/,

while windows require

     test: /sass\\style.scss$/,

[JeffreyWay]

@donnysim So if you substitute your second example there, it compiles correctly?

[donnysim]

Yeah, it does, maybe make it something like

/sass[\/\\]style.scss$/

so it doesn't care about the directory separator.

[JeffreyWay]

Okay, I'm assuming it's because we have some path.posix calls in the codebase. I can fix this when I'm home tonight. Otherwise, I'd appreciate a PR if any Windows users want to update those and try it out on their machine.

I assume we can get away with switching path.posix.resolve() and path.posix.join() to path.resolve() and path.join(), respectively... Will have to check.

[henry-spanka]

Can confirm this.

Laravel-mix 0.5.10:

error  in ./resources/assets/sass/app.scss

Module parse failed: D:\Development\PhpStorm\cloudpanel\resources\assets\sass\app.scss Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @import "vendor";
| 
| @import "partials/cart";

 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

Same error on 0.5.13 but works fine on 0.5.3

[donnysim]

When using path.join and the file path is sass\style.scss, new RegExp(toCompile.src.fileWithDir + '$') converts it into /sass\style.scss$/ which is incorrect :\

[JeffreyWay]

@donnysim So we just need an extra backslash there, to make it /sass\\style.scss$/? Is that right? If so, we can just do a .replace(/\\/g, '\\\\') I assume.

[donnysim]

toCompile.src.fileWithDir.replace(/\\/g, '\\\\') + '$' does the job \o/

[JeffreyWay]

Okay, committed and tagged.

I think I can close this now, but I'm sure as soon as I do, somebody is going to chime in and say it still doesn't work. :)

Thanks for the help, @donnysim!

[donnysim]

Umm, probably should change to using path.join if we're fixing it, but dunno if it'll effect mac :D

[donnysim]

fileWithDir: path.join(outputSegments.dir.split('/').pop(), outputSegments.base), in File.js should be enough if it's all that's used

[JeffreyWay]

Yeah I'm updating those path.posix references now.

[donnysim]

Can confirm that it works out of the box for me now.

[Doomtickle]

Running npm install https://github.com/JeffreyWay/laravel-mix and then npm install [email protected] --save worked for me.

[mijgame]

I'm still getting the weird dependency bug with libcomponent-normalizer. Is that related to this issue?

[Bomavi]

Here is very weired error, but now everything fine with sass

[henry-spanka]

I have already opened an issue for vue-loader: https://github.com/vuejs/vue-loader/issues/601
If you need a quick fix just add "vue-loader": "10.1.0" to your package.json. It seems like a bug was introduced in version 10.1.1

[denisrpriebe]

@Bomavi Same here, Win 7, fresh install of Laravel.

[elastisteve]

It's working for me now.

[Bomavi]

@henry-spanka "vue-loader": "10.1.0" fixed error with normalizer, thanks!

[henry-spanka]

@Bomavi Glad I could help :) Let's hope we get this fixed soon.

[mijgame]

@henry-spanka I don't use vue loader and get the same error.

[henry-spanka]

@IrsyadAdl Check my fix above
@mijgame laravel-mix depends on vue-loader, therefore you need to override this dependency to stick to version 10.1.0

[denisrpriebe]

@henry-spanka So it's either we use Laravel Mix v0.5.8 or use the latest version of Mix but with vue-loader v10.1.0 ....

[ntavelis]

@henry-spanka

I can confirm this fixes the problem. thx man
I hope the v10.1.1 gets fixed too

[JeffreyWay]

Well, of course, vue-loader v10.1.1 works for me and I don't see the error. 😕

[elastisteve]

shit! I get the same error like @IrsyadAdl now.

[denisrpriebe]

Updating Mix to the latest version and setting vue-loader to 10.1.0 fixed it. Be sure to set it to 10.1.0 and not ^10.1.1.

[elastisteve]

can confirm that "vue-loader": "10.1.0" fixed it. Thanks everyone!

[activemonkeys]

Same here - thanks all for your help!

[ntavelis]

@IrsyadAdl

Run npm install, and then npm run dev

[JeffreyWay]

@IrsyadAdl - Paste in your webpack.mix.js file, and then do rm -rf node_modules && npm install

[activemonkeys]

@IrsyadAdl

Try this:

npm cache clear

Then

npm install [email protected]

Then

npm install [email protected]

Then try

npm run dev

[activemonkeys]

@IrsyadAdl did you change your webpack.mix.js file in the root?

It should look like this (out of the box)

const { 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 the application as well as bundling up all the JS files.
|
*/

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

[JeffreyWay]

He's using it in a stand-alone project that isn't Laravel.

[activemonkeys]

ah - sorry, thanks for pointing that out

[henry-spanka]

@JeffreyWay Looks like I just needed to paste your fix .replace(/\\/g, '\\\\') to fix the vue-loader issue :)
Have created a merge request and I can successfully compile my assets after applying this fix: https://github.com/vuejs/vue-loader/issues/601

[activemonkeys]

@IrsyadAdl ... for what it's worth, I'm using a different set-up on windows 10:

npm -v = 4.2.0
node -v = 6.9.4

Just uninstall node and download the LTS version from here:
https://nodejs.org/en/

Have a look here on how to upgrade your npm
https://www.npmjs.com/package/npm-windows-upgrade

[JeffreyWay]

What was the problem?

[JeffreyWay]

Can you guys check your public/mix-manifest.json file, and see if it has backslashes?

[Bomavi]

@JeffreyWay

{ "/js/app.js": "/js/app.js", "/css/app.css": "/css/app.css" }

[henry-spanka]

Yes It does but only some files:

  "/js/app.js": "/js/app.41e92aa5bdd1d1b5fc44.js",
  "/admin/css/app.css": "/admin/css/app.f11331df3c52171f8998.css",
  "/admin/js/app.js": "/admin/js/app.a36d089993feeac0d4df.js",
  "\\admin\\js/vendor.js": "\\admin\\js/vendor.0ccb9485f3e36472e423.js",
  "\\admin\\js/manifest.js": "\\admin\\js/manifest.d41d8cd98f00b204e980.js"

[rdxrbn]

Running npm install https://github.com/JeffreyWay/laravel-mix fixed the issue
Thanks @JeffreyWay and Guys, this saved my time 👍

[drn5910]

I am still experiencing this issue, new install of laravel 5.4.

NPM: 4.2.0
Node: 6.9.4
Mix: 0.5.16

Output from console.log:

{ path: 'C:\\test\\laravel\\resources\\assets\\sass\\app.scss',
  pathWithoutExt: 'C:\\test\\laravel\\resources\\assets\\sass\\app',
  hashedPath: 'C:\\test\\laravel\\resources\\assets\\sass\\app.[hash].scss',
  base: 'C:\\test\\laravel\\resources\\assets\\sass',
  file: 'app.scss',
  fileWithDir: 'C:\\test\\laravel\\resources\\assets\\sass\\app.scss',
  hashedFile: 'app.[hash].scss',
  name: 'app',
  isDir: false,
  ext: '.scss' }

The only difference I can see is my public folder is in different location that the default, but JS is compiling to it without issue.

I've tried removing npm cache, the node_modules folder, using yarn to install, using npm to install, and I still get this unexpected character '@' error.

mix-manifest.json looks like:

{
  "js/app.js": "js/app.js"
}

webpack.mix.js:

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

mix.setPublicPath('../public');
mix.disableNotifications();

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

Any ideas? I have also tried using the default public setting with no success.

Edit: it's using the latest version of vue-loader, 10.1.2 too (noticed this might be an issue in other issues).

[vovapas]

mix.setPublicPath('../public'); change to mix.setPublicPath('./public');

[drn5910]

@vovapas It needs to be ../public for me as the public directory is one level above. But as mentioned, I've also tried using it without that setting and it still errors, so the setting is not to blame.

[drn5910]

As an update, if I downgrade to 0.5.8 it works. However if I go to any version above (I tried all between that and 0.5.16, and even the nearly tagged 0.6.0 it stops working again.

[orhdoga]

Hey, I've recently created a fresh Laravel 5.4 project on Windows 10.

In order to run Laravel mix, I did npm install and then npm run watch, but I ended up getting a bunch of errors:

``npm ERR! Linux 4.2.0-c9 npm ERR! argv "/home/ubuntu/.nvm/versions/node/v4.6.1/bin/node" "/home/ubuntu/.nvm/versions/node/v4.6.1/bin/npm" "run" "dev" npm ERR! node v4.6.1 npm ERR! npm v2.15.9 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! 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 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! /home/ubuntu/workspace/npm-debug.log```

[mikerockett]

Getting these errors on a fresh L5.4.6 install with Mix 0.6.0, Node 7.4.0, NPM 4.1.2, after npm install --no-bin-links on Windows 10 x64:

npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\\Users\\S510p\\scoop\\apps\\nodejs\\current\\nodejs\\node.exe" "C:\\Users\\S510p\\scoop\\apps\\nodejs\\current\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "--no-bin-links"
npm ERR! node v7.4.0
npm ERR! npm  v4.1.2

npm ERR! Maximum call stack size exceeded
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR!     <https://github.com/npm/npm/issues>

npm ERR! Please include the following file with any support request:
npm ERR!     D:\Local\xxx\npm-debug.log

If I do everything through npm install without the --no-bin-links, installation works, but I receive the errors reported above, specifically with regards to unexpected characters and using a loader.

The same happens if I use Yarn.

Note that I use public_html instead of public, and this has been set in webpack.mix.js.

[henry-spanka]

@mikerockett try the following:

npm install --no-bin-links
npm rebuild node-sass
npm install --no-bin-links

[mikerockett]

@henry-spanka - I can try again later today, but he first command is what causes the maximum call stack error.

[elastisteve]

@david-ridgeonnet Did you solve the issue? I'm afraid of updating to 0.6 after reading your comments. Am on Windows too.

[drn5910]

@elasticsteve if you see https://github.com/JeffreyWay/laravel-mix/issues/200#issuecomment-276324601 I had to downgrade to 0.5.8 laravel-mix.

It's odd how it seems to be working for some other Windows users, but not me.

[elastisteve]

Do we still have to manually add "vue-loader": "10.1.0", to the package.json or has this been fixed now?

[drn5910]

I haven't changed it in mine, so I assume whatever is brought in from the other parts works correctly.

[elastisteve]

ok, I've updated to 0.6 and it's working here.

Maybe you should try to add the line, although I can't say whether it is connected to your issues...

[drn5910]

Thanks for the suggestion but I've tried all sorts of combinations with the laravel-mix versions and using latest of vue-loader or the 10.1.0`` version. (I believe the latestvue-loader` has fixed the issue it was experiencing).

[drn5910]

I've now resolved the issue. It seems like the version of cmder I was using was _somehow_ interfering or causing it to not work. I tried in the normal Windows cmd.exe and it worked fine. Updated cmder to latest version and it works there too... apologies for the trouble.

[orhdoga]

After installing a fresh Laravel project:

npm install

This is where I got a bunch of errors.

I made Laravel mix work by updating node, like so:

1. nvm install stable
2. nvm use stable
3. Delete the node_modules folder (if you have it)
4. npm install
5. Now run npm run watch again and everything should work accordingly.

[elastisteve]

All these errors here on windows with npm are very annoying (this has nothing to do with Jeffrey or the package).

First we have to type npm install --no-bin-links - I don't even know why or what it does.

Then I get a long list of:
(node:30564) Warning: Possible EventEmitter memory leak detected. 11 error listeners added. Use emitter.setMaxListeners() to increase limit

followed by:

npm ERR! node v6.9.4
npm ERR! npm  v3.10.7

npm ERR! Maximum call stack size exceeded

Then I have to run npm install --no-bin-links again to complete, but now the node-sass has the vendor file missing!

What fixes it is:

node node_modules/node-sass/scripts/install.js
npm rebuild node-sass 

Now you are ready to use Mix! Everything feels "broken" about this procedure.

[drn5910]

As an update in case anyone else experiences the issue, even with the above fixes. I realised why cmd.exe was working for me - there seems to be an issue when running the command from a directory path that is junctioned / symlinked somewhere in the chain. If I use the normal path it works as expected, as soon as I swap to a symlinked location it no longer works (see below for example).

// normal, real path. running it inside this works
c:/foo

// sym linked directory to c:/foo, does not work from here
c:/server/foolink

[victorhugorch]

I have the same problem when I upgraded to version of Laravel 5.4. I decided to do:

1. Delete the node_modules folder
2. npm update
3. npm install

So this my problem was solved but a new problem appeared with the Vue example file. Then I do:

1. npm install vue-resource --save-dev

So my npm run dev worked perfectly.

[OlivierVanEester]

@david-ridgeonnet You just saved my day!

[Datazource]

this works with me ( on windows 10, [email protected] ) :

laravel-mix\src\Preprocessors\Preprocessors.js line 61
Change :

    test() {
        return new RegExp(this.src.path.replace(/\\/g, '\\\\') + '$');
    }

To :

    test() {
        return new RegExp(this.src.file.replace(/\\/g, '\\\\') + '$');
    }

[lancevjm]

@Datazource Thanks! your hack worked for me.

[hugo1337]

Hi guys I'm using Windows 10, Laravel 5.4 npm: 3.10.10 if i run -> npm run dev i get following error:
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "E:\Programmierung\nodejs\node.exe" "E:\Programmierung\nodejs\node_modules\npm\bin\npm-cli.js" "run" "development"
npm ERR! node v6.10.2
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
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 '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! 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! 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! 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! E:\Programmierung\wamp\wamp64\www\LaravelChat\npm-debug.log

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "E:\Programmierung\nodejs\node.exe" "E:\Programmierung\nodejs\node_modules\npm\bin\npm-cli.js" "run" "dev"
npm ERR! node v6.10.2
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! @ dev: npm run development
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ dev script 'npm run development'.
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! npm run development
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! E:\Programmierung\wamp\wamp64\www\LaravelChat\npm-debug.log

I followed @victorhugorch and @Datazource still that error :(
Has anybody an idea?
Thank you very much for any help.

[ruchern-chong]

@hugo1337

Try:

npm install -g --save-dev cross-env

And also update your npm version to v4
npm -g -i install npm

[ramseyjiang]

I did all things in the issue, but it still has the same issue.
My npm is 5.0.3
My node is v8.1.4

Who can help me?

[ramseyjiang]

npm run dev

@ dev /Users/ramsey/portfolio/pm_laravel
npm run development

@ development /Users/ramsey/portfolio/pm_laravel
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

ERROR Failed to compile with 2 errors 16:47:06

These dependencies were not found:

• /Users/ramsey/portfolio/pm_laravel/resources/assets/js/app.js in multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
• /Users/ramsey/portfolio/pm_laravel/resources/assets/sass/app.scss in multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

To install them, you can run: npm install --save /Users/ramsey/portfolio/pm_laravel/resources/assets/js/app.js /Users/ramsey/portfolio/pm_laravel/resources/assets/sass/app.scss
Asset Size Chunks Chunk Names
/js/app.js 2.95 kB 0 [emitted] /js/app
mix-manifest.json 32 bytes [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! /Users/jiangdawei/.npm/_logs/2017-07-13T04_47_06_852Z-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! /Users/jiangdawei/.npm/_logs/2017-07-13T04_47_06_873Z-debug.log

[ramseyjiang]

Actually, install a fresh laravel 5.4.28, and then install npm .
After that do npm run dev
Anyone will get the same issue.
But laravel works well

[nanadjei]

Am using laravel-mix 1.0 but I keep getting this error Module parse failed: c:\xampp\htdocs\webzilla\resources\assets\sass\images\icons\preloader.GIF Unexpected character '@' (1:6) any time I run npm run dev

[dierent]

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: 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 @ 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! /Users/zhaozhiwei/.npm/_logs/2017-11-01T04_55_22_659Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: npm run development
npm ERR! Exit status 1
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! /Users/zhaozhiwei/.npm/_logs/2017-11-01T04_55_22_686Z-debug.log

Has anybody an idea?
Thank you very much for any help.