Cannot read property '__disableEmitter' of undefined

[DanyDolphin]

Hi
I have a problem using legacy $i18n and $t objects provided in any component. My project has Vue 3 and uses router. When I change the route, I got this error:

Uncaught (in promise) TypeError: Cannot read property '__disableEmitter' of undefined
at Proxy.beforeUnmount (vue-i18n.esm-bundler.js?47e2:2561)
at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:154)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?5c40:163)
at Array.hook.__weh.hook.__weh (runtime-core.esm-bundler.js?5c40:2302)
at invokeArrayFns (shared.esm-bundler.js?9ff4:451)
at unmountComponent (runtime-core.esm-bundler.js?5c40:4758)
at unmount (runtime-core.esm-bundler.js?5c40:4672)
at unmountChildren (runtime-core.esm-bundler.js?5c40:4804)
at unmount (runtime-core.esm-bundler.js?5c40:4690)
at unmountChildren (runtime-core.esm-bundler.js?5c40:4804)

###vue & vue-i18n version
vue: 3.0.0
vue-i18n: 9.0.0-beta.12

Steps to reproduce

main.js
`import { createApp } from 'vue';
import { createI18n } from 'vue-i18n'
import es from './i18n/es.json'
import en from './i18n/en.json'
import App from './App.vue';
import router from './router';
import store from './store';

const i18n = createI18n({
legacy: true,
locale: 'es',
fallbackLocale: 'es',
messages: {es,en}
})

const app = createApp(App)
//app.config.devtools = true
app.use(store)
app.use(router)
app.use(i18n)
app.mount('#app');
`

router.js
`import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Catalog from '../views/Catalog.vue'
import Product from '../views/Product.vue'
import VisionTest from '../views/vision-test/VisionTest.vue'
import ShoppingBag from '../views/ShoppingBag'
import Purchase from '../views/Purchase'

import AdminLogin from '../views/admin/AdminLogin'
import Activation from '../views/Activation.vue'

import UserAuth from '../views/user/UserAuth'

import adminService from '../services/admin-service'
import userService from '../services/user-service'
import employeeService from '../services/employee-service'

// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
// component: () => import(/* webpackChunkName: "about" */ '../views/Catalog.vue'),

const routes = [
{ path: '/', name: 'Home', component: Home },
{ path: '/catalog/:category/:type', name: 'Catalog', component: Catalog, props: true },
{ path: '/product/:id/:flavor?', name: 'Product', component: Product, props: true },
{ path: '/vision-test', name: 'VisionTest', component: VisionTest },
{ path: '/shopping-bag', name: 'ShoppingBag', component: ShoppingBag },
{ path: '/purchase', name: 'Purchase', component: Purchase },

{ path: '/activation/:code/:email', name: 'Activation', component: Activation, props: true },

{ path: '/admin-login', name: 'AdminLogin', component: AdminLogin },
{ path: '/admin', name: 'Admin', component: () => import(/* webpackChunkName: "admin" / '../views/admin/Admin.vue'),
children: [
{ path: '', redirect: '/admin/config'},
{ path: 'config', name: 'AdminConfig', component: () => import(/ webpackChunkName: "admin" / '../views/admin/Config.vue') },
{ path: 'employees', name: 'AdminEmployees', component: () => import(/ webpackChunkName: "admin" / '../views/admin/Employees.vue') },
{ path: 'services', name: 'AdminServices', component: () => import(/ webpackChunkName: "admin" / '../views/admin/Services.vue') },
{ path: 'products', name: 'AdminProducts', component: () => import(/ webpackChunkName: "admin" / '../views/admin/Products.vue') },
{ path: 'packs', name: 'AdminPacks', component: () => import(/ webpackChunkName: "admin" / '../views/admin/Packs.vue') },
{ path: 'ads', name: 'AdminAds', component: () => import(/ webpackChunkName: "admin" / '../views/admin/Ads.vue') },
{ path: 'offices', name: 'AdminOffices', component: () => import(/ webpackChunkName: "admin" */ '../views/admin/Offices.vue') },
], beforeEnter (to, from, next) {
if (!adminService.isAdminLogged())
next('/admin-login')
else next()
}},

{ path: '/user-login', name: 'UserAuth', component: UserAuth },
{ path: '/user', name: 'User', component: () => import(/* webpackChunkName: "user" / '../views/user/User.vue'), children: [
{ path: '', redirect: '/user/config'},
{ path: 'config', name: 'UserConfig', component: () => import(/ webpackChunkName: "user" / '../views/admin/Config.vue') },
{ path: 'addresses', name: 'UserAddresses', component: () => import(/ webpackChunkName: "user" / '../views/user/Addresses.vue') },
{ path: 'payment-methods', name: 'UserPaymentMethods', component: () => import(/ webpackChunkName: "user" / '../views/user/PaymentMethods.vue') },
{ path: 'purchases', name: 'UserPurchases', component: () => import(/ webpackChunkName: "user" / '../views/user/Purchases.vue') },
{ path: 'appointments', name: 'UserAppointments', component: () => import(/ webpackChunkName: "user" */ '../views/user/Appointments.vue') },
], beforeEnter (to, from, next) {
if (!userService.isUserLogged())
next('/user-login')
else next()
}},

{ path: '/employee-login', name: 'EmployeeLogin', component: AdminLogin },
{ path: '/employee', name: 'Employee', component: () => import(/* webpackChunkName: "employee" / '../views/employee/Employee.vue'), children: [
{ path: '', redirect: '/employee/inventory'},
{ path: 'inventory', name: 'EmployeeInventory', component: () => import(/ webpackChunkName: "employee" / '../views/employee/Inventory.vue') },
{ path: 'incoming-appointments', name: 'EmployeeIncomingAppointments', component: () => import(/ webpackChunkName: "employee" / '../views/employee/IncomingAppointments.vue') },
{ path: 'incoming-purchases', name: 'EmployeeIncomingPurchases', component: () => import(/ webpackChunkName: "employee" / '../views/employee/IncomingPurchases.vue') },
{ path: 'invoices', name: 'EmployeePaymentMethods', component: () => import(/ webpackChunkName: "employee" / '../views/employee/Invoices.vue') },
{ path: 'discount-solicitudes', name: 'EmployeeDiscountSolicitudes', component: () => import(/ webpackChunkName: "admin" */ '../views/employee/DiscountSolicitudes.vue') },
], beforeEnter (to, from, next) {
if (!employeeService.isEmployeeLogged())
next('/employee-login')
else if (to.path !== '/employee/invoices'
&& employeeService.getCurrentEmployee().user.systemRole === 'FINANCE_EMPLOYEE')
next('/employee/invoices')
else next()
}},
];

const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
});

router.beforeEach((to, from) => {
window.scrollTo(0, 0)
return true
})

export default router;`

