Vuetify: [Bug Report] Adding transpileDependencies to allow support for IE11 breaks the app

[ekosynth]

Environment

Vuetify Version: 2.1.0
Vue Version: 2.6.10
Browsers: Chrome 77.0.3865.90
OS: Windows 10

Steps to reproduce

Add transpileDependencies: ['vuetify'] to module.exports in vue.config.js

Expected Behavior

App will load and work in IE11

Actual Behavior

App fails to load with following error:
index.ts?7706:11 Uncaught TypeError: Cannot read property 'extend' of undefined at Module.srcMixinsThemeableIndexTs (index.ts?7706:11) at __webpack_require__ (bootstrap?d2c1:19) at Module.srcComponentsVAppVAppTs (VApp.sass?e70b:1) at __webpack_require__ (bootstrap?d2c1:19) at Module.srcComponentsVAppIndexTs (index.ts?7dbb:1) at __webpack_require__ (bootstrap?d2c1:19) at Module.srcComponentsIndexTs (index.ts?3edf:1) at __webpack_require__ (bootstrap?d2c1:19) at Module.srcIndexTs (index.ts?9ddb:5) at __webpack_require__ (bootstrap?d2c1:19)

Reproduction Link

https://gist.github.com/ekosynth/c3190a09bbf3e0690833a4257303e5af

[cschweda]

+1

Same error with upgrade to Vuetify 2.1.0

[nekosaur]

We need more information.

• Are you using nuxt? if so are you using the nuxtjs/vuetify plugin?
• What does your main.js or equivalent entry point file look like?
• What does your vuetify initialization code look like?

[pklitscher]

@nekosaur hope this helps

Have just tried to add in transpileDependencies: ['vuetify'] to vue.config.js to provide Edge support and having the same issue. Error below is serving app via vue-cli-service serve

Vuetify Version: 2.1.0
Vue Version: 2.6.10
Browsers: Chrome 77.0.3865.90
OS: Windows 10

1. Not using nuxt.

2. /main.js

import Vue from 'vue'
import './plugins'
import './components'
import './views'
import App from './App.vue'
import router from './router'
import store from '@/store'
import vuetify from '@/plugins/vuetify'
import './registerServiceWorker'

Vue.config.productionTip = true

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

1. /plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import colors from 'vuetify/lib/util/colors'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'md'
  },
  theme: {
    themes: {
      light: {
        primary: colors.teal,
        secondary: '#19212b',
        accent: colors.teal
      }
    }
  }
})

Error:

[KaelWD]

You don't have vue installed?

[pklitscher]

@KaelWD
Lol no that was a copy paste error. import Vue from 'vue' was next to the code markup ```
Not having Vue would have certainly created some problems haha

[ekosynth]

@nekosaur, basically the same configuration as @pklitscher posted.

[nekosaur]

If you want to transpile vuetify using transpileDependencies you need to import it from vuetify/lib, not vuetify.

[ekosynth]

@nekosaur I still get the same result.

[TarikTz]

Any update on this?

I have the same error when I try to make my vuetify app run on Edge and IE11.

[jacekkarczmarczyk]

Would be easier to track the issue if you posted the link to github repo (boiled down)

[johnleider]

This is not a valid reproduction. If one is able to be produced, please create a new issue.

If you have any additional questions, please reach out to us in our Discord community.

[pklitscher]

Thank you @nekosaur changing to vuetify/lib was answer. Will now transpile and running in edge.

Keep up the great work guys. Love your work. Thank you 🙏

[NathanWailes]

To clarify for anyone who's a bit confused by nekosaur's answer: You need to modify your /src/plugins/vuetify.js file.

Look for a line that says import Vuetify from 'vuetify'.

Change it to say import Vuetify from 'vuetify/lib'.