[Vue warn]: Error in created hook: "TypeError: moment.tz.guess is not a function"

I am trying to use Moment Timezone in my code. I tried to include it in vendor/laravel/spark/resources/assets/js/spark-bootstrap.js file with the code

window.moment.tz = require('moment-timezone/builds/moment-timezone-with-data.min');

after

window.moment = require('moment');

I am trying to use it in the following code:

var base = require('auth/register-stripe');

Vue.component('spark-register-stripe', {
    mixins: [base],

...

    created() {
        this.guessTimezone();
    },

    methods: {
        /**
         * Attempt to guess the user's timezone.
         */
        guessTimezone() {
            this.registerForm.user_tz = moment.tz.guess();
        }
    }

});

And I am getting the error:

[Vue warn]: Error in created hook: "TypeError: moment.tz.guess is not a function"

What causes this error and how to fix it?

richardbishopme

8 years ago

Level 24

Hi @debiprasad,

Thanks for posting. I think this error appears because the component itself expects moment.tz.guess to be a method on the component.

To fix, I guess you'd need to access the root directly. Give this a try:

this.registerForm.user_tz = this.$root.moment().tz.guess();

If that doesn't work, try:

this.registerForm.user_tz = this.$root.moment.tz.guess();

debiprasad

8 years ago

Level 2

Hi @desloc,

Thank you for your help. Unfortunately, these did not work.

this.registerForm.user_tz = this.$root.moment().tz.guess();

shows this error:

[Vue warn]: Error in created hook: "TypeError: this.$root.moment is not a function"

this.registerForm.user_tz = this.$root.moment.tz.guess();

shows this error:

[Vue warn]: Error in created hook: "TypeError: Cannot read property 'tz' of undefined"

Please or to participate in this conversation.