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

Question

I am new to Vue and trying to handle form. I am making a web app to manage meetings and for this I have multi-step form which will handle visitor and host data. When I click submit button, I get following error:- TypeError: Object(...) is not a function . I searched for it on stackoverflow but couldn't get much clue. Following is my code:-

scheduleMeeting.js

<template>
    <el-container>
        <el-row>

            <el-col class="desc" :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <img src="../assets/meeting.svg" alt="meeting-image" class="image"/>
                <div>
                    <h1 class="image-caption">Schedule Meetings With Ease!</h1>
                    <p class="image-sub-caption">Managing Meetings Now Much Easier</p>
                    <ul class="feature-list">
                        <li>Get instant meeting confirmation on email and mobile!</li>
                        <li>Schedule meeting from anywhere, anytime!</li>
                        <li>Schedule meeting using your mobile</li>
                        <li>Get check out email on your mailing address</li>
                        <li>Keep Track of All Visitors and Hosts</li>
                    </ul>
                </div>
            </el-col>

            <el-col class="form-div" :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                <el-col class="steps">
                    <el-steps align-center class="steps" :active="active">
                        <el-step title="Step 1" description="Visitor Details"></el-step>
                        <el-step title="Step 2" description="Host Details"></el-step>
                    </el-steps>
                </el-col>


                <el-form ref="form" :model="form" label-width="120px">
                    <div :class="{'show':isVisitor, 'hide':!isVisitor}">
                        <el-input
                                name="visitorName"
                                v-validate="'required|alpha_spaces'"
                                prefix-icon="el-icon-user"
                                class="form-input"
                                placeholder="Visitor Name"
                                v-model="form.visitor.name"/>
                        <p v-if="errors.has('visitorName')" class="registration-error-message">
                            {{errors.first("visitorName")}}</p>

                        <el-input
                                name="visitorEmail"
                                v-validate="'required|email'"
                                prefix-icon="el-icon-message"
                                class="form-input"
                                placeholder="Visitor Email"
                                v-model="form.visitor.email"/>
                        <p v-if="errors.has('visitorEmail')" class="registration-error-message">
                            {{errors.first("visitorEmail")}}</p>
                        <vue-phone-number-input
                                v-validate="'required'"
                                name="visitorPhoneNo"
                                v-model="form.visitor.phone_no"
                                class="form-input"/>
                        <p v-if="errors.has('visitorPhoneNo')" class="registration-error-message">
                            {{errors.first("visitorPhoneNo")}}</p>
                        {{this.form.visitor.phone_no}}
                        <el-row>
                            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                                <el-date-picker
                                        v-validate="'required'"
                                        name="visitorCheckIn"
                                        class="form-input"
                                        v-model="form.visitor.check_in"
                                        type="datetime"
                                        ref="check_in"
                                        placeholder="Visitor Check In"/>
                                <p v-if="errors.has('visitorCheckIn')" class="registration-error-message">
                                    {{errors.first("visitorCheckIn")}}</p>
                            </el-col>
                            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                                <el-date-picker
                                        v-validate="'required|after:check_in'"
                                        name="visitorCheckOut"
                                        class="form-input"
                                        v-model="form.visitor.check_out"
                                        type="datetime"
                                        placeholder="Visitor Check Out"/>
                                <p v-if="errors.has('visitorCheckOut')" class="registration-error-message">
                                    {{errors.first("visitorCheckOut")}}</p>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-button
                                    @click="goToStepTwo"
                                    class="button"
                                    type="primary"
                                    round>Next <i class="el-icon-arrow-right"></i>
                            </el-button>
                        </el-row>
                    </div>
                    <div :class="{'show':!isVisitor, 'hide':isVisitor}">
                        <el-input
                                name="hostName"
                                v-validate="'required|alpha_spaces'"
                                prefix-icon="el-icon-user"
                                class="form-input"
                                placeholder="Host Name"
                                v-model="form.name"/>
                        <p v-if="errors.has('hostName')" class="registration-error-message">
                            {{errors.first("hostName")}}</p>
                        <el-input
                                name="hostEmail"
                                v-validate="'required|email'"
                                prefix-icon="el-icon-message"
                                class="form-input"
                                placeholder="Host Email"
                                v-model="form.email"/>
                        <p v-if="errors.has('hostEmail')" class="registration-error-message">
                            {{errors.first("hostEmail")}}</p>
                        <vue-phone-number-input
                                name="hostPhoneNo"
                                v-validate="'required'"
                                v-model="form.phone_no"
                                class="form-input"/>
                        <p v-if="errors.has('hostPhoneNo')" class="registration-error-message">
                            {{errors.first("hostPhoneNo")}}</p>
                        <el-button
                                icon="el-icon-arrow-left"
                                plain
                                @click="goToStepOne"
                                class="button"
                                round>Back
                        </el-button>
                        <el-button
                                @click="createMeeting"
                                class="button"
                                type="primary"
                                round>Submit
                        </el-button>
                    </div>
                </el-form>

                <div v-if="isMeetingConfirmed">

                </div>
            </el-col>
        </el-row>
    </el-container>
</template>

