TypeError: Cannot read properties of undefined (reading '__composer')

[kolaente]

Reporting a bug?

Follow up for #793 (comment)

I'm hitting a slightly similar error to #793 with the latest version 9.2.0-beta.28:

I could not notice if it has any effects on the UI of my application but the errors are really annoying.

The code section (copied from dev tools):

        mounted() {
            nextTick(() => {
                /* istanbul ignore if */
                if (((process.env.NODE_ENV !== 'production') || __VUE_PROD_DEVTOOLS__) &&
                    !false &&
                    this.$el) {
                    this.$el.__VUE_I18N__ = this.$i18n.__composer;
                    const emitter = (this.__v_emitter =
                        createEmitter());
                    const _vueI18n = this.$i18n;
                    _vueI18n.__enableEmitter && _vueI18n.__enableEmitter(emitter);
                    emitter.on('*', addTimelineEvent);
                }
            });
        },

Expected behavior

No error in console.

Reproduction

This isn't a minimal reproduction of the bug, but I'm not sure how I should reproduce it - even in my application I can't understand why it happens and it does not happen all the time.

1. Check out https://kolaente.dev/vikunja/frontend at commit 55b77725df4a71ea248fbee2eb7b613fc590f6aa
2. Install dependencies with yarn install
3. Start the dev server with yarn serve
4. Using chrome, open the app at localhost:5000
5. As an api url, use https://try.vikunja.io
6. Use demo as a username and password.
7. Click around in the app a bit with dev tools openend, the error will appear eventually.

System Info

System:
    OS: Linux 5.10 NixOS 21.11 (Porcupine) 21.11 (Porcupine)
    CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
    Memory: 12.41 GB / 31.37 GB
    Container: Yes
    Shell: 5.8 - /run/current-system/sw/bin/zsh
  Binaries:
    Node: 14.18.1 - /etc/profiles/per-user/konrad/bin/node
    Yarn: 1.22.17 - /etc/profiles/per-user/konrad/bin/yarn
    npm: 6.14.15 - /etc/profiles/per-user/konrad/bin/npm
  Browsers:
    Chromium: 97.0.4692.71
    Firefox: 95.0.2
  npmPackages:
    @vitejs/plugin-legacy: 1.6.4 => 1.6.4
    @vitejs/plugin-vue: 2.1.0 => 2.1.0
    @vue/compat: 3.2.28 => 3.2.28
    @vue/eslint-config-typescript: 10.0.0 => 10.0.0
    vite: 2.7.13 => 2.7.13
    vite-plugin-pwa: 0.11.13 => 0.11.13
    vite-svg-loader: 3.1.2 => 3.1.2
    vitest: 0.1.27 => 0.1.27
    vue: 3.2.28 => 3.2.28
    vue-advanced-cropper: 2.7.1 => 2.7.1
    vue-drag-resize: 2.0.3 => 2.0.3
    vue-flatpickr-component: 9.0.5 => 9.0.5
    vue-i18n: 9.2.0-beta.28 => 9.2.0-beta.28
    vue-router: 4.0.12 => 4.0.12
    vue-tsc: 0.30.6 => 0.30.6
    vuedraggable: 4.1.0 => 4.1.0
    vuex: 4.0.2 => 4.0.2

Screenshot

No response

Additional context

No response

Validations

• Read the Contributing Guidelines
• Read the Documentation
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion
• The provided reproduction is a minimal reproducible example of the bug.

[kazupon]

Thank you for your reporting!

I've just tried your reproduction site, but unfortunately, I could not reproduce this issue 😞

The code section is provided with you, It would be helpd to the solution for me.

I'll give it some more thought later.
Thanks!

[kolaente]

It looks like this is happening here: https://github.com/intlify/vue-i18n-next/blob/ac341b6f0977839d8cf19a41607d7b2983e21d3e/packages/vue-i18n-core/src/mixins/next.ts#L110 and is caused by this.$i18n being undefined. Because the function happens in the mounted() hook of the mixin, I'm not sure what might have caused it. Does not look like it's getting called by something.

What could cause the this.$i18n property to get deleted? Maybe we should start to look from there?

[kazupon]

Yeah!
I understood about it.
I need to find out why it has been removed or left undefined.

[kolaente]

Anything I can do to help debug this?

[apetrenkov]

FYI: got this on 9.1.9

[kazupon]

@kolaente

Click around in the app a bit with dev tools openend, the error will appear eventually.
System Info

Thanks!
I would like to know the pattern that will reproduce reliably in your application.

I will find out the cause from your stack trace.
I guess that it has something to do with the loadPendingTasks call via the create hook in ShowTask.vue.

[christianbayer]

Hey! I'm having the same issue. Debugging a little bit, starting with what @apetrenkov saw, I found that commenting out the delete this.$i18n "solves" the problem..

https://github.com/intlify/vue-i18n-next/blob/ac341b6f0977839d8cf19a41607d7b2983e21d3e/packages/vue-i18n-core/src/mixins/next.ts#L153

Apparently not all components throws this error, just the ones wrapped in a v-if or something, which are created and destroyed too quickly.

Wondering if there is a chance of the unmounted hook being called before the mounted one..

Edit: That's actually it. I've logged the steps with the component's internal uid and noticed that:

1. mounted() is called;
2. unmounted() is called right after;
3. delete this.$i18n is called;
4. this.$el.__VUE_I18N__ = this.$i18n.__composer after;

This occurs because the nextTick(() => { ... }) of each hook is changing the execution order.

No idea on how to solve it, though.

[kazupon]

@christianbayer
Thank you for your reporting!
Your information is going to be very helpful in solving this issue ❤️

It looks like running nextTick is probably causing this issue due to Vue lifecycle order miss-match.

I appreciate your PR, but we still cannot find out the root cause. if we don't know the root cause, even if we fix it, it will cause the same issue again.