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

Transmitting client-side Javascript data to backend server using Express

I am trying to fetch data from my frontend using the DOM and send it to the backend through Express but I'm unsure of how to proceed. I have used a POST method to console.log the data, but now I need help retrieving it in my Express backend. (The cons ...

Effectively monitoring coordinates on both the client and server sides

I'm currently in the process of developing a multiplayer game using websockets, node, and JavaScript. I need advice on the most effective approach to update client information and manage their coordinates on the server. The method I am using at the mo ...

What is the reason for attributes not being included in actions in dispatch in Vuex?

I've encountered an issue with transferring data from Vue to Vuex. Whenever I attempt to send dates to vuex using 'let', axios fails to recognize these dates. However, if I input the dates directly into the axios request, everything works fi ...

Selecting random numbers in React.js

I am working on creating a Netflix Clone and I want to change the banner image every time the page refreshes. I have integrated movie details from TMDb and have an array containing these details. My goal is to select a random number between 0 and 19 and us ...

Unexpected values being returned by Javascript/jQuery variables

Struggling with understanding scope in JavaScript, like many others before me. It can be quite challenging to navigate through the code at times. I've reviewed previous discussions on this topic, but I'm still having trouble applying it to my spe ...

Experiencing challenges with ng-repeat and the concept of 'distinct'

I'm facing a perplexing issue. When utilizing ng-repeat to iterate through my data and create checkboxes, I encounter unexpected behavior. The result is multiple duplicate items being displayed instead of unique ones. Here's an example: <lab ...

Is npm installation specifically for a node server?

I'm in the process of developing a React app with webpack and utilizing npm to install different front end packages such as tabs, D3, and more. As I plan for production, I'm wondering if I specifically need to run my server as a Node server given ...

JavaScript date selector allowing the selection of multiple dates

As a beginner in JavaScript, I am struggling to create a datepicker input field that allows multiple selections. Despite researching for solutions, none seem to fit my specific case. Can anyone offer guidance on how to achieve this? Your help is greatly ap ...

A streamlined method for generating an array containing all numerical string values

I'm looking to generate an array of digits in JavaScript. Currently, I have hard-coded it like this: const digitGeneration = ['0', '1', '2', '3', '4', '5', '6', '7', &apo ...

Issue with Submit Button Functionality following an Ajax Request

I am facing an issue where the submit button does not work after an ajax call, but works fine if I reload the page. The problem arises when a modal is displayed for email change confirmation. If the user confirms the change, the form submits successfully. ...

error when trying to bind attributes to knockout components

I am trying to dynamically add an id attribute to a tag, but it keeps giving me an error. "Uncaught ReferenceError: Unable to process binding "attr: function (){return {id:id} }" Message: id is not defined" Here is my HTML code- <label data-bind= ...

What is the process for setting up a subrouter using React Router v6?

This is the current React Router setup I am using: const router = createBrowserRouter([ { path: "/", element: ( <Page activeNav="home" > <Home /> </Page> ) }, { ...

How can you ensure a form is properly validated using javascript before utilizing ajax to submit it

I've been working on developing a website and I am in need of an attractive login/registration/forgot password form. My aim was to utilize 'ajax' to enhance the user experience, leading me to immerse myself in a steep learning curve for the ...

Having trouble updating attribute through ajax requests

How can I set attribute values using ajax-jquery? Here are some snippets of code: HTML_CODE ========================================================================== <div class="col"> <ul class="nav nav-pills justify-content-end& ...

Direct the /username path to /[user]/[tab].js instead of [user]/index.js in Next.js

My goal is to develop a user profile page that displays content based on the current tab the user is viewing. The tab is determined by what is provided in the URL (e.g. /username/tab1). The challenge I am facing is that one of the tabs the user can access ...

The function FileReader() is not functioning properly within a Vue computed property

I'm attempting to display a set of image thumbnails by dragging images onto the screen. Here is an example of my data structure: data() { return { files: [Image1, Image2, Image3] } } ...where each Image is in a blob format. Below is my co ...

Troubleshooting JSON Array Index Problems

I'm having trouble reaching index 3 in the array using the javascript options on my webpage. The final question "are you satisfied with your choice?" is not showing up for me. I'm not sure what I might be missing or doing incorrectly in this sit ...

Dealing with Uncaught Type Errors in the Fixed Data Table

I am attempting to implement a fixed data table using the following code snippet. var MyCompi = React.createClass({ getInitialState: function() { return { rows : [ {"id":1,"first_name":"William","last_name":"Elliott","email":"<a ...

How can I send an error message from a Laravel controller and handle it in InertiaJS using the form helper?

I am facing an issue where I need to handle errors in the controller, but they are not Laravel validation errors. This prevents me from accessing them using the inertiajs form helper without using props.errors. How can I return the error in a way that allo ...

Different methods of transferring PHP post information to JavaScript

Is there a cleaner and more elegant way to pass posted PHP variables to JavaScript for manipulation, rather than using inline JavaScript? I currently have a simple PHP form that posts data to specific variables and then uses inline JavaScript to handle the ...