[Bug Report] Cannot read property 'startsWith' of undefined

[laolarou726]

Versions and Environment

Vuetify: 1.4.0 Vue: 2.5.21 Browsers: Chrome 72.0.3610.2 OS: Windows 10

Steps to reproduce

1. Using "npx create-nuxt-app" to create a new application use vuetify.
2. Change javascript to typescript for all the files.
3. It will show this error, happened in the vuetify source file "helper.ts".
4. But if I let the "default.vue" to keep javascript version, this error will not happen.

Expected Behavior

After the compile, it should show the main page.

Actual Behavior

It shows the Exception page of the WebPack plugin.

Reproduction Link

I can not reproduce this on the codepen.

Other comments

I set up my environment with Typescript + Nuxt + Vuetify, when I change the "lang" tag in the script node of the file "default.vue", it will cause the problem, However, it will not cause problems when I make the same change in the other files.

Here is my part of the package.json:

package.txt

And the nuxt.config.js:

nuxt.config.txt

Also the default.vue:

default.txt

Here is the part of the stack trace of the program:

And here is the content of the vuetify source code (helper.ts):

[dsseng]

You've submitted an issue that appears to have not been created from our issue creator. In order to effectively disposition this, we need additional information. This issue will be tagged as missing information for the next 14 days before being closed.

Thank you for your contribution and interest in improving Vuetify.

[laolarou726]

You've submitted an issue that appears to have not been created from our issue creator. In order to effectively disposition this, we need additional information. This issue will be tagged as missing information for the next 14 days before being closed.

Thank you for your contribution and interest in improving Vuetify.

I uploaded some new images about this problem. Can you please remove the tag? Thanks!

[johnleider]

Please use the correct format. We use a generator to help ensure that we have enough information in order to solve an issue. https://issues.vuetifyjs.com

[laolarou726]

Please use the correct format. We use a generator to help ensure that we have enough information in order to solve an issue. https://issues.vuetifyjs.com

Thanks! I already changed the issue.

[laolarou726]

You've submitted an issue that appears to have not been created from our issue creator. In order to effectively disposition this, we need additional information. This issue will be tagged as missing information for the next 14 days before being closed.

Thank you for your contribution and interest in improving Vuetify.

Could you please untag the invalid and the missing information tag? I already use the correct format of the issues. Thank you so much!

[blesstosam]

i am using version 1.4.3,and the bug is still exit, could you tell me when to fix this bug?

[laolarou726]

me too😂， this bug makes me lots of troubles.

[jacekkarczmarczyk]

Might be faster if you provide a minimal runnable repo

[laolarou726]

Sure, I put my source code on the git, you can get it from the repo: https://github.com/laolarou726/MessageBoard

[jacekkarczmarczyk]

Please note the word minimal This remapInternalIcon method is called only in v-icon component, so probably repro with only v-icon (and v-app) components should be enough

Edit: or maybe not, some Vuetify components use icons too, anyway repro should be boiled down

[laolarou726]

Ok, I will put the minimal version of code later.

[reut-soficoop]

Hi, I'm having the same problem, This is my navbar component:

