Netlify build causes reading from undefined error vuejs

Question

I am trying to develop an application in vuejs and deploy it using netlify. Note that I am very new to vuejs. I have no warnings or errors in production but when deploying, the website is blank and the following error appears in console :

TypeError: Cannot read properties of undefined (reading 'currentPath')
at index.7d385d0f.js:54:2330
at ls (index.7d385d0f.js:1:23187)
at Proxy.<anonymous> (index.7d385d0f.js:54:2247)
at vn (index.7d385d0f.js:1:15170)
at Jn.b [as fn] (index.7d385d0f.js:1:38048)
at Jn.run (index.7d385d0f.js:1:4525)
at G.c.update (index.7d385d0f.js:1:38314)
at G (index.7d385d0f.js:1:38340)
at rt (index.7d385d0f.js:1:37206)
at ve (index.7d385d0f.js:1:37000)

I only use "currentPath" in one file :

In the <script> tag :

export default {
  data: {
    currentPath: "",
  },
  data() {
    return {
      currentPath: window.location.hash || "",
    };
  },
  computed: {
    currentView() {
      return routes[this.currentPath.slice(1) || "/"].route || NotFound;
    },
  },
  mounted() {
    window.addEventListener("hashchange", () => {
      this.currentPath = window.location.hash || "";
    });
  },
};

In my html :

<template>
  <notifications />
  <header class="header">
    <a
      v-for="(route, url) in routes"
      :key="route.name"
      class="header-item"
      :class="{ 'header-item-current': this.currentPath === `#${url}` }"
      :href="`#${url}`"
    >
      {{ route.name }}
    </a>
  </header>
  <component class="content" :is="currentView" />
</template>

Ok well I fixed the error by changing this.currentPath to this?.currentPath. But I still don't understand why I would only have this error once the application is deployed. — Lucas
– Lucas, Commented Jul 21, 2022 at 21:31
Actually, I fixed the error but then the 'header-item-current' class is not being applied to any element when it should be applied to the element in the header that corresponds to the current page. This works fine in production. — Lucas
– Lucas, Commented Jul 21, 2022 at 21:38
You have data as an object and as a function on your default export. Remove the object one. See data. You also forgot to mention if you're using Vue2 or Vue3. — tao
– tao, Commented Jul 22, 2022 at 2:02
Oh ok, I actually added the object Data in an attempt to solve this problem as I read somewhere that it could be due to the data not being initialized. I am using vue3. — Lucas
– Lucas, Commented Jul 23, 2022 at 7:23

Lucas · Accepted Answer · 2022-07-21 22:10:51Z

1

Okay it would seem it is not necessary (and even causes problems) to use 'this.' inside the html of a vuejs SFC. I have changed

<a
  v-for="(route, url) in routes"
  :key="route.name"
  class="header-item"
  :class="{ 'header-item-current': this.currentPath === `#${url}` }"
  :href="`#${url}`"
>
  {{ route.name }}
</a>

to

<a
  v-for="(route, url) in routes"
  :key="route.name"
  class="header-item"
  :class="{ 'header-item-current': currentPath === `#${url}` }"
  :href="`#${url}`"
>
  {{ route.name }}
</a>

and not only has the error gone away but everything works fine !

answered Jul 21, 2022 at 22:10

Lucas

112 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Netlify build causes reading from undefined error vuejs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related