Error: The Vue Class-Based module failed to parse due to an unexpected character '@'

When I run the command nmp run serve on my Vue project, I encounter two errors. I am following a tutorial that uses class-based Vue, but I am facing this error with all my imported Vue files. As a newcomer to Vue, I am puzzled as to why this error is occurring. I have the dependencies like

"vue-class-component": "^7.2.6", "vue-property-decorator": "^9.0.2"
mentioned in the tutorial, and I am importing them in my app.vue file. The author of the tutorial did not face this error in the video, and I cannot find any articles about this particular issue on the internet.

The main issue is:

Module parse failed: Unexpected character '@' Vue Class-Based

and

11:0  error  Parsing error: Using the export keyword between a decorator and a class is not allowed. Please use `export @dec class` instead.

> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="80e8e5f2efdfe9e9e9dfeaf3c0b0aeb1aeb0">[email protected]</a> serve C:\Users\Pawel\Unity\ArCore Portal\Heros_III_JS\hero_iii_js
> vue-cli-service serve

 INFO  Starting development server...
98% after emitting CopyPlugin

 ERROR  Failed to compile with 3 errors                                                                                                                                                                 13:37:33
 error  in ./src/App.vue

Module Error (from ./node_modules/eslint-loader/index.js):

C:\Users\Pawel\Unity\ArCore Portal\Heros_III_JS\hero_iii_js\src\App.vue
   8:14  error  Replace `'ts'` with `"ts"`  prettier/prettier
  16:14  error  Delete `,`                  prettier/prettier
  17:4   error  Delete `,`                  prettier/prettier

✖ 3 problems (3 errors, 0 warnings)
  3 errors and 0 warnings potentially fixable with the `--fix` option.


 @ ./src/main.js 6:0-28 10:13-16
 @ multi (webpack)-dev-server/client?http://192.168.43.30:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 error  in ./src/components/boardTest.vue

Module Error (from ./node_modules/eslint-loader/index.js):

C:\Users\Pawel\Unity\ArCore Portal\Heros_III_JS\hero_iii_js\src\components\boardTest.vue
  11:0  error  Parsing error: Using the export keyword between a decorator and a class is not allowed. Please use `export @dec class` instead.

   5 | import Point from "./point.vue";
   ...

point.vue

<template>
  <div></div>
</template>
...

boardTest.vue

<template>
  <div></div>
</template>
...

App.vue

<template>
  <div>
    <unitTests />
    <BoardTest />
  </div>
</template>

...

package.json

{
  "name": "hero_iii_js",
  ...
}

Answer №1

This particular configuration in my webpack setup has proven to be a lifesaver, preventing the all too common

SyntaxError: Unexpected character '@'
issue:

// webpack.base.conf.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          appendTsSuffixTo: [/\.vue$/],
          transpileOnly: true
        }
      },
    ]
  }
}

Answer №2

After encountering a similar issue, I discovered that my environment was not fully configured.

To resolve this issue, it is necessary to set up eslint to support typescript since it is not supported by default. Begin by installing @typescript-eslint/parser followed by @typescript-eslint/eslint-plugin.

The steps outlined in this discussion thread and the helpful answer provided by rhn-chn are crucial for ensuring the proper functionality of the setup.

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

Consider developing a custom plugin that automatically loads all components within your nuxt.js application

I have been attempting to load and define all my components globally in nuxt.js. However, I encounter an error when trying to load the *.vue file: "Cannot find module ....". Despite the fact that the file exists in the specified location... Below is the ...

Obtain a random item from an array containing elements with assigned weights

In my game development project, I have an array of objects representing creatures. Each creature object includes a unique identifier and a corresponding weight or probability for spawning. I am struggling to create an algorithm that will randomly spawn cr ...

New elements can be inserted at the rear of the queue while older elements are removed from the front of the queue

I'm new to JavaScript and currently working on a task involving queues. Here is the task description: Create a function called nextInLine that takes an array (arr) and a number (item) as parameters. The function should add the number to the end of ...

Storing an array of objects in Firestore using JavaScript presents a challenge

