Laravel-mix: Can't build on a fresh Laravel 5.4 install
- Laravel Mix Version: 0.8.0
- Node Version (
node -v): 7.5.0 - NPM Version (
npm -v): 4.1.2 - OS: Alpine Linux (https://hub.docker.com/r/mhart/alpine-node/)
Hello,
I'm new to webpack and can't figure out why he can't find the configured file loaders...
Description:
Hello,
I've just updated my codebase to Laravel 5.4 and I wanted to give Mix a try. My asset pipeline failed during my CI pipeline.
I ran the commands :
npm installnpm run production
And I got the following errors :
error in ./resources/assets/sass/app.scss
Module parse failed: /builds/agence-mute/act/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 /js/app
error in ./resources/assets/js/components/Example.vue
Module parse failed: /builds/agence-mute/act/resources/assets/js/components/Example.vue Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
| <div class="container">
| <div class="row">
@ ./resources/assets/js/app.js 16:25-60
@ multi /js/app
Asset Size Chunks Chunk Names
/js/app.js 300 kB 0 [emitted] /js/app
mix-manifest.json 32 bytes [emitted]
npm ERR! Linux 4.5.2-docker-2
npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "run-script" "production"
npm ERR! node v7.5.0
npm ERR! npm v4.1.2
npm ERR! code ELIFECYCLE
npm ERR! @ production: `node node_modules/cross-env/bin/cross-env.js NODE_ENV=production 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 @ production script 'node node_modules/cross-env/bin/cross-env.js NODE_ENV=production 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=production 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! /builds/agence-mute/act/npm-debug.log
npm install log
npm WARN deprecated [email protected]: use uuid module instead
- [email protected] node_modules/laravel-mix/node_modules/css-selector-tokenizer
- [email protected] node_modules/laravel-mix/node_modules/lodash.camelcase
[email protected] node_modules/send/node_modules/debug/node_modules/ms -> node_modules/localtunnel/node_modules/ms
[email protected] node_modules/express/node_modules/ms -> node_modules/webpack-dev-server/node_modules/ms
[email protected] node_modules/express/node_modules/debug -> node_modules/webpack-dev-server/node_modules/debug
/builds/agence-mute/act
`-- [email protected]
+-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| `-- [email protected]
+-- [email protected]
+-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | `-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | `-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | | +-- [email protected]
| | | | +-- [email protected]
| | | | +-- [email protected]
| | | | +-- [email protected]
| | | | +-- [email protected]
| | | | `-- [email protected]
| | | `-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | `-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | | `-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| `-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| `-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
| `-- [email protected]
| `-- [email protected]
+-- [email protected]
| `-- [email protected]
| `-- [email protected]
+-- [email protected]
| `-- [email protected]
+-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | | +-- [email protected]
| | | | `-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | +-- [email protected]
| | `-- [email protected]
| `-- [email protected]
+-- [email protected]
+-- [email protected]
| `-- [email protected]
+-- UNMET PEER DEPENDENCY [email protected]
`-- [email protected]
+-- [email protected]
| +-- [email protected]
| +-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| `-- [email protected]
`-- [email protected]
`-- [email protected]
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN [email protected] requires a peer of webpack@^2.2.0 but none was installed.
npm WARN [email protected] requires a peer of webpack@^2.2.0 but none was installed.
Steps To Reproduce:
I've used a Node7 docker image to build my assets during CI pipeline: https://hub.docker.com/r/mhart/alpine-node/
shulard
All 9 comments
Can you paste your package.json file here?
JeffreyWay
on 16 Feb 2017
What is your lang attribute on your style tag set to in your Vue component? I had a similar issue when mine was set to 'sass'; needed to change to 'scss'.
danremollino
on 16 Feb 2017
Hello !
Thanks for your answer :smile:.
Here my package.json file :
{
"private": true,
"scripts": {
"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",
"watch": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"hot": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --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.8.0",
"lodash": "^4.16.2",
"vue": "^2.0.1",
"tinymce": "^4.5.2"
}
}
@danremollino actually I haven't any style in my Vue component because it's the default Laravel one...
shulard
on 17 Feb 2017
Copy laravel-mix config files for editing
cp -r node_modules/laravel-mix/setup/** ./
Remove old node-sass dependency which doesn't have the vendor folder
rm -rf node_modules/node-sass/
Reinstall latest node-sass
npm install node-sass --no-bin-links --save-dev
Update webpack.mix.js to reflect your current resource paths (example: I changed mine to mix.js('resources/assets/js/app.js', 'js/')
.sass('resources/assets/sass/app.scss', 'css/');
wwallace
on 17 Feb 2017
❤3
👍3
🎉1
My webpack.mix.js file :
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')
.version();
On my local computer it works but on the docker image inside my CI environment it fails... Maybe my node-sass installation is invalid in that docker image... I'll check that thanks.
shulard
on 17 Feb 2017
It seems that my problem is related to node_modules caching... I'm going to make more tests...
I've posted a question on "StackOverflow" to help deal with that caching problem : https://stackoverflow.com/questions/42301367/is-it-possible-to-invalidate-build-cache-on-a-given-branch
I close this issue which isn't related to "laravel-mix".
shulard
on 17 Feb 2017
Have also encountered this issue: none of the above was helpful. I suspect a bad update to a module that mix uses. I fixed it by installing a spare copy of laravel, and using its package.json file, and then npm installing bulma (optional), vue-cli (-g), and then running npm update. mix then worked.
softwareantelope
on 16 Jun 2017
@shulard Nuke your node_modules folder and reinstall the packages.
ruchern-chong
on 16 Jun 2017
Same issue nothin above was helpful. Removed and reinstalled everything, used code from proposed above
BonBonSlick
on 27 May 2018
Was this page helpful?
0 / 5 - 0 ratings
Related issues
wendt88
路
3Comments
mstralka
路
3Comments
dtheb
路
3Comments
stefensuhat
路
3Comments
Bomavi
路
3Comments
Most helpful comment
Copy laravel-mix config files for editing
cp -r node_modules/laravel-mix/setup/** ./Remove old node-sass dependency which doesn't have the vendor folder
rm -rf node_modules/node-sass/Reinstall latest node-sass
npm install node-sass --no-bin-links --save-devUpdate webpack.mix.js to reflect your current resource paths (example: I changed mine to
mix.js('resources/assets/js/app.js', 'js/') .sass('resources/assets/sass/app.scss', 'css/');