0

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.

jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
Sam
  • 315
  • 1
  • 3
  • 14
  • 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* [mcve] 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 May 24 '23 at 15:25
  • Please, provide https://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 May 24 '23 at 15:26
  • You are reading the property name from a unknown object. However in the code you provided, there is nowhere '.name'... – Wimanicesir May 24 '23 at 15:28

0 Answers0