I am attempting to save an object to Firestore which includes an array: { returnMode: false, id: "SE-74c5219a-acfe-4185-9e33-f78b10ac3f1e", prices: [ { price: { twoHours: 0, firstHour: 0, id: "zero&quo ...

Tips for detecting successful file downloads from the client side using Mean/AngularJS

I have developed a chat application with the capability to send files through chat windows. I am now looking to automatically delete files from the server once they have been successfully downloaded by clients. My technology stack includes MEAN. rou ...

Modify CSS using JavaScript at a specific screen size

Currently, I am in the process of designing a responsive navigation system which involves implementing a button that dynamically changes the styling of the div #navigation using Javascript. The aim is to toggle between display: none; and display: block; ba ...

How can I achieve the same result as npm run start:ci with yarn?

I need help setting up Bitbucket CI/CD to run cypress tests on my vue app that utilizes yarn as its package manager. Is there a method to launch the server in the background using yarn? Appreciate any assistance. Thanks in advance! ...

Is there any difference in loading speed when using an async function in the createConnection method of promise-mysql?

Is it more efficient to use asynchronous createConnection or not? Does this impact the loading speed in any way? I am working with express, ReactJS, and promise-mysql. Which approach is preferable? Option 1: async connect () { try{ ...

How can I efficiently utilize HTML/CSS/JS to float items and create a grid that accommodates expandable items while minimizing wasted space?

After meticulously configuring a basic grid of divs using float, I've encountered an issue. When expanding an item in the right-hand column, the layout shifts awkwardly. My goal is to have boxes A and B seamlessly move up to fill the empty space, whi ...

Display an aspx page within a div container

I am using the following code to load an aspx page in a div tag. Unfortunately, it's not working as expected. Can someone please assist me in resolving this issue? <script type="text/javascript"> $(document).ready(function () { $(&a ...

Remove dynamically inserted list item using a button

I have dynamically created an unordered list (<ul>) that adds list items (<li>) when a button is clicked, along with a remove button. Initially, the default list item should not contain a remove button so I added it in the script. SCRIPT $(d ...

Differences Between Vuex Actions and Mutations

Can you explain the purpose of having both "actions" and "mutations" in Vuex? I comprehend the reasoning behind components not directly modifying state, but what is the advantage of introducing actions that trigger mutations to alter state? It seems like ...

Tips for Retrieving Data from a Multi-Dimensional Array

I need help accessing the values in my array and assigning them to variables for later use. I have created an array and used the randomGo() function to generate a random number that corresponds to a pair of numbers within the array. My goal is to assign ...

Preventing access to websites through a web application using JavaScript

I am in the process of creating a web application that enables users to create a list of websites they wish to block, preventing access from their browsers. My goal is to block websites on all browsers, but I have narrowed my focus to Chrome for now. I ha ...

Is there a way to run a node script from any location in the command line similar to how Angular's "

Currently, I am developing a node module that performs certain functions. I want to create a command similar to Angular's ng command. However, I am facing compatibility issues with Windows and Linux operating systems. Despite my attempts to modify the ...

Troubleshooting drag-and-drop functionality in a JavaScript HTML5 application resembling a Gmail upload interface

Here is a snapshot of my user interface: Each node in the tree structure is represented by an <li> element along with an <a> link. Furthermore, each folder serves as a dropzone for file uploads similar to the drag-and-drop feature found in Gm ...

Avoid sudden page movements when validating user input

After successfully implementing the "Stars rating" feature from https://codepen.io/462960/pen/WZXEWd, I noticed that the page abruptly jumps up after each click. Determined to find a solution, I attempted the following: const labels = document.querySelect ...

Stop the web browser from storing the value of the input control in its cache

Many web browsers have a feature that saves the information you enter into certain fields so you don't have to type it again. While this can be convenient for most cases, I am faced with a situation where users must input a unique reference for a new ...

Issues with Jquery Autocomplete feature when using an Input Box fetched through Ajax requests

When a user selects an option from the drop-down list, an input box is dynamically added to the page using AJAX. document.getElementById("input_box").innerHTML ="<input id='ProjectName'/>"; However, there seems to be an issue with jQuery ...

What is the reason for webpack adding "-es5" and "es2015" to my TypeScript files?

When Webpack converts my typescript files into Javascript files, it appends -es5 to the name. For instance, I expect the file to be named background.js, but it actually generates 4 separate files: background-es5.js background-es5.js.map background-es2015. ...