JavaScript + Vue error: "Cannot read properties of undefined (reading 'name')"

Question

I'm following this tutorial using Vue CLI, and I'm getting an error when writing the code in the second part (from 4:30) of this video.

I'm able to display the page http://localhost:8080/destination/ properly, but the moment I attempt to display, say, http://localhost:8080/destination/1 I get the following error:

Cannot read properties of undefined (reading 'name')
TypeError: Cannot read properties of undefined (reading 'name')
    at Proxy.render (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??

The message makes me think that the error occurs at index.js, so I include it below:

import { createRouter, createWebHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";

const routes = [
  {
    path: "/",
    name: "home",
    component: HomeView,
  },
  {
    path: "/about",
    name: "about",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
  },
  {
    path: "/brazil",
    name: "brazil",
    component: () => import("../views/BrazilView.vue"),
  },
  // Code of other destinations is similar to the above, and thus omitted
  {
    path: "/destination/:id",
    name: "destination",
    component: () => import("../views/DestinationShow.vue"),
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
  linkActiveClass: "active-link",
});

export default router;

I have stumbled upon TypeError: Cannot read properties of undefined (reading 'id') and TypeError: Cannot read properties of undefined (reading 'id'), yet if any of their answers solves my issue I'm unable to see how.

No, the error is not in /router/index.js. More detail is needed for anyone to be able to help. Ideally, you should create a runnable minimal reproducible example featuring the error. Use codesandbox.io or a similar service. The error is likely happening in /views/DestinationShow.vue, since that's the rendered component for your route. — tao
– tao, Commented May 24, 2023 at 15:25
Please, provide stackoverflow.com/help/mcve for your problem. The link is good as an additional reference but it's not enough, the problem should be understandable without navigating to external links. The problem is likely caused by DestinationShow which isn't shown, and the error likely means what it says, name property was accessed on a supposed object that is actually undefined — Estus Flask
– Estus Flask, Commented May 24, 2023 at 15:26
You are reading the property name from a unknown object. However in the code you provided, there is nowhere '.name'... — Wimanicesir
– Wimanicesir, Commented May 24, 2023 at 15:28

rosa b. · Accepted Answer · 2023-10-11 13:46:53Z

1

Got the same error. For me the problem was, that I forgot to pass the router to the Vue instance in src/main.js.

import Vue from 'vue'
import App from './App.vue'
import router from './router'  // import router

//...

new Vue({
  router,  // <-- add router when creating the root vue instance
  render: h => h(App),
}).$mount('#app')

answered Oct 11, 2023 at 13:46

rosa b.

2,1613 gold badges19 silver badges23 bronze badges

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

Collectives™ on Stack Overflow

JavaScript + Vue error: "Cannot read properties of undefined (reading 'name')"

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related