Laravel Mix problem - Can not combine Scripts & Styles

Hi @scotalia

Can you show us your webpack mix file?

Did you try to add the scripts one by one?

I 'stacked' the individual scripts and styles here to make it more readable. In my file they are all on a single line for scripts and a single line for styles. And yes, I have tried to add each one at a time. If i run the default mix file (i.e. mix.js('resources/js/app.js', 'public/js') ) it will compile, so i know that mix IS working, just not for combining these files.

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.scripts(['public/js/jquery-3.1.1.min.js',
	'public/js/flickity.min.js',
	'public/js/easypiechart.min.js',
	'public/js/parallax.js',
	'public/js/typed.min.js',
	'public/js/datepicker.js',
	'public/js/isotope.min.js',
	'public/js/ytplayer.min.js',
	'public/js/lightbox.min.js',
	'public/js/granim.min.js',
	'public/js/jquery.steps.min.js',
	'public/js/countdown.min.js',
	'public/js/twitterfetcher.min.js',
	'public/js/spectragram.min.js',
	'public/js/smooth-scroll.min.js',
	'public/js/moment-with-locales.min.js',
	'public/js/scripts.js',
	'public/js/custom.js'],
 	'public/js/eurotripr.js')
    .styles(['public/css/bootstrap.css',
        'public/css/stack-interface.css',
        'public/css/lightbox.min.css',
        'public/css/flickity.css',
        'public/css/iconsmind.css',
        'public/css/jquery.steps.css',
        'public/css/theme.css',
        'public/css/custom.css'],
        'public/css/eurotripr.css');

And the output from the log?

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!     /home/craig/.npm/_logs/2020-05-20T05_33_23_069Z-debug.log

It is a syntax error in webpack.mix.js file.

Place the ] on the last line in both scripts and styles.

Before the closing parenthesis.

@mvdnbrk I don't think this would be the correct place to close the array. The array of scripts/styles is the first argument of the scripts()/styles() function. For example: ''' mix.scripts(['single1.js','single2.js'], 'combined.js'); ''' the first arg is the array of scripts you want to combine, the final arg is the file you want to create of the combined scripts...unless i am totally missing something in the docs and am wrong on these functions.

Right. Was too quick with my answer. What’s that v8-compile-cache module? The error says there is a missing ).

@mvdnbrk I originally thought the missing ')' was in my webpack.mix file but i dont think i'm missing it there. I will check into v8-compile-cache. thanks

@mvd The log details (sorry for the delay, my FT job has taken all my time the past couple days):

0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'development' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predevelopment', 'development', 'postdevelopment' ]
5 info lifecycle @~predevelopment: @
6 info lifecycle @~development: @
7 verbose lifecycle @~development: unsafe-perm in lifecycle true
8 verbose lifecycle @~development: PATH: /usr/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/var/www/eurotripr.com/node_modules/.bin:/usr/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/var/www/eurotripr.com/node_modules/.bin:/usr/local/bin:/usr/bin:/usr/local/sbin:/usr/sbin:/home/craig/.local/bin:/home/craig/bin
9 verbose lifecycle @~development: CWD: /var/www/eurotripr.com
10 silly lifecycle @~development: Args: [ '-c',
10 silly lifecycle   'cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js' ]
11 silly lifecycle @~development: Returned: code: 1  signal: null
12 info lifecycle @~development: Failed to exec development script
13 verbose stack Error: @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:198:13)
13 verbose stack     at ChildProcess.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:198:13)
13 verbose stack     at maybeClose (internal/child_process.js:982:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
14 verbose pkgid @
15 verbose cwd /var/www/eurotripr.com
16 verbose Linux 3.10.0-1127.8.2.el7.x86_64
17 verbose argv "/usr/bin/node" "/usr/bin/npm" "run" "development"
18 verbose node v10.20.1
19 verbose npm  v6.14.4
20 error code ELIFECYCLE
21 error errno 1
22 error @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
22 error Exit status 1
23 error Failed at the @ development script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

@scotalia thanks!

I am not familiar with npm debugging and I can't see the problem in the log. What if you remove or commentend out the the whole mix.scrip.... and run npm run dev ?

@mvd thanks for taking the time to review this.

when i remove the Arrays of scripts/styles to combine and do something like:

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

npm run dev works and compiles just fine....it SEEMS to be the use of scripts() and/or styles() or something in the arrays i am using for the combining of these, respectively. I'm just not sure what the issue is.

even if i try to combine 1 or 2 scripts (or styles) alone, using scripts() / styles() it does not run.

@scotalia also tried with (almost) empty files?

Example:

mix.scripts(['public/js/empty_1.js',
        'public/js/empty_2.js'],
    'public/js/eurotripr.js')
    .styles(['public/css/empty_1.css',
        'public/css/empty_2.css'],
        'public/css/eurotripr.css');

empty_1.js

console.log('empty 1');

empty_2.js

alert('empty 2');

empty_1.css

body {
    background: red;
    color: white;
}

empty_2.css

a {
    color: yellow;
}

this results in the same error. I think i am just going to manually combine all scripts into a single monolithic file and all styles into the same...this is too cumbersome. Thanks for your help @mvd!

My solution.

mix.setPublicPath("dist");
mix.setResourceRoot("/dist/");  
mix.config.fileLoaderDirs.fonts = "fonts";  
mix.config.fileLoaderDirs.images = "images";