Vuetify: [Bug Report] trying vuetify-v2.0.0-alpha.12

Created on 4 Apr 2019 · 6Comments · Source: vuetifyjs/vuetify

Versions and Environment

Vuetify: 2.0.0-alpha.12
Vue: 2.6.10
Browsers: Chrome 73.0.3683.86
OS: Windows 10

Steps to reproduce

download vuetify-v2.0.0-alpha.12.zip from github
unzip it to basic folder
create index.html from https://next.vuetifyjs.com/en/getting-started/quick-start#cdn-install

Expected Behavior

should display Hello world

Actual Behavior

many errors in chrome console

vue.js:634 [Vue warn]: Error in render: "TypeError: Cannot read property 'bar' of undefined"

found in

---> <VContent>
       <VApp>
         <Root>

vue.js:1897 TypeError: Cannot read property 'bar' of undefined
    at VueComponent.styles (vuetify-v2.0.0-alpha.12.js:10099)
    at Watcher.get (vue.js:4472)
    at Watcher.evaluate (vue.js:4577)
    at Proxy.computedGetter (vue.js:4826)
    at Proxy.render (vuetify-v2.0.0-alpha.12.js:10117)
    at VueComponent.Vue._render (vue.js:3545)
    at VueComponent.updateComponent (vue.js:4061)
    at Watcher.get (vue.js:4472)
    at new Watcher (vue.js:4461)
    at mountComponent (vue.js:4068)

vuetify-v2.0.0-alpha.12.js:26510 Uncaught TypeError: _this.$el.setAttribute is not a function
    at vuetify-v2.0.0-alpha.12.js:26510

Reproduction Link

https://changsijay.github.io/testing/basic/index.html

source

https://github.com/changsijay/testing/tree/master/basic

Source

changsijay

👍5

Most helpful comment

Is anybody trying the v2.0.0 with Nuxt?
And how to success?

It's great to experience new features and preparing to migrate to v2.0.0 at the moment.

wemod123 on 22 Apr 2019

👍14

All 6 comments

I'm having similar errors with v2.0.0-alpha.12. This is on a fresh install. In other words, I did NOT upgrade Vuetify from a previous version--it started with alpha.12. It appears that this.$vuetify is not defined for any components below <v-app>. In other words, if I have a template such as:

<template>
  <v-app>
    <router-outlet />
  </v-app>
</template>

Then no errors are thrown. However, as soon as I add any other Vuetify components inside of <v-app> then I get numerous Cannot read property X of undefined errors. For example, if I modify the above template to:

<template>
  <v-app>
    <v-content>
      <router-outlet />
    </v-content>
  </v-app>
</template>

Then I get the following in the console:

[Vue warn]: Error in render: "TypeError: Cannot read property 'bar' of undefined"

found in

---> <VContent>
       <VApp>
         <App> at src/App.vue
           <Root>

However, if the first component inside of <v-app> is, say, a <v-toolbar> like this:

<template>
  <v-app>
    <v-toolbar app>
      <v-toolbar-side-icon @click.stop="drawer = !drawer" />
      <img src="@/assets/logo.svg">
      <v-toolbar-title class="headline text-uppercase">
        My Website
      </v-toolbar-title>
    </v-toolbar>
    <v-content>
      <router-outlet />
    </v-content>
  </v-app>
</template>

Then the error that I get is:

[Vue warn]: Error in created hook: "TypeError: Cannot read property 'register' of undefined"

found in

---> <VAppBar>
       <VApp>
         <App> at src/App.vue
           <Root>

In other words, the error is triggered by whatever the first Vuetify component is inside of <v-app>. For reference, I'm registering Vuetify as follows:

// /src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify, {})

// /src/main.js
import Vue from 'vue'
import '@/plugins/vuetify'
import App from '@/App.vue'

Vue.config.productionTip = false

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

// /vue.config.js
const fs = require('fs')
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        implementation: require('sass'),
        fiber: require('fibers')
      }
    }
  },
  configureWebpack: config => {
    if (process.env.NODE_ENV !== 'production') {
      config.devServer = {
        host: 'example.test',
        https: {
          key: fs.readFileSync('./devServer.key'),
          cert: fs.readFileSync('./devServer.crt'),
          ca: fs.readFileSync(process.env.HOME + '/.ssh/rootDevCA.pem')
        }
      }
    }
    config.plugins.push(
      new VuetifyLoaderPlugin()
    )
  },
  pluginOptions: {
    i18n: {
      locale: 'en',
      fallbackLocale: 'en',
      localeDir: 'locales',
      enableInSFC: false
    }
  }
}

At first I thought it might have been a problem with my webpack config (i.e. vue.config.js), but after seeing that @changsijay is having the same problem when loading Vuetify from CDN, I'm thinking a bug was introduced in the most recent alpha release.

FWIW, I tried rolling back to alpha.11 but since I had not installed stylus-loader and I didn't want to go through all the steps of re-adding stylus just so I could figure this out, I quickly just went back to alpha.12.

morphatic on 5 Apr 2019

We are not accepting bug reports for 2.0 alpha at this time. The docs for installing 2.0 have not been updated yet to reflect installation by all methods.

@morphatic your issue most likely has to do with the fact that you are not bootstrapping properly. Review alpha.5 release notes.

If you are in need of help or have any additional questions, please reach out to us in our Discord community.

Thank you for your interest in and support of Vuetify.