Error in render: “TypeError: Cannot read property 'smAndDown' of undefined” in materialui

Question

I am try to solve this issue but i Cannot do it e warn]: Error in render: "TypeError: Cannot read property 'smAndDown' of undefined"

found in

---> at src/components/AppToolbar.vue at src/App.vue warn @ vue.runtime.esm.js?2b0e:619 logError @ vue.runtime.esm.js?2b0e:1884 globalHandleError @ vue.runtime.esm.js?2b0e:1879 handleError @ vue.runtime.esm.js?2b0e:1839 Vue._render @ vue.runtime.esm.js?2b0e:3550 updateComponent @ vue.runtime.esm.js?2b0e:4066 get @ vue.runtime.esm.js?2b0e:4479 Watcher @ vue.runtime.esm.js?2b0e:4468 mountComponent @ vue.runtime.esm.js?2b0e:4073 Vue.$mount @ vue.runtime.esm.js?2b0e:8415 init @ vue.runtime.esm.js?2b0e:3118 createComponent @ vue.runtime.esm.js?2b0e:5978 createElm @ vue.runtime.esm.js?2b0e:5925 patch @ vue.runtime.esm.js?2b0e:6477 Vue._update @ vue.runtime.esm.js?2b0e:3945 updateComponent @ vue.runtime.esm.js?2b0e:4066 get @ vue.runtime.esm.js?2b0e:4479 Watcher @ vue.runtime.esm.js?2b0e:4468 mountComponent @ vue.runtime.esm.js?2b0e:4073 Vue.$mount @ vue.runtime.esm.js?2b0e:8415 init @ vue.runtime.esm.js?2b0e:3118 createComponent @ vue.runtime.esm.js?2b0e:5978 createElm @ vue.runtime.esm.js?2b0e:5925 createChildren @ vue.runtime.esm.js?2b0e:6053 createElm @ vue.runtime.esm.js?2b0e:5954 patch @ vue.runtime.esm.js?2b0e:6477 Vue._update @ vue.runtime.esm.js?2b0e:3945 updateComponent @ vue.runtime.esm.js?2b0e:4066 get @ vue.runtime.esm.js?2b0e:4479 Watcher @ vue.runtime.esm.js?2b0e:4468 mountComponent @ vue.runtime.esm.js?2b0e:4073 Vue.$mount @ vue.runtime.esm.js?2b0e:8415 init @ vue.runtime.esm.js?2b0e:3118 createComponent @ vue.runtime.esm.js?2b0e:5978 createElm @ vue.runtime.esm.js?2b0e:5925 patch @ vue.runtime.esm.js?2b0e:6516 Vue._update @ vue.runtime.esm.js?2b0e:3945 updateComponent @ vue.runtime.esm.js?2b0e:4066 get @ vue.runtime.esm.js?2b0e:4479 Watcher @ vue.runtime.esm.js?2b0e:4468 mountComponent @ vue.runtime.esm.js?2b0e:4073 Vue.$mount @ vue.runtime.esm.js?2b0e:8415 Vue._init @ vue.runtime.esm.js?2b0e:5018 Vue @ vue.runtime.esm.js?2b0e:5085 eval @ main.js?56d7:20 ./src/main.js @ app.js:2296 webpack_require @ app.js:726 fn @ app.js:101 1 @ app.js:2310 webpack_require @ app.js:726 (anonymous) @ app.js:793 (anonymous) @ app.js:796 Show 22 more frames vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'smAndDown' of undefined at VueComponent.computedContentHeight (vuetify.js?ce5b:28494) at Watcher.get (vue.runtime.esm.js?2b0e:4479) at Watcher.evaluate (vue.runtime.esm.js?2b0e:4584) at VueComponent.computedGetter [as computedContentHeight] (vue.runtime.esm.js?2b0e:4836) at VueComponent.genContent (vuetify.js?ce5b:28556) at Proxy.render (vuetify.js?ce5b:28571) at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3548) at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4066) at Watcher.get (vue.runtime.esm.js?2b0e:4479) at new Watcher (vue.runtime.esm.js?2b0e:4468) logError @ vue.runtime.esm.js?2b0e:1888 globalHandleError @ vue.runtime.esm.js?2b0e:1879 handleError @ vue.runtime.esm.js?2b0e:1839 Vue._render @ vue.runtime.esm.js?2b0e:3550 updateComponent @ vue.runtime.esm.js?2b0e:4066 get @ vue.runtime.esm.js?2b0e:4479 Watcher @ vue.runtime.esm.js?2b0e:4468 mountComponent @ vue.runtime.esm.js?2b0e:4073 Vue.$mount @ vue.runtime.esm.js?2b0e:8415 init @ vue.runtime.esm.js?2b0e:3118 createComponent @ vue.runtime.esm.js?2b0e:5978 createElm @ vue.runtime.esm.js?2b0e:5925 patch @ vue.runtime.esm.js?2b0e:6477 Vue._update @ vue.runtime.esm.js?2b0e:3945 updateComponent @ vue.runtime.esm.js?2b0e:4066 get @ vue.runtime.esm.js?2b0e:4479 Watcher @ vue.runtime.esm.js?2b0e:4468 mountComponent @ vue.runtime.esm.js?2b0e:4073 Vue.$mount @ vue.runtime.esm.js?2b0e:8415 init @ vue.runtime.esm.js?2b0e:3118 createComponent @ vue.runtime.esm.js?2b0e:5978 createElm @ vue.runtime.esm.js?2b0e:5925 createChildren @ vue.runtime.esm.js?2b0e:6053 createElm @ vue.runtime.esm.js?2b0e:5954 patch @ vue.runtime.esm.js?2b0e:6477 Vue._update @ vue.runtime.esm.js?2b0e:3945 updateComponent @ vue.runtime.esm.js?2b0e:4066 get @ vue.runtime.esm.js?2b0e:4479 Watcher @ vue.runtime.esm.js?2b0e:4468 mountComponent @ vue.runtime.esm.js?2b0e:4073 Vue.$mount @ vue.runtime.esm.js?2b0e:8415 init @ vue.runtime.esm.js?2b0e:3118 createComponent @ vue.runtime.esm.js?2b0e:5978 createElm @ vue.runtime.esm.js?2b0e:5925 patch @ vue.runtime.esm.js?2b0e:6516 Vue._update @ vue.runtime.esm.js?2b0e:3945 updateComponent @ vue.runtime.esm.js?2b0e:4066 get @ vue.runtime.esm.js?2b0e:4479 Watcher @ vue.runtime.esm.js?2b0e:4468 mountComponent @ vue.runtime.esm.js?2b0e:4073 Vue.$mount @ vue.runtime.esm.js?2b0e:8415 Vue._init @ vue.runtime.esm.js?2b0e:5018 Vue @ vue.runtime.esm.js?2b0e:5085 eval @ main.js?56d7:20 ./src/main.js @ app.js:2296 webpack_require @ app.js:726 fn @ app.js:101 1 @ app.js:2310 webpack_require @ app.js:726 (anonymous) @ app.js:793 (anonymous) @ app.js:796 Show 21 more frames AppToolbar.vue

