close

[Solved] TypeError: Object(…) is not a function in Vue

Hello Guys, How are you all? Hope You all Are Fine. Today I get the following error TypeError: Object(…) is not a function in vuejs. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error.

How To Solve TypeError: Object(…) is not a function in Vue Error ?

  1. How To Solve TypeError: Object(…) is not a function in Vue Error?

    To Solve TypeError: Object(…) is not a function in Vue Error The problem is your call to scheduleMeeting in your createMeeting method, or more precisely that you have not actually imported a function, but an object containing the function.

  2. TypeError: Object(…) is not a function in Vue

    To Solve TypeError: Object(…) is not a function in Vue Error The problem is your call to scheduleMeeting in your createMeeting method, or more precisely that you have not actually imported a function, but an object containing the function.

Solution 1

The problem is your call to scheduleMeeting in your createMeeting method, or more precicely that you have not actually imported a function, but an object containing the function.

Your export from meeting.js

import session from "./session";

export default {
    scheduleMeeting(meeting) {
        return session.post("/meeting/create/", {
            ...meeting
        })
    }
};

this is exporting an object which you are assigning to scheduleMeeting in your import statement.

import scheduleMeeting from "../api/meeting"

So your function is actually at scheduleMeeting.scheduleMeeting inside your code.

It is a little unusual to export an object in this way – the default export is not quite the same as setting the export.modules object for a commonjs export. I suggest you follow a more ES6 method:

Change meeting.js to

import session from "./session";

export function scheduleMeeting(meeting) {
    return session.post("/meeting/create/", {
        ...meeting
    })
}

and your import statement to

import {scheduleMeeting} from "../api/meeting"

Of course there are other ways you could structure this to fix it, but I think this is the clearest.

Solution 2

It happened with me when i trying to generate a unique ID and imported it from quasar framework without curly braces

import uid  from 'quasar'

and it fixed when i added curly braces

import {uid}  from 'quasar'

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also, Read

Leave a Comment