That's it. I don't even need to use the $i18n object inside a component to reproduce the error

##What is Expected?
Change routes by clicking some <router-view> without getting the error

What is actually happening?

I got the error and my app gets stuck

Please, I need to solve this issue. I have read a lot of links on Google. I didn't found any documentation about the error.

[kazupon]

Thank you for your reporting!
Could you upgrade to vue-i18n: 9.0.0-beta.16, please?

[DanyDolphin]

Hi. sorry for answer this late.
I updated to 9.0.0-beta.16 and the problems persist.
But I have an update :D
when I start my Vue proyect with npm run serve, I found this message in my Chrome console:

You are running a development build of vue-i18n.
Make sure to use the production build (*.prod.js) when deploying for production.

So I tried to start my proyect with NODE_ENV=production npm run serve in order to simulate production mode and everything works.

[mix-it]

Hello, I have same issue. It appears when I click on any router-link.
Version of vue-i18n is 9.0.0-beta.17

I can confirm, everything works with NODE_ENV=production yarn serve

Can I provide any more information?
Thank you for your work!

[buyijiuyang]

Hello, I have same issue. It appears when I click on any router-link.
Version of vue-i18n is 9.0.0-beta.17

I can confirm, everything works with NODE_ENV=production yarn serve

Can I provide any more information?
Thank you for your work!

This should be a problem of inconsistent versions of Vue modules. After all modules are upgraded to the latest, this problem will disappear.

[kuba108]

@buyijiuyang Alright! I ran yarn upgrade and you are right, this issue disappeared. Thanks a lot.

[kazupon]

Close, due to there seems to be no other occurrences.

[zb-0819]

@kazupon Hello, I have same issue. It appears when NODE_ENV=development, and all modules are upgraded to the latest, i dont know why this problem will disappear when NODE_ENV=production. Thank you for your work!