vue-router: error encountered while attempting to load asynchronous component for rendering

I'm new to vue-router and having trouble getting it to work. When I try to start my app, these errors pop up:

[vue-router] Failed to resolve async component render: TypeError: _vm is undefined
49:16:39
[vue-router] uncaught error during route navigation:
49:16:39
TypeError: _vm is undefined
Stack trace:
render@webpack-internal:///63:3:7
resolveAsyncComponents/</<@webpack-internal:///49:1774:17
flatMapComponents/</<@webpack-internal:///49:1801:66
...

Here are the contents of my files : main.js

import Vue from 'vue'
import App from './App.vue'
import router from './routes.js'
import 'bootstrap'

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

routes.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './Home.vue'

export const routes = [
  { name: 'Home', path: '', components: Home }
]

Vue.use(VueRouter)

const router = new VueRouter({
  routes
})

export default router

Answer №1

A correction is needed for the word routes, modify components to component:

export const routes = [
  { name: 'Home', path: '', component: Home }
]

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using JavaScript, import the variable module object from a specific module

Is there a way to import a module object from a module if I am unsure of the specific objects I will need beforehand? How can I utilize a variable in place of fixed module names? import { dynamicVariable } from './module' The variable represents ...

Vue.js: Exploring the issue of filtering using v-if and v-for

I'm encountering an issue with a computed property in Vue.js that is being used in a v-if statement. I've been struggling to find a solution or refactor the code. Any guidance on this matter would be greatly appreciated. Situation: Currently, I ...

Wrap the json response in HTML elements

I'm currently learning about AJAX, and I've encountered a major issue that I can't seem to resolve. I pass several variables to PHP, perform various checks there, and then return string values to AJAX. Strangely, I am able to display these r ...

Tips for handling binary data retrieved from a SQL query (such as LONGBLOB type) in node.js

I am trying to send binary data to the client using node.js, but I have encountered a limitation where write can only send string or Buffer. How can I successfully send binary data to the client? dbconnect.selectBinary(conn,function(result) { //resul ...

Break up every word into its own separate <span>

I am currently facing an issue with displaying an array of strings in HTML using spans. These spans are wrapped inside a contenteditable div. The problem arises when a user tries to add new words, as the browser tends to add them to the nearest existing sp ...

Upgrade angular-chart.js when applied to a filtered collection

I recently started working with Angular and encountered an issue while incorporating Angular Charts JS. I have a list that can be filtered using search text, and I want my charts to update whenever the list is filtered. What would be the best approach to ...

Encountered an issue while attempting to integrate Nebular into my Angular application

As a newcomer to Angular, I decided to try installing Nebular using the command ng add @nebular/theme. However, I encountered an error in the process. Upon entering the command into my terminal, the following error message appeared: ? Which Nebular theme ...

Having issues with Vue.js and the splice method not functioning properly on an array row

Having an Object array, I noticed that when I try to remove an object from the array list, only items are deleted from the end. <div class="hours" v-for="(time, index) in hour" :key="index"> So, I decided to place a cli ...

Utilize Vue to save user inputs and dynamically display them in another field

I'm struggling with setting up methods for this. My goal is to have the input data displayed on my table only after clicking the save button. Currently, it's displaying on the table without needing to click save. Can someone assist me with the co ...

Transferring information from the main function to getServerSideProps

I've been facing challenges while trying to pass data from a function component to the getServerSideProps method in Next.js. As a beginner in learning Next.js, I am struggling to understand this concept. My approach involves using context from _app, b ...

Issue encountered when setting up Webpack for a React application: the configuration.output.path value of "./" is not an absolute path and causing errors

Recently, I was following an online tutorial to create my first app in ReactJS. The process involved manual package installations using npm in node. However, after completing the setup, I encountered an issue when trying to run npm start. The error message ...

The Joi validate() function will return a Promise instead of a value when used within an asynchronous function

Trying to understand how async functions and the Joi.validate() function behave. Below is a function used for validating user input. const Joi = require("joi"); const inputJoiSchema= Joi.object().keys({ name: Joi.string(), email: Joi.string().require ...

Achieving Efficiency with Handlebars: Streamlining Remote Template Organization and

I am looking for a way to better organize my HB template by splitting it into different HTML files. In this case, I have created a file called helpers.html. This file contains two script tags: <script id='alert' type='text/template>... ...

The state value is not preserved after redirecting to another page

For the past couple of days, I've been struggling with an issue and I can't seem to figure out what I'm doing wrong. My goal is to create a login page that redirects users to the dashboard after they log in. To maintain consistency acros ...

Can you explain the term used to describe when specific sections of the source code are run during the build process to improve optimization?

One interesting feature I've noticed in next.js is its automatic code optimization during the build process. This means that instead of running the code every time the app is executed, it's evaluated and executed only once during the build. For ...

The react transition group fails to add the necessary CSS classes to the specified div

Regardless of whether I utilize React transition group, Tailwind, pure CSS, or any other framework, no transitions seem to occur when I structure my simple component in the following manner. I have experimented with various frameworks, but the outcome rema ...

Text in SVG file misaligned at the edge

After creating an SVG with a base64 background image and two text areas for top and bottom texts, I encountered an issue on Internet Explorer and Edge. The problem is that the bottom text is aligned to the left instead of the center, and its position is in ...

Issue with sending array as parameter in ajax call in Laravel

I am currently encountering an issue while attempting to pass an array through an AJAX request. <input type="text" name="item_name[]"> <input type="text" name="address"> $(document).on('click', '#save_info', function () { ...

How can I incorporate JSON data retrieved from my backend server into the content of Tabs in a ReactJS application, utilizing either the map() or forEach() method

I need help assigning a key from an object to each tab using a loop in order to navigate to its content when clicked on. I attempted to use map() but it didn't work, so I'm looking for guidance as I am new to React. Below is the code. Any assist ...

Tips for preventing the need to convert dates to strings when receiving an object from a web API

I am facing an issue with a class: export class TestClass { paymentDate: Date; } Whenever I retrieve an object of this class from a server API, the paymentDate field comes as a string instead of a Date object. This prevents me from calling the ...