<template>
  <v-toolbar color="indigo" dark>
    <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
    <router-link to="/"> 
    <v-toolbar-title class="white--text">Admin</v-toolbar-title>
    </router-link>
    <v-spacer></v-spacer>
    <v-badge right bottom="">
      <template v-slot:badge>
        <span>24</span>
      </template>
      <v-icon
        large
        color="grey lighten-1"
      >
        shopping_cart
      </v-icon>
    </v-badge>
    <div class="hidden-sm-and-down">
      <v-btn flat>AboutUs</v-btn>
      <router-link to="/contact"><v-btn flat>Contacts</v-btn>></router-link>
      <router-link to="/login"><v-btn flat>Login</v-btn></router-link>
    </div>
    <div class="hidden-md-and-up">
      <template>
  <v-navigation-drawer
    v-model="drawer"
    class="pb-0"
    floating
    hide-overlay
    stateless
    width="380"
    height="400px"
    margin="top"
  >
    <v-layout fill-height>
      <v-navigation-drawer
        dark
        mini-variant
        stateless
        value="true"
      >
        <v-toolbar flat class="transparent">
          <v-list class="pa-0">
            <v-list-tile avatar>
              <v-list-tile-avatar>
                <img src="https://randomuser.me/api/portraits/men/85.jpg">
              </v-list-tile-avatar>

              <v-list-tile-content>
                <v-list-tile-title>John Leider</v-list-tile-title>
              </v-list-tile-content>

              <v-list-tile-action>
                <v-btn
                  icon
                  @click.native.stop="mini = !mini"
                >
                  <v-icon>chevron_left</v-icon>
                </v-btn>
              </v-list-tile-action>
            </v-list-tile>
          </v-list>
        </v-toolbar>

        <v-list class="pt-0" dense>
          <v-divider></v-divider>

          <v-list-tile
            v-for="item in items"
            :key="item.title"
          >
            <v-list-tile-action>
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-tile-action>

            <v-list-tile-content>
              <v-list-tile-title>{{ item.title }}</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
        </v-list>
      </v-navigation-drawer>

      <v-list class="grow">
        <v-list-tile
          v-for="link in links"
          :key="link"
        >
          <v-list-tile-title v-text="link"></v-list-tile-title>
        </v-list-tile>
      </v-list>
    </v-layout>
  </v-navigation-drawer>
</template>
    </div>
  </v-toolbar>
</template>

<script>
export default {
  data () {
      return {
        drawer: true,
        items: [
          { title: 'Home', icon: 'dashboard' },
          { title: 'About', icon: 'question_answer' }
        ],
        links: ['Home', 'Contacts', 'Settings'],
        mini: true,
        right: null
      }
    }
}
</script>

Answer 1

surely you will be loading vuetify as a plugin, that's where the error comes from. To solve this issue delete the file [@/plugins/vuetify.js] and load it as follows method

main.js

import Vue from "vue";
import Vuetify from "vuetify"; //<----

Vue.use(Vuetify); //<----
import "vuetify/dist/vuetify.min.css";

new Vue({
    store,
    router,
    vuetify: new Vuetify(), //<-----
    render: (h) => h(App),
}).$mount("#app");

and in App.vue on your #app div you must add new attributes

App.vue

<template>
    <div id="app" data-app app-data="true" light>

With this method you don't need <v-app>

And with this method you the error is gone and other error "dark, isActive" too.

Regards

Answer 2

You might be using incorrect display helper classes

https://vuetifyjs.com/en/styles/display/

In your case

<div class="d-none d-sm-block">
 <span> Your Content</span>
</div>

or you might want to use vuetify's breakpoint with v-if directive, which is a more suitable data first approach

https://vuetifyjs.com/en/customization/breakpoints/

<div v-if="this.$vuetify.breakpoint.smAndUp">
 <span>Your Content</span>
</div>

Answer 3

I was getting the same error, but only when going from 'canvas' to 'docs' tab:

After a long struggle, I was able to confirm that it was because I was adding an unused parameter 'args' in the Template of my story file:

                    |  
------------------  v  ----------------
 const Template = (args) => ({
  components: { KpiCard },
  template: `
    <KpiCard >
      <v-skeleton-loader type="card" />
    </KpiCard>              
  `,
});

So I removed it and no more error :)