Vue-CLI 3 and Vuetify - Problem with installComponents in production mode (TypeError: T(...)(...) is not a function)

vue-cli
vuetify
webpack

#1

Using Vue-cli plugin I’ve created small SPA application with Vuetify component framework. When I was running in dev mode everything was fine but in production mode there was problem with components 'installComponents' has already been declared

Then I’ve found out that this was connected with Tree shaking option that only worksi with webpack 4 in production mode. Or to be more precise including components that you need, instead of getting all of them.

So, instead of registering every single component I tried to use vuetify-loader to automatize " a la carte components " but I it seems that I’m missing something.

my plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl'

Vue.use(Vuetify)

And my vue.config.js is like this

const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
module.exports = {
  configureWebpack: {
    plugins: [
      new VuetifyLoaderPlugin()
    ]
  }
}

And main.js is like this:

import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import router from './router'
import store from './store/store'
import axios from 'axios';

Vue.config.productionTip = false

//adding main path to baseurl
axios.defaults.baseURL = "";
// Global settings for Axios
Vue.prototype.$http = axios;


new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

And I’m still getting this error

Module parse failed: Identifier 'installComponents' has already been declared (35:7)

It’s worth mentioning that my babel.config.js looks like this:

module.exports = {
  presets: [
    '@vue/app'
  ]
}

I’m using vue 2.5.21 and vuetify 1.3.0

UPDATE

I changed my vue.config.js with this lines

module.exports = {
    publicPath: process.env.NODE_ENV === 'production'
        ? '/hr-map/'
        : '/vue-map/',
    chainWebpack: config => {
        config.module
            .rule('vue')
            .use('vue-loader')
            .loader('vue-loader')
            .tap(options => {
                // modify the options...
                return options
            })
    }
}

But now in production I’m getting rather strange error for my components

Uncaught TypeError: T(...)(...) is not a function
at Module.56d7 (VectorFeatures.vue:37)
at r (bootstrap:78)
at Object.0 (bootstrap:151)
at r (bootstrap:78)
at i (bootstrap:45)
at bootstrap:151
at bootstrap:151

And when I click on error I’m seeing this


Like there is some problem with vuetify plugin.

And here is my folder structure.

UPDATE II

Maybe also worth mentioning that if I comment out let’s say poland or croatia route in production everything works fine. Like there is come code duplication that in production environment breaks up

import Vue from 'vue'
import Router from 'vue-router'
import Dashboard from '@/views/Dashboard.vue'
import Croatia from '@/views/CroatiaMap.vue'
import Poland from '@/views/PolandMap.vue'



Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'dashboard',
      component: Dashboard
    },
    {
      path: '/croatia',
      name: 'croatia',
      component: Croatia,
      meta: { keepAlive: true }
    },
    {
      path: '/poland',
      name: 'poland',
      component: Poland,
      meta: { keepAlive: true }
    }
  ]
})

I’m losing my mind over this problem and I’ m nowhere near solution