Error encountered while compiling a method within a .vue component due to a syntax issue

I have been closely following a tutorial on Vue.js app development from this link. The guide instructed me to add a login() function in the block of the Login.vue file. Here is the snippet of code provided:

    login() {
      fb.auth.signInWithEmailAndPassword(this.loginForm.email, this.loginForm.password).then(user => {
        this.$store.commit('setCurrentUser', user)
        this.$store.dispatch('fetchUserProfile')
        this.$router.push('/dashboard')
      }).catch(err => {
        console.log(err)
      }) 
    }

Unfortunately, upon compilation, I encountered an error message:

    ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/Login.vue
Module build failed: SyntaxError: C:/Users/Rohit/Documents/Javascript/vue_practice/humanity/src/components/Login.vue: Unexpected token, expected ; (33:8)

  31 | const fb = require('../firebaseConfig.js')
  32 | 
> 33 | login() {
     |         ^
  34 |     fb.auth.signInWithEmailAndPassword(this.loginForm.email, this.loginForm.password).then(user => {
  35 |         this.$store.commit('setCurrentUser', user)
  36 |         this.$store.dispatch('fetchUserProfile')

 @ ./src/components/Login.vue 4:0-105 5:0-118
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

I've been troubleshooting to identify and resolve the syntax error, but so far, I haven't had any success. Any assistance or guidance would be greatly appreciated. Thank you!

Answer №1

login() should be included within the methods property of your component:

export default {
  methods: {
    login() {
      // implementation details
    }
  }
}

Answer №2

Ensure that your script section contains the following structure:

<script>
const fb = require('../firebaseConfig.js')
export default{
 data(){
     return { ... };
  },
methods:{
   ...
    login() {
      fb.auth.signInWithEmailAndPassword(this.loginForm.email, 
       this.loginForm.password).then(user => {
        this.$store.commit('setCurrentUser', user)
       this.$store.dispatch('fetchUserProfile')
       this.$router.push('/dashboard')
     }).catch(err => {
    console.log(err)
     }) 
    }
  ...
   }
}
</script>

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

Tips for showing all percentages on a Google PieChart

I'm currently encountering two issues. How can I ensure that the entire legend is visible below the graph? Sometimes, when the legend is too large, three dots are added at the end. Another problem I am facing involves pie charts. Is there a way to d ...

Blank white screen in Three.js following the rendering of numerous objects

I have a situation where I am loading over 4350 3D objects from JSON files in my game. for (var y in game.fields) { for (var x in game.fields[y]) { switch (game.fields[y][x]) { case 'm': ...

Determine the height of a child DOM element "prior to" its mounting in a Vue.js environment

Running a Vuejs application, I encountered an issue where component A is responsible for managing instances of component B. Upon mounting A, it goes through a list and generates multiple instances of B components. As it loops through the list, A instantiat ...

Tips for halting a MySQL database transaction within a NodeJS environment using expressJS

Recently, I encountered a coding challenge that involved managing a long database transaction initiated by a user. The scenario was such that the user inadvertently updated 20 million entries instead of the intended 2 million, causing a significant impact ...

Enhance Shipping Options on Your Woocommerce Cart

I am facing a challenge with providing delivery options for three different countries in my e-commerce store. I want the customer to be able to select their country and instantly see the available delivery methods without having to refresh the entire page ...

Developing a bespoke React component library - encountering an issue with 'react module not found' during Jest testing, as well as using testing-library

I am in the process of creating a bespoke react component library to be shared across various applications. To build this library, I am utilizing rollup and referencing resources such as this blog post along with others: https://dev.to/alexeagleson/how-to- ...

Tips for exiting a function at a particular point

How can I ensure that my async function only returns at a specific point and not void at the end? const fun = () => { const list = []; let streamFinished = 0; let streamCount = files.length; await fs.readdir(JSON_DIR, async(err, files) => ...

Organize a list in AngularJS by breaking it down based on its headers and displaying them in

As someone who is new to angularJs, I am looking to convert an app to angularJs but I have encountered a roadblock: The custom accordion markup I am working with is as follows: <div class="accord_main_wrap" ng-controller="catController"> <di ...

Weaknesses found in the React Js library bundled with create-react-app

Each time I initiate a new react project using npx create-react-app <AppName>, the following vulnerabilities are detected: 96 vulnerabilities found - Packages audited: 1682 Severity: 65 Moderate | 30 High | 1 Critical Node Version: v14.18.1 Npm: 7.20 ...

Sending the "Enter Key" using JavaScript in Selenium can be achieved by utilizing the "executeScript" function

I'm currently developing an automation flow using IE 11 with Selenium and Java. On a particular web page, I need to input a value in a Text Box and then press Enter. I have successfully managed to input the values using the following code: // The &ap ...

What is the best way to implement Media Queries in the Next.js application Router?

I am currently working with Next.js 13 and the App Router. Within my client component, I have implemented media queries in JavaScript to customize sidebar display for small and large screens. "use client"; export default function Feed() { co ...

Error: Vue Loader Unable to find module '@'

Software Version 15.4.0 Link to Reproduction Example https://codepen.io/fendi-tri-cahyono/pen/wbXKMZ?editors=0010 Steps to Recreate the Issue ERROR in ./node_modules/vue-extend-layout/vue-extend-layout.vue?vue&type=script&lang=js& (./node_ ...

Guide to updating information inside of script tags in html using javascript

Within my HTML, there is a script tag that looks like this: <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "VideoObject", "name": "Title", "description": "Video descrip ...

Achieving success was like uncovering a hidden treasure chest after a successful

Is there a way to address this JSON data issue? success{"data": [{"id":"1","name":"something1"},{"id":"2","name":"something2"},{"id":"3","name":"something3"}] } The success variable contains the JSON data. This is how the server script returns the data: ...

Unlocking the potential of GraphQL: Harnessing the power of sibling resolvers to access output from another

Could use a little assistance. Let's say I'm trying to retrieve the following data: { parent { obj1 { value1 } obj2 { value2 } } } Now, I need the result of value2 in the value1 resolver for calculation ...

What is the method for implementing type notation with `React.useState`?

Currently working with React 16.8.3 and hooks, I am trying to implement React.useState type Mode = 'confirm' | 'deny' type Option = Number | null const [mode, setMode] = React.useState('confirm') const [option, setOption] ...

The Mongoose findOneAndUpdate method will only return the newly added document when using the $push

Provided here is a structured representation of my "profile" collection: { _id : ObjectId("2bb0fad110"), name : "Tommy", defaultrates : [ {_id : ObjectId("444cbcfd52"), rate : 35.0, raisedOn : "5/2/2009"}, {_ ...

JavaScript: Locate the HTML Attribute that Matches an ID

If you want to use just JavaScript, without relying on libraries like JQuery, how can you retrieve the data attribute associated with a specific Id? For example: <div id="id-test" data-qa="data-qa-test"> </div> Input: &quo ...

Give a jQuery Mobile flipswitch a new look

Currently, I am using jQuery Mobile and recently attempted to refresh a flipswitch. However, upon executing the code $("#flipEnabled").slider("refresh");, I encountered an error in the console: Uncaught Error: cannot call methods on slider prior to initial ...

Icon: When clicked, initiate a search action

I am looking to make the icon clickable so that it can be used as an alternative to pressing the "return key" for searching. Check out this bootply example at . You simply need to click on the magnifying glass icon and it will initiate the search. ...