Vuetify & Webpack Encore compilation error - vue.js

Question

I created (currently standalone) and API and a VueJs (with Vuetify) App and wanted to combine both using the webpack encore bundle for Symfony.
But when I want to build the frontend app, I get this error when executing yarn run encore dev:
(node:12500) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'length' of undefined
at items.forEach.item (/Users/pguetschow/Projects/hosting-tool/node_modules/vuetify-loader/lib/loader.js:21:60)
at Set.forEach (<anonymous>)
at Object.getMatches (/Users/pguetschow/Projects/hosting-tool/node_modules/vuetify-loader/lib/loader.js:16:9)
at Object.module.exports (/Users/pguetschow/Projects/hosting-tool/node_modules/vuetify-loader/lib/loader.js:106:64)
at process._tickCallback (internal/process/next_tick.js:68:7)
(node:12500) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:12500) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
This is my webpack.config.js
const Encore = require('#symfony/webpack-encore');
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.cleanupOutputBeforeBuild()
.enableSourceMaps(!Encore.isProduction())
.cleanupOutputBeforeBuild()
.addEntry('js/main', './assets/js/main.js')
.enableVueLoader()
.enableBuildNotifications(true)
.addPlugin(new VuetifyLoaderPlugin())
;
module.exports = Encore.getWebpackConfig();
Any idea? The standalone app is working fine, I simply moved it to the assets/js folder. I require vuetify-loader ^1.2.2 for this.
And this is my main.js:
import Vue from 'vue'
import App from './App.vue'
import Vuetify from 'vuetify/lib'
import MultiFiltersPlugin from './plugins/MultiFilters'
import 'vuetify/src/stylus/app.styl'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
import 'vuetify/dist/vuetify.min.css'
Vue.use(MultiFiltersPlugin);
Vue.use(Vuetify, {
iconfont: 'md',
});
new Vue({render: h => h(App),}).$mount('#app');

Answer 1

Here's an example webpack.config.js file from this working example that shows how to get Symfony and Vuetify (v.2x) to play nice together:
var Encore = require('#symfony/webpack-encore');
// import vuetify-loader as a plugin here
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.enableVueLoader() // <-- IMPORTANT: this loads Vue
// NOTE: I put my Vue app in assets/vue which I think is non-standard
// but it allows me to structure my Vue app as I would in a non-Symfony app
.addEntry('app', './assets/vue/main.js')
.splitEntryChunks()
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())
.configureBabel(() => {}, {
useBuiltIns: 'usage',
corejs: 3
})
// add VuetifyLoaderPlugin: THIS loads all of the Vuetify components
.addPlugin(new VuetifyLoaderPlugin())
// enables Sass/SCSS support
.enableSassLoader(options => {
options.implementation = require('sass')
options.fiber = require('fibers')
})
;
module.exports = Encore.getWebpackConfig();
Caveat, I'm not really a symfony developer, but this worked for me. HTH!