Cannot read property '__disableEmitter' of undefined

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.

[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!

[kazupon]

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