<script>
    import scheduleMeeting from "../api/meeting"

    export default {
        data: () => ({
            active: 1,
            isVisitor: true,
            isMeetingConfirmed: false,
            form: {
                name: '',
                email: '',
                phone_no: '',
                visitor: {
                    name: '',
                    email: '',
                    phone_no: '',
                    check_in: '',
                    check_out: ''
                }
            }
        }),
        methods: {
            goToStepOne() {
                this.isVisitor = true
                this.active = 1
            },
            async goToStepTwo() {
                if (
                    await this.$validator.validate('visitorName', this.form.visitor.name) &&
                    await this.$validator.validate('visitorEmail', this.form.visitor.email) &&
                    await this.$validator.validate('visitorPhoneNo', this.form.visitor.phone_no) &&
                    await this.$validator.validate('visitorCheckIn', this.form.visitor.check_in) &&
                    await this.$validator.validate('visitorCheckOut', this.form.visitor.check_out)) {
                    this.isVisitor = false
                    this.active = 2
                }
            },
            async createMeeting() {
                var global = this;
                this.$validator.validate().then(valid => {
                    if (valid) {
                        scheduleMeeting(global.form)
                            .then(() => this.isMeetingConfirmed = true)
                            .catch(error => {
                                this.$message({
                                    showClose: true,
                                    type: 'error',
                                    message: error.response.data
                                })
                            })
                    }
                });

            }
        }
    };
</script>

<style lang="css">
    .show {
        display: block;
    }

    .hide {
        display: none;
    }

    .image {
        width: 80%;
        margin: 1rem auto;
    }

    .steps {
        margin: 0 0 1rem 0;
    }

    .image-sub-caption {
        color: rgb(120, 120, 120);
        font-weight: 600;
        padding-bottom: 1rem;
    }

    .feature-list {
        margin: 1rem;
        list-style: none;
    }

    .feature-list > li {
        font-weight: 400;
        color: rgb(120, 120, 120);
        padding: 0.4rem 0;
    }

    .desc {
        background-color: #e6f1ff;
        text-align: center;
    }

    .registration-error-message {
        color: #f56c6c;
        font-size: 13px;
        line-height: 1;
        padding-top: 4px;
        position: relative;
        margin: -1rem 0 1rem 0;
        top: 100%;
        left: 0;
    }

    .form-div {
        padding: 3rem;
    }

    .form-input {
        border: none !important;
        margin: 1rem 0;
    }

    .button {
        margin: 2rem 0;
    }
</style>

meeting.js

import session from "./session";

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

Complete error message log is as follows:-

Uncaught (in promise) TypeError: Object(...) is not a function
    at eval (ScheduleMeeting.vue?34e8:184)
eval    @   ScheduleMeeting.vue?34e8:184
Promise.then (async)        
createMeeting$  @   ScheduleMeeting.vue?34e8:182
tryCatch    @   vue-phone-number-inp…common.js?7bec:2629
invoke  @   vue-phone-number-inp…common.js?7bec:2855
prototype.<computed>    @   vue-phone-number-inp…common.js?7bec:2681
tryCatch    @   vue-phone-number-inp…common.js?7bec:2629
invoke  @   vue-phone-number-inp…common.js?7bec:2719
eval    @   vue-phone-number-inp…common.js?7bec:2754
callInvokeWithMethodAndArg  @   vue-phone-number-inp…common.js?7bec:2753
enqueue @   vue-phone-number-inp…common.js?7bec:2776
prototype.<computed>    @   vue-phone-number-inp…common.js?7bec:2681
module.exports.96cf.exports.async   @   vue-phone-number-inp…common.js?7bec:2800
createMeeting   @   ScheduleMeeting.vue?34e8:163
invokeWithErrorHandling @   vue.runtime.esm.js?2b0e:1854
invoker @   vue.runtime.esm.js?2b0e:2179
invokeWithErrorHandling @   vue.runtime.esm.js?2b0e:1854
Vue.$emit   @   vue.runtime.esm.js?2b0e:3882
handleClick @   element-ui.common.js?5c96:9393
invokeWithErrorHandling @   vue.runtime.esm.js?2b0e:1854
invoker @   vue.runtime.esm.js?2b0e:2179
original._wrapper   @   vue.runtime.esm.js?2b0e:6911

Any hint would be of great help!

Are you absolutely sure it's "TypeError: Object(...) is not a function"? Because the global Object is a function... Is there any variable or parameter in your code with the name Object? — T.J. Crowder
– T.J. Crowder, Commented Nov 26, 2019 at 7:49
It means that one of your function call there are actually an object and not a function. Try logging the functions you are using to see which one is the culprit — I am L
– I am L, Commented Nov 26, 2019 at 8:12

Euan Smith · Accepted Answer · 2019-11-26 11:08:07Z

19

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.

answered Nov 26, 2019 at 11:08

Euan Smith

2,1921 gold badge20 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vineet Over a year ago

I used scheduleMeeting.scheduleMeeting and it worked. Thanks!

Torcione · Accepted Answer · 2021-02-19 13:05:52Z

7

This happened to me when I forgot the curly braces in an import statement from vuex. I incorrectly coded:

import mapGetters from 'vuex'

Changing instead to the correct syntax:

import { mapGetters } from 'vuex'

Works fine.

edited Feb 19, 2021 at 13:05

answered Sep 14, 2020 at 15:45

Torcione

85510 silver badges28 bronze badges

Comments

Omar Gebba · Accepted Answer · 2020-09-26 07:35:16Z

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'

edited Sep 26, 2020 at 7:35

answered Sep 26, 2020 at 7:28

Omar Gebba

513 bronze badges

Comments

Franck Lee · Accepted Answer · 2022-02-10 13:15:27Z

0

I had this problem recently too，I changed the version of vue-router "version": "3.5.2",Works fine

answered Feb 10, 2022 at 13:15

Franck Lee

11 bronze badge

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related