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

Empty Canvas: Google Charts Graph Fails to Populate

I am currently using mysql, php, and javascript to display a curve chart. The issue I am facing is that the chart appears blank. google.load('visualization', '1.0', {'packages':['corechart']}); google.setOnLo ...

Using NodeJS to extract information from Opendata JSON files

I'm currently working on a project that involves fetching JSON data from an Open Dataset using NodeJS and passing it to angular. The challenge I'm facing is that I'm receiving a JSON file instead of a JSON object, which makes it difficult to ...

Using a UUID as the default ID in a Postgres database system is a straightforward process

As I transition to postgres from mongodb due to the recent announcement, I've noticed that the IDs are simply numerical and auto-incremented. I've attempted a few solutions: Setting the default ID to a UUID with a lifecycle hook - Unfortunately, ...

JavaScript library that provides SQL-like functionality for easily manipulating arrays

After successfully parsing a csv file into an array of objects, I find myself in need of making multiple alterations to that array. Currently, I am utilizing lodash methods for this task, but I am finding it to be quite verbose. I am considering working wi ...

Discovering Type Definitions in Nuxt.js Project Without Manual Imports in VSCode: A Step-by-Step Guide

Having issues with VSCode not recognizing type definitions automatically in a Nuxt.js project with TypeScript. I'm looking to avoid manually importing types in every file. Here's my setup and the problem I'm facing: Configuration My tsconfi ...

Making a Zoom effect using p5.js

I have searched for a solution to this question multiple times, but none of the answers I came across seem to work for me. Currently, I am able to allow the user to scale an image with a simple scale(factor) call. However, now I am attempting to implement ...

Tips for only retrieving specific data from a JSON call

Is there a way to modify this code so that it only retrieves 5 items from the database? I would like to have a "get more" button to fetch another set of 5 items. The current code pulls in all available items: $.ajax({ url: 'getFeed.php', ...

What methods can be used to send JSON data in the body of an express router.get request?

I am currently working on setting up an express endpoint to fetch data from an API and return the JSON response in the body. We are receiving JSON data from a rest API as an array and my goal is to utilize express router.get to present this formatted JSON ...

Is it possible to install non-root dependencies in node_modules using NPM?

The repository @superflycss/component-navbox contains the following list of dependencies: "devDependencies": { "@superflycss/component-body": "^1.0.1", "@superflycss/component-display": "^1.0.2", "@superflycss/component-header" ...

modifying input field with radio button selection in Jquery

Is there a way to set the input field to have a default value and then change it, or disable it with a different value? $("#tax").value(19).prop("disabled",false); $("#tax").value(0).prop("disabled",true); <script src="https://ajax.googleapis.com/aj ...

ESLint consistently raising key-spacing error consistently

Within my .eslintrc file, I have the following code: 'key-spacing': [ 'error', { 'singleLine': { 'beforeColon' : false, 'afterColon' : true }, &apos ...

The step-by-step guide to setting up the masonry-layout on a VUE

I recently added the Masonry Layout plugin using npm, but I'm facing issues with loading it into my component. import "masonry-layout"; export default { name: "playerSkillComponent", props: ['player'], mounted: function () ...

Can saving data within a mongoose pre-save hook initiate a continuous loop?

Currently, I am developing an API for a forum system which includes functionalities for users, forums, and posts. In my MongoDB Database, there is a 'categories' collection where each category acts as a container for a group of forums. Each categ ...

Efficiently rearranging elements by adjusting their top values techniques

My iPhone lockscreen theme features various elements displaying weather facts such as text and small images. Currently, these elements are positioned in the middle of the screen and I want to move them all to the top. Each element has a unique position abs ...

creating a custom mongoose model using aggregation and filtering

My Review model includes two fields, product and rating. I want to calculate the total rating for a specific product and then find the average by dividing that total by 5. const mongoose = require('mongoose'); const ReviewSchema = mongoose.Sche ...

Modify the parent scope variable within an Angular directive that contains an isolated scope

Here is a directive implementation: <some-directive key="123"></some-directive> This directive code looks like this: angular.module('app').directive('someDirective', ['someFactory', '$compile', '$ ...

Using both the variable and the JSON format from the Google Maps API

I am trying to display the coordinates from the input fields on a map using Google Maps API. However, I am facing an issue with passing the values to the script. Below is the code snippet: <input type="text" id="latitude" class="form-control" /> ...

I need help figuring out how to create dynamic bars that change colors based on their values. Any suggestions on how to

Seeking a solution to create interactive live-charts similar to the image provided. I've explored various chart libraries like Highcharts, fusioncharts, raphaeljs and many others, but haven't found one that fits my needs perfectly. I experimented ...

I'm facing a challenge with retrieving the controller's scope in my Angular directive

Having trouble accessing the settings I receive from the server in my app. The directives are set up correctly and the $http is used to fetch a js file with the app settings. However, despite being able to log the scope in the console, I am unable to acces ...

Tips on customizing the appearance of React rendering components

<div> <h3>{this.props.product.name}</h3> <h3>{this.props.product.code}</h3> {this.renderColors()} <article> <div da ...