I am migrating a codebase from vue 2 to vue 3 and making some good progress. I have been stuck on an issue with vue-router and I am not sure how to resolve it. I am currently using #vue/compat and walking through the installation guide.
The problem is tied to <router-link> whenever I use it, I get the following errors:
Uncaught (in promise) TypeError: Cannot destructure property 'options' of 'vue.inject(...)' as it is undefined.
at setup (.../node_modules/vue-router/dist/vue-router.cjs.js:2138)
at callWithErrorHandling (vue.runtime.esm-bundler.js?ebac:123)
at setupStatefulComponent (vue.runtime.esm-bundler.js?ebac:1242)
at setupComponent (vue.runtime.esm-bundler.js?ebac:1238)
at mountComponent (vue.runtime.esm-bundler.js?ebac:838)
at processComponent (vue.runtime.esm-bundler.js?ebac:834)
at patch (vue.runtime.esm-bundler.js?ebac:755)
at ReactiveEffect.componentUpdateFn [as fn] (vue.runtime.esm-bundler.js?ebac:856)
at ReactiveEffect.run (vue.runtime.esm-bundler.js?ebac:67)
at setupRenderEffect (vue.runtime.esm-bundler.js?ebac:881)
The error is preceded with some warnings as well:
// 3 of:
[Vue warn]: inject() can only be used inside setup() or functional components.
// and 1 of:
[Vue warn]: Unhandled error during execution of scheduler flush.
This is likely a Vue internals bug.
Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core
(vue.runtime.esm-bundler.js?ebac:120)
I have stripped the main.js down to:
import { createApp, configureCompat } from 'vue'
import App from './App'
import router from './router'
import store from './store'
import './main.css'
// some font awesome icon & vue-fontawesome imports/registration as well
configureCompat({
MODE: 3
})
createApp(App)
.use(router)
.use(store)
.component('font-awesome-icon', FontAwesomeIcon)
.mount('#app')
Here is my router:
import {createRouter, createWebHistory} from 'vue-router'
import Module from '#/components/Framework/Module'
import Dashboard from "#/views/Dashboard"
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
name: 'dashboard',
component: Dashboard
},
]
})
export default router
Related
Implementing Vue i18n into Vuetify is failing. I think I've followed the guide fairly well.
The below config results in the following error:
[Vue warn]: Error in render: "TypeError: Cannot read property '_t' of undefined"
vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import VueI18n from "vue-i18n"
import messages from "../i18n/i18n"
Vue.use(Vuetify)
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: 'en',
messages
})
export default new Vuetify({
lang: {
t: (key, ...params) => i18n.t(key, params),
}
});
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify';
import store from './store';
Vue.config.productionTip = false
new Vue({
//created,
store,
router,
vuetify: vuetify,
render: h => h(App)
}).$mount('#app')
i18n folder
/i18n
+i18n.js
/locales
+en.js
i18n.js
import en from './locales/en'
export default {
en
}
en.js
export default {
login: 'Login!'
}
component usage
<v-toolbar-title>
{{ $t('login') }}
</v-toolbar-title>
Full stack trace
[Vue warn]: Error in render: "TypeError: Cannot read property '_t' of undefined"
found in
---> <Login> at src/views/Login.vue
<App> at src/App.vue
<Root>
warn # vue.runtime.esm.js:619
vue.runtime.esm.js:1888 TypeError: Cannot read property '_t' of undefined
at Proxy.Vue.$t (vue-i18n.esm.js:192)
at Proxy.render (Login.vue?81ae:33)
at VueComponent.Vue._render (vue.runtime.esm.js:3548)
at VueComponent.updateComponent (vue.runtime.esm.js:4066)
at Watcher.get (vue.runtime.esm.js:4479)
at new Watcher (vue.runtime.esm.js:4468)
at mountComponent (vue.runtime.esm.js:4073)
at VueComponent.push../node_modules/vue/dist/vue.runtime.esm.js.Vue.$mount (vue.runtime.esm.js:8415)
at init (vue.runtime.esm.js:3118)
at merged (vue.runtime.esm.js:3301)
My goal is to extend Vuetify locals under VueI18n as answered here: Use both Vuetify and Vue-i18n translations.
If I move the VueI18n definition and pass it to Vue constructor, this works.
What is the preferred way to configure this functionality?
js and have a problem to use vue-router, my component isn't rendered and console show no errors, follow my code:
router config (/router/index.js):
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '#/pages/Home/Home.vue'
import NewUser from '#/pages/NewUser/NewUser.vue'
Vue.use(VueRouter)
const routes = [
{ path: '/', component: Home.default },
{ path: '/NewUser', component: NewUser.default }
]
export default new VueRouter({
routes
})
main.js:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import 'primevue/resources/themes/nova-light/theme.css'
import 'primevue/resources/primevue.min.css'
import 'primeicons/primeicons.css'
import 'primeflex/primeflex.css'
import Vuelidate from 'vuelidate'
import Card from 'primevue/card'
import InputMask from 'primevue/inputmask'
import Button from 'primevue/button'
import Sidebar from 'primevue/sidebar'
import InputText from 'primevue/inputtext';
import Message from 'primevue/message';
Vue.config.productionTip = false
Vue.use(Vuelidate)
Vue.component('Card', Card)
Vue.component('InputMask', InputMask)
Vue.component('Button', Button)
Vue.component('Sidebar', Sidebar)
Vue.component('InputText', InputText)
Vue.component('Message', Message)
new Vue({
router: router,
render: h => h(App),
}).$mount('#app')
app.vue:
<template>
<Fragment id="app">
<Header />
<router-view />
<Footer />
</Fragment>
</template>
<script src="./App.js"></script>
<style src="./App.css"></style>
my router-links is in header component, follow the github repository with the projetc:
https://github.com/juniorjrjl/weblib-front
thank you
[edited]
link removede because i solved part of problem and finally get error message
[edited]
I remove a link because not generate error in a link and I finally get error message after remove '.default' in my routes
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in nextTick:
"NotFoundError: Failed to execute 'insertBefore' on 'Node': The node
before which the new node is to be inserted is not a child of this
node."
vue.runtime.esm.js?2b0e:1888 DOMException: Failed to execute
'insertBefore' on 'Node': The node before which the new node is to be
inserted is not a child of this node.
at HTMLBodyElement.n.insertBefore (webpack-
internal:///./node_modules/vue-fragment/dist/vue-
fragment.esm.js:5:1609)
at HTMLDivElement.e.insertBefore (webpack-
internal:///./node_modules/vue-fragment/dist/vue-
fragment.esm.js:5:1293)
at Object.insertBefore (webpack-
internal:///./node_modules/vue/dist/vue.runtime.esm.js:5699:14)
at insert (webpack-
internal:///./node_modules/vue/dist/vue.runtime.esm.js:6029:19)
at createComponent (webpack-
internal:///./node_modules/vue/dist/vue.runtime.esm.js:5976:9)
at createElm (webpack-
internal:///./node_modules/vue/dist/vue.runtime.esm.js:5915:9)
at updateChildren (webpack-
internal:///./node_modules/vue/dist/vue.runtime.esm.js:6206:11)
at patchVnode (webpack-
internal:///./node_modules/vue/dist/vue.runtime.esm.js:6309:29)
at VueComponent.patch [as __patch__] (webpack-
internal:///./node_modules/vue/dist/vue.runtime.esm.js:6472:9)
at VueComponent.Vue._update (webpack-
internal:///./node_modules/vue/dist/vue.runtime.esm.js:3942:19)
If you need to have a fallback route when the path does not match any component then do this.
const Foo = { template: "<div>foo</div>" };
const Bar = { template: "<div>bar</div>" };
const NotFound = { template: "<div>Page not found</div>" };
Vue.config.productionTip = false;
Vue.use(VueRouter);
const routes = [
{ path: "/NewUser", component: Bar },
{ path: "/", component: Foo },
{ path: "*", component: NotFound }
];
Working implementation attached.
If you want to create nested router-views then read on it here:
https://router.vuejs.org/guide/essentials/named-views.html#nested-named-views
Changing your route did the trick for me. For default routing the syntax is different (see more https://router.vuejs.org/guide/essentials/named-views.html#nested-named-views)
const routes = [
{ path: '/', component: Home },
{ path: '/NewUser', component: NewUser }
]
When I invoke an imported vuex action in my vue file the code errors out and breaks the site. I've even broken it down to the simplest of things (console log a string from within the action when I click a button tied to that action).
In my Vue root
import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import router from './router'
import JsonCSV from 'vue-json-csv'
import { store } from './store/index'
Vue.component('downloadCsv', JsonCSV)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router,
store
}).$mount('#app')
In my .vue file:
import {mapGetters,mapActions} from 'vuex'
methods: {
...mapActions([
'sendDraftSelectionPost'
]),
selectPlayerMethod() {
this.sendDraftSelectionPost('hello')
}
}
In my index.js file in which I've imported Vuex
import Vue from 'vue'
import Vuex from 'vuex'
import { debug } from 'util';
import draft from './modules/draft'
Vue.use(Vuex)
Vue.config.devtools = true
const store = new Vuex.Store({
strict: debug,
modules: {
draft,
}
})
export default store
In my actions.js file:
const actions = {
sendDraftSelectionPost ({ commit }, draftSelection) {
console.log(draftSelection)
}
}
export default actions
The expected results should be I simply see a string console logged in dev console saying 'Hello'
However, I get a bit nasty error saying the following:
[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'dispatch' of undefined"
I haven't even typed the word "dispatch" in my code, so I'm thoroughly confused. After searching on here and finding a lot of posts similar, I haven't found anything that has a solid answer or solution.
Any help is appreciated.
Per conversation with #Phil, the solution to the original problem (not the sub problem stated in the comments) was to fix my import in my root Vue from import { store } from './store/index' to import store from './store'. Thanks, #Phil!!!
I have an issue I looked everywhere but not found suitable solution.
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> at src/App.vue
import Vue from 'vue'
import App from './App.vue'
import Generic from './Generic.vue' import ABC from './abc.vue' import ueRouter from 'vue-router' import { routes } from './router.js'
Vue.component('vue-header', Header); Vue.component('vue-generic', eneric); Vue.component('vue-abc', ABC);
Vue.use('VueRouter');
const router = new VueRouter({
routes,
mode: 'history'
});
new Vue({ el: '#app', routes, render: h => h(App) })
Thanks in advance
Don't call Vue.use() on a string. So, instead of having Vue.use('VueRouter') as in:
import VueRouter from 'vue-router';
Vue.use('VueRouter'); // don't call .use() on a string
Call Vue.use() on the previously imported reference (e.g. Vue.use(VueRouter)) as in:
import VueRouter from 'vue-router';
Vue.use(VueRouter); // call .use() on the imported reference
I recently updated from vue 2.1 to vue 2.5.
I have used vue-cli to create the project and then moved the previous 2.1 project's components to src folder.
After that I started receiving an error:
Uncaught TypeError: Cannot read property 'components' of undefined
at checkComponents (vue.esm.js?e1b2:1321)
at mergeOptions (vue.esm.js?e1b2:1442)
at mergeOptions (vue.esm.js?e1b2:1458)
at Vue$3.Vue._init (vue.esm.js?e1b2:4528)
at new Vue$3 (vue.esm.js?e1b2:4646)
at eval (main.js?3479:41)
at Object../src/main.js (app.js:5655)
at __webpack_require__ (app.js:679)
at fn (app.js:89)
at Object.0 (app.js:5928)
My main.js in as below:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import { store } from './store'
import mixins from './mixins'
import VueRouter from 'vue-router'
import routes from './routes'
const router = new VueRouter({
routes: routes.routes
// mode: 'history'
})
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App),
store: store,
mixins: [mixins]
})
Here is the App.vue file as requested:
<template>
<div id="app">
<el-container>
<navbar v-if="loggedIn"></navbar>
<el-aside style="width:auto; z-index:9999; ">
<sidebar v-if="loggedIn"></sidebar>
</el-aside>
<el-main style="width:auto;">
<router-view></router-view>
</el-main>
</el-container>
</div>
</template>
<script>
import Sidebar from './page_components/Sidebar'
import Navbar from './page_components/Navbar'
export default {
components: {
Sidebar,
Navbar
}
}
I am getting the error in following line in vue.esm.js:
I had a similar problem where an update also stopped my Vue app for no obvious reason and was saying undefined like you're experiencing here.
The simple solution was to add .default to the end of all my components when registering in my app.js file.
Vue.component('nav-container', require('./components/nav/nav-container.vue').default);