<template lang="html">
    <div justify-center="true">
      <v-navigation-drawer
        :clipped="drawer.clipped"
        :fixed="drawer.fixed"
        :permanent="drawer.permanent"
        v-model="drawer.open"
        app
        right>
        <v-list>
            <v-list-tile v-if="!drawer.permanent" @click="makeDrawerPermanent" class="text-xs-right">
              <v-list-tile-action>
                <v-icon>account_circle</v-icon>
              </v-list-tile-action>
                <v-list-tile-title v-if="!isSignedIn" class="link" @click="isUserSignedIn({route: 'draft'})">הרשמה \ התחברות</v-list-tile-title>
              <v-list-tile-title @click="logout()" v-else class="link">התנתקות</v-list-tile-title>
              <v-list-tile-content>
              </v-list-tile-content>
            </v-list-tile>
            <v-list-tile class="text-xs-right">
              <v-list-tile-action>
                <v-icon>info</v-icon>
              </v-list-tile-action>
                <router-link :to="{name:'aboutConsenz', params:{prettyLink: documentId}}">אודות קונסנז</router-link>
              <v-list-tile-content>
              </v-list-tile-content>
            </v-list-tile>
            <v-list-tile class="text-xs-right">
              <v-list-tile-action>
                <v-icon>description</v-icon>
              </v-list-tile-action>
              <router-link :to='{name: "aboutDocument", params:{prettyLink: documentId} }'> אודות המסמך "{{documentTitle}}"</router-link>
              <v-list-tile-content>
              </v-list-tile-content>
            </v-list-tile>
            <v-list-tile>
              <!-- <v-list-tile-action>
                <v-icon>phone</v-icon>
              </v-list-tile-action>
              <router-link to="/contactUs"> יצירת קשר</router-link>
              <v-list-tile-content>
              </v-list-tile-content> -->
            </v-list-tile>
        </v-list>
      </v-navigation-drawer>
       <v-toolbar
          app
          :fixed="toolbar.fixed"
          :clipped-left="toolbar.clippedLeft"
        dark v-bind:style="{ backgroundColor: navBar.navBarColor }">
            <v-toolbar-side-icon @click="toggleDrawer" v-if="navBar.sideIconType === 'Hambur'"></v-toolbar-side-icon>
            <v-icon v-if="navBar.sideIconType === 'arrowForward'" @click="goTo" >arrow_forward</v-icon>
            <v-icon v-if="navBar.sideIconType === 'close'" @click="$router.go(-1)">close</v-icon>
            <v-spacer></v-spacer>
            <v-toolbar-title class="myHeadline">{{navBar.titleNavBar}}</v-toolbar-title>
            <v-spacer></v-spacer>
      </v-toolbar>
      <v-fade-transition mode="out-in">
        <router-view></router-view>
      </v-fade-transition>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { mapGetters, mapActions } from "vuex";
// import * as Firebase from "firebase/app";

@Component({
  computed: mapGetters({
    navBar: "display/navBar",
    user: "user/user",
    documentTitle: "document/documentTitle",
    documentId: "document/documentId",
    isSignedIn: "user/isSignedIn"
  }),
  methods: {
    ...mapActions({
      logOut: "user/logOut",
      isUserSignedIn: "user/isUserSignedIn"
    })
  }
})
export default class NavBar extends Vue {
  private navBar;
  private user;
  private documentTitle;
  private logOut;
  private isUserSignedIn;
  private documentId;
  private isSignedIn;
  private drawer = {
    open: false,
    clipped: true,
    fixed: false,
    permanent: false,
    mini: true
  };
  private toolbar = {
    fixed: true,
    clippedLeft: false
  };

  // changes the drawer to permanent
  makeDrawerPermanent() {
    this.drawer.permanent = true;
    // set the clipped state of the drawer and toolbar
    this.drawer.clipped = false;
    this.toolbar.clippedLeft = false;
  }
  // toggles the drawer type (permanent vs temporary) or shows/hides the drawer
  toggleDrawer() {
    if (this.drawer.permanent) {
      this.drawer.permanent = !this.drawer.permanent;
      // set the clipped state of the drawer and toolbar
      this.drawer.clipped = true;
      this.toolbar.clippedLeft = true;
    } else {
      // normal drawer
      this.drawer.open = !this.drawer.open;
    }
  }

  isUser() {}
  private goTo() {
    this.$router.push(this.navBar.action);
  }

  private async logout() {
    if (this.isSignedIn) {
      // await Firebase.auth().signOut();
      await this.logOut();
      this.toggleDrawer();
    }
  }
}
</script>

<style>
.v-list__tile__title {
  text-align: right !important;
}
.link {
  color: #1976d2 !important;
  cursor: pointer;
  text-decoration: underline;
}
</style>

