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 install
• npm 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 node-uuid@1.4.7: use uuid module instead
- css-selector-tokenizer@0.7.0 node_modules/laravel-mix/node_modules/css-selector-tokenizer
- lodash.camelcase@4.3.0 node_modules/laravel-mix/node_modules/lodash.camelcase
ms@0.7.1 node_modules/send/node_modules/debug/node_modules/ms -> node_modules/localtunnel/node_modules/ms
ms@0.7.1 node_modules/express/node_modules/ms -> node_modules/webpack-dev-server/node_modules/ms
debug@2.2.0 node_modules/express/node_modules/debug -> node_modules/webpack-dev-server/node_modules/debug
/builds/agence-mute/act
`-- laravel-mix@0.8.1 
  +-- autoprefixer@6.7.3 
  | +-- browserslist@1.7.3 
  | | `-- electron-to-chromium@1.2.2 
  | +-- caniuse-db@1.0.30000623 
  | `-- postcss@5.2.13 
  +-- babel-loader@6.3.2 
  +-- browser-sync@2.18.8 
  | +-- browser-sync-client@2.4.5 
  | +-- browser-sync-ui@0.6.3 
  | | +-- async-each-series@0.1.1 
  | | +-- stream-throttle@0.1.3 
  | | | `-- limiter@1.1.0 
  | | `-- weinre@2.0.0-pre-I0Z7U9OV 
  | |   +-- express@2.5.11 
  | |   | +-- connect@1.9.2 
  | |   | | `-- formidable@1.0.17 
  | |   | +-- mime@1.2.4 
  | |   | +-- mkdirp@0.3.0 
  | |   | `-- qs@0.4.2 
  | |   `-- underscore@1.7.0 
  | +-- bs-recipes@1.3.4 
  | +-- connect@3.5.0 
  | | +-- debug@2.2.0 
  | | | `-- ms@0.7.1 
  | | `-- finalhandler@0.5.0 
  | +-- dev-ip@1.0.1 
  | +-- easy-extender@2.3.2 
  | | `-- lodash@3.10.1 
  | +-- eazy-logger@3.0.2 
  | | `-- tfunk@3.1.0 
  | |   `-- object-path@0.9.2 
  | +-- emitter-steward@1.0.0 
  | +-- fs-extra@1.0.0 
  | +-- http-proxy@1.15.2 
  | +-- immutable@3.8.1 
  | +-- localtunnel@1.8.2 
  | | +-- debug@2.2.0 
  | | +-- openurl@1.1.0 
  | | +-- request@2.78.0 
  | | | `-- node-uuid@1.4.7 
  | | `-- yargs@3.29.0 
  | |   +-- cliui@3.2.0 
  | |   `-- window-size@0.1.4 
  | +-- portscanner@2.1.1 
  | | +-- async@1.5.2 
  | | `-- is-number-like@1.0.7 
  | |   +-- bubleify@0.5.1 
  | |   | `-- object-assign@4.1.1 
  | |   `-- lodash.isfinite@3.3.2 
  | +-- qs@6.2.1 
  | +-- resp-modifier@6.0.2 
  | | `-- minimatch@3.0.3 
  | +-- rx@4.1.0 
  | +-- serve-static@1.11.1 
  | | `-- send@0.14.1 
  | |   `-- ms@0.7.1 
  | +-- server-destroy@1.0.1 
  | +-- socket.io@1.6.0 
  | | +-- debug@2.3.3 
  | | +-- engine.io@1.8.0 
  | | | +-- base64id@0.1.0 
  | | | +-- debug@2.3.3 
  | | | +-- engine.io-parser@1.3.1 
  | | | | +-- after@0.8.1 
  | | | | +-- arraybuffer.slice@0.0.6 
  | | | | +-- base64-arraybuffer@0.1.5 
  | | | | +-- blob@0.0.4 
  | | | | +-- has-binary@0.1.6 
  | | | | `-- wtf-8@1.0.0 
  | | | `-- ws@1.1.1 
  | | |   +-- options@0.0.6 
  | | |   `-- ultron@1.0.2 
  | | +-- has-binary@0.1.7 
  | | +-- object-assign@4.1.0 
  | | +-- socket.io-adapter@0.5.0 
  | | | `-- debug@2.3.3 
  | | `-- socket.io-parser@2.3.1 
  | |   +-- component-emitter@1.1.2 
  | |   `-- debug@2.2.0 
  | |     `-- ms@0.7.1 
  | +-- socket.io-client@1.6.0 
  | | +-- backo2@1.0.2 
  | | +-- component-bind@1.0.0 
  | | +-- component-emitter@1.2.1 
  | | +-- debug@2.3.3 
  | | +-- engine.io-client@1.8.0 
  | | | +-- component-emitter@1.2.1 
  | | | +-- component-inherit@0.0.3 
  | | | +-- debug@2.3.3 
  | | | +-- has-cors@1.1.0 
  | | | +-- parsejson@0.0.3 
  | | | +-- parseqs@0.0.5 
  | | | +-- xmlhttprequest-ssl@1.5.3 
  | | | `-- yeast@0.1.2 
  | | +-- object-component@0.0.3 
  | | +-- parseuri@0.0.5 
  | | | `-- better-assert@1.0.2 
  | | |   `-- callsite@1.0.0 
  | | `-- to-array@0.1.4 
  | +-- ua-parser-js@0.7.12 
  | `-- yargs@6.4.0 
  |   +-- camelcase@3.0.0 
  |   +-- cliui@3.2.0 
  |   +-- window-size@0.2.0 
  |   `-- yargs-parser@4.2.1 
  +-- browser-sync-webpack-plugin@1.1.4 
  +-- clean-css@4.0.7 
  +-- copy-webpack-plugin@4.0.1
  | `-- fs-extra@0.26.7 
  |   `-- graceful-fs@4.1.11 
  +-- css-loader@0.14.5 
  | `-- clean-css@3.4.24 
  |   `-- source-map@0.4.4 
  +-- friendly-errors-webpack-plugin@1.3.1 
  | `-- string-length@1.0.1 
  +-- html-loader@0.4.4 
  | +-- es6-templates@0.2.3 
  | | `-- recast@0.11.22 
  | |   +-- ast-types@0.9.5 
  | |   +-- esprima@3.1.3 
  | |   `-- source-map@0.5.6 
  | +-- html-minifier@3.3.1 
  | | +-- camel-case@3.0.0 
  | | | +-- no-case@2.3.1 
  | | | | `-- lower-case@1.1.3 
  | | | `-- upper-case@1.1.3 
  | | +-- clean-css@4.0.7 
  | | | `-- source-map@0.5.6 
  | | +-- commander@2.9.0 
  | | +-- ncname@1.0.0 
  | | | `-- xml-char-classes@1.0.0 
  | | +-- param-case@2.1.0 
  | | `-- relateurl@0.2.7 
  | `-- object-assign@4.1.1 
  +-- raw-loader@0.5.1 
  +-- sass-loader@5.0.1 
  | `-- lodash.tail@4.1.1 
  +-- UNMET PEER DEPENDENCY webpack@2.2.1
  `-- webpack-dev-server@2.3.0
    +-- express@4.14.1 
    | +-- finalhandler@0.5.1 
    | +-- qs@6.2.0 
    | +-- send@0.14.2 
    | | `-- ms@0.7.2 
    | `-- serve-static@1.11.2 
    `-- http-proxy-middleware@0.17.3
      `-- http-proxy@1.16.2 
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 fsevents@1.0.17: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“linux”,“arch”:“x64”})
npm WARN extract-text-webpack-plugin@2.0.0-rc.3 requires a peer of webpack@^2.2.0 but none was installed.
npm WARN webpack-dev-server@2.3.0 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/

[wwallace]

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

[BonBonSlick]

Same issue nothin above was helpful. Removed and reinstalled everything, used code from proposed above