Laravel Mix with "extract" call breaks the app

I'm trying to separate some dependencies from the vendor file using Laravel mix, this is the config:

mix
.js('resources/js/app.js', 'public/js')
.js('resources/js/resorts.js', 'public/js')
.js('resources/js/cookie.js', 'public/js')
.extract(['@js-joda'], 'public/js/js-joda')
.extract(['glightbox'], 'public/js/glightbox')
// extract other libs from node_modules to separate file vendor.js
.extract()
.sourceMaps(true, 'source-map')
.vue()

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

// run bundle analyzer with "npm run watch"
if (mix.isWatching()) {
    mix.bundleAnalyzer();
}

This separates the vendor.js into multiple files as stated, however the problem is that the app.js no longer executes.

What am I doing wrong?

(Laravel version 8, Laravel mix 6)

Maybe the solution is to switch to Vite, I don't know if it supports extraction of dependencies...

marinm

3 years ago

Level 1

The problem seems to be in the app.js and imports:

app.js:

	require('./bootstrap');
	import ('./gallery');

If I change to dynamic imports:

import('./bootstrap');
import ('./gallery');

app.js starts executing but I get a new problem, gallery and vue stops working, Laravel mix generates two additional files:

js/resources_js_bootstrap_js.js                                                                                                                                           
js/resources_js_gallery_js.js

Please or to participate in this conversation.