And this is my App.vue

<template>
  <v-app id="app" class="force-mobile" dir="rtl">
    <v-dialog v-model="dialog" persistent content content-class="centered-dialog">
      <v-container fill-height>
        <v-layout column justify-center align-center>
          <v-progress-circular indeterminate :size="70" :width="7" color="white"></v-progress-circular>
        </v-layout>
      </v-container>
    </v-dialog>
    <v-content>
      <router-view v-if="isStoreCreated"></router-view>
    </v-content>
  </v-app>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { mapActions, mapMutations, mapGetters } from 'vuex' ;

@Component({
    computed: mapGetters({
      prettyLink: 'main/prettyLink',
      navBar: 'display/navBar',
  }),
  methods: {
    ...mapActions({
      initStore: "main/initStore"
    }),
    ...mapMutations({
      setPrettyLink: 'main/setPrettyLink'
    })
  }
})
export default class App extends Vue {
  private isStoreCreated: boolean = false;
  private dialog = true;
  private prettyLink;
  private initStore;
  private setPrettyLink;
  private navBar

  async created() {
    if (this.prettyLink === undefined) {
      const prettyLink =
        this.$route.params.prettyLink !== undefined
          ? this.$route.params.prettyLink
          : this.$route.query.prettylink;
          this.setPrettyLink(prettyLink)
          await this.initStore()
    }
    this.isStoreCreated = true;
    this.dialog = false;
  }
}
</script>
<style lang="scss">
@import "main.scss";
@import url("https://fonts.googleapis.com/css?family=Heebo");
#app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  background-color: $main-background-color;
  .v-toolbar {
    .v-toolbar__title {
      font-family: Heebo;
    }
  }
  -webkit-user-select: text;
}
#nav {
  padding: 30px;
  a {
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

Thanks!

[nekosaur]

We kindly ask users to not comment on closed/resolved issues. If you believe that this issue has not been correctly resolved, please create a new issue showing the regression or reach out to us in our Discord community.

[reut-soficoop]

But this is an open issue. Am I wrong?

[nekosaur]

Haha yes, it totally is. Sorry about that. But pasting code blocks does not help much in troubleshooting issues. As jacek mentioned just above your comment, we neeed a minimal reproduction of the problem using something like codepen or codesandbox.

[reut-soficoop]

I tried to reproduce on codepen but it's not working. :/ I also tried to put the library outside node_modules so I can debug it, and the problem came from this function vuetify/dist/vuetify.js:

function remapInternalIcon(parent, iconName) {
    if (!iconName.startsWith(ICONS_PREFIX)) {
        // return original icon name unchanged
        return iconName;
    }
    // Now look up icon indirection name, e.g. '$vuetify.icons.cancel':
    return Object(_util_helpers__WEBPACK_IMPORTED_MODULE_3__["getObjectValueByPath"])(parent, iconName) || iconName;
}

The icon name wad undefined (when I used v-if to alternate between icons). When I commented this v-icon lines, the function has the iconName argument but the error was about creating an element from iconName that was a string.

In the meantime, I commented all the v-icons from my app.

[laolarou726]

Haha yes, it totally is. Sorry about that. But pasting code blocks does not help much in troubleshooting issues. As jacek mentioned just above your comment, we neeed a minimal reproduction of the problem using something like codepen or codesandbox.

Sorry for the delay to give you the reply. I tried to make the smallest version to refactor the bug, however this time it works in the default.vue file???? This time I only put a v-icon in v-app node and no other files are been added. So this may be a really big problem for me to use vuetify in the future development :/

Here is the whole part of the default.vue files default.txt

[johnleider]

This issue is being closed due to:

• [x] Reproduction environment not provided (inactivity for 14 days)
• [x] Requested information not provided (inactivity for 14 days)
• [ ] Violation of the Code of Conduct