The error message "vue-router encountered an unexpected token import" popped

Trying to find a way to store my Vue templates in variables for routing purposes.

I've set up an App.vue file with just a simple HTML title (for testing), and a main.js file with an 'import' statement that I haven't used in JavaScript before. However, every documentation suggests this method as the way to go for getting a template file's content into a variable.

Unfortunately, when using the 'import' command, I encounter the following error: "Uncaught SyntaxError: Unexpected token import."

The import line causing the issue is: "import App from '../vues/App';"

I've double-checked the path, but if there's another way to achieve storing a template file's content in a JS variable, I would appreciate any guidance.

Thank you for your help.

EDIT: main.js

import App from '../vues/App';

new Vue({
    el: '#app',
    template: '<App/>',
    components: { App }
});

App.vue:

<template>
    <h1>Hello World!</h1>
</template>

<script>
    export default {}
</script>

Answer №1

Your current environment only supports es5 syntax, but you are using es6 syntax (import). To resolve this issue, you can either configure "babel" in your webpack or use require instead of import.

var App = require( "../vues/App" );

UPDATE: This error may also occur if you do not have a module bundler installed, such as Webpack, which takes modules with dependencies and generates static assets representing those modules. You can install Webpack from here: https://webpack.js.org/guides/installation/

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

Error: JSONP Label Validation Failed

My JSON URL is: The above URL returns the following JSON: { token: "2cd3e37b-5d61-4070-96d5-3dfce0d0acd9%a00a5e34-b017-4899-8171-299781c48c72" } Edit: Changed it to {"token": "2cd3e37b-5d61-4070-96d5-3dfce0d0acd9%a00a5e34-b017-4899-8171-299781c48c72"} ...

Create visual representations using a JSON structure that includes timestamps for various locations

I need to create a JavaScript graph based on a JSON dataset containing locations and timestamps. The data is structured like an array, and my goal is to visualize the time spent at each location with a comprehensive graph. ...

Using object bracket notation in TypeScript to retrieve values from props with the help of string interpolation

I encountered an issue in my code while attempting to utilize a variable within my TSX component. This problem arises due to the dynamic props being passed into the component, which are always a string that matches one of four keys in the "characters" obje ...

Formatting time on the x-axis in a Chart.js graph

I've been attempting to create a scatter plot with Chart.js using some data, but no matter what I try from various internet resources, the x-axis continues to display as integers instead of dates. Here's a screenshot for reference. UPDATE: I dis ...

How to retrieve response cookies using RxJS Ajax

When using RxJS to make an Ajax call request, I am able to set the headers of the request. However, I am wondering how I can retrieve the Cookie from the RxJS Ajax Response? import { ajax } from 'rxjs/ajax'; ajax({ url: "some url", body: ...

What is the best way to trigger my web scraper within an express route?

Within my Nodejs server's root directory, I have implemented a web scraper using needle to handle the HTTP requests for retrieving HTML data. This scraper returns an Array of data upon completion. In addition, there is an index.js file containing expr ...

Ensuring strictNullChecks in Typescript is crucial when passing values between functions

When using the --strictNullChecks flag in TypeScript, there seems to be an issue with inferring that an optional property is not undefined when the check occurs in a separate function. (Please refer to the example provided, as articulating this clearly is ...

Achieve sum calculations by categorizing a set in Meteor

I have a dataset containing fields named: number, a, b, c. My goal is to split the dataset into three groups based on the value of the number field, and calculate the total sums of a, b, and c for each group. Currently, I achieved this using the followin ...

In the realm of asp.net, the OnClick event springs into action after the

My asp button uses OnClientClick to execute a javascript function, and I also want to run OnClick after OnClientClick. However, the OnClick never seems to execute. Despite looking through similar topics on StackOverflow and other websites, I can't see ...

Learn how to mock asynchronous calls in JavaScript unit testing using Jest

I recently transitioned from Java to TypeScript and am trying to find the equivalent of java junit(Mockito) in TypeScript. In junit, we can define the behavior of dependencies and return responses based on test case demands. Is there a similar way to do t ...

What is the correct way to integrate HTML input elements into JavaScript code without encountering a type error?

I'm having some trouble with this code snippet. It's my first time coding and I can't figure out what's causing the issue. The error message I'm receiving is: "TypeError: Cannot read properties of null (reading 'value&ap ...

Concealing Rows Once a Specified Threshold of Rows Has Been Modified

My knowledge of Javascript is very basic and I am new to coding. I have created a table that updates when a button is clicked. However, I am looking for a way to limit the number of rows in my table. For example, when I add a sixth data entry to the table, ...

Issue with AngularJs NgRoute

Encountering an issue with ngRoute on angularjs, version 1.6.9. Developed a simple route like "/test/:yourname" where "yourname" serves as a variable, however facing the following challenges: 1) Visiting the address "http://localhost:8080/test/rafael" re ...

Retrieve information from various MongoDB collections

Greetings! I currently have a database with the following collections: db={ "category": [ { "_id": 1, "item": "Cat A", }, { "_id": 2, "item": "Cat B" ...

Difficulty parsing JSON in MVC .Net Core Controller

I am dealing with a Web Application built in ASP.Net Core 5 that communicates with a Web API in .Net Core. The data returned from the API in JSON format needs to be read from a file named landing.js. Despite the data being stored in the variable (data), I ...

Is it possible to fix the rightmost column in a scrollable HTML/CSS table with Angular when using overflow-x?

Is there a way to lock the right-most column in an HTML CSS Angular table that is scrollable using overflow-x? I have attempted using the sticky property and also creating two tables side by side, but neither method has successfully achieved the desired ...

Nivoslider fails to display images when loaded in dynamic ajax content for the first time

Working on a website using jQuery and Ajax, I encountered an issue. When a page loads dynamically for the first time (before images are cached), the images do not display. However, when I reload the ajax load function, the pictures suddenly appear. $("#ov ...

Utilize AngularJS to enable a CSS Class through an array order

I need to activate a heartbeat CSS animation on 6 different divs, but I want to do it in a specific sequence. For instance, let's say I have an array: self.arraySequence = [0,3,5,3]; In this array, each number represents the position of the div tha ...

Is it a good idea to steer clear of including OAuth tokens in the

Utilizing my OAuth2 token in my API program is essential. However, I am also keen on sharing my code through GitHub. How can I securely use my confidential token without including it directly in my source code? ...

Unable to interact with a button through Selenium

Utilizing the Selenium library in Java, I have written a script to automate tasks online. The script functions perfectly on popular sites such as Facebook and YouTube, but for some reason, it does not work on kingdoms.com. The button I am trying to click h ...