Hi I have a weird problem
i have a Vue component that take some props. Before in the code the component was only registered locally and it worked fine, but due to changes in the system, I needed to register it globally also, but then this weird issue came up.
all the props in the component, no matter what you pass to it is undefined
in the parent I use the component like so:
<questionnaire
v-if="questionnaire !== null && questions !== null && informationAssets !== null"
:current_status="savestatus"
:questionnaire="questionnaire"
:informationAssets="informationAssets"
:questions="questions"
v-on:questionChange="updateQuestion(arguments[0], arguments[1])">
</questionnaire>
then inside the questionnaire component i console.log the parents data and the prop in the created hook:
created() {
console.log(this.questionnaire, this.questions, this.informationAssets)
console.log(this.$parent.questionnaire, this.$parent.questions, this.$parent.informationAssets)
}
so here's the funny part. when we look at the console.log i get
undefined undefined undefined
---------------------------------------------------------------------------
{…}
(36) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, __ob__: Observer]
{__ob__: Observer}
so when the questionnaire component loads, the data is present in the parent (as expected) but the props are still undefined.
I really don't get this. Is there a problem with both locally register a component and globally register it, but under a different name.
when the component tries to load it won't render and gives this error
vue.js:583 [Vue warn]: Error in nextTick: "TypeError: Cannot read property 'title' of undefined"
warn # vue.js:583
logError # vue.js:1578
globalHandleError # vue.js:1573
handleError # vue.js:1562
(anonymous) # vue.js:1680
flushCallbacks # vue.js:1599
Promise.then (async)
microTimerFunc # vue.js:1645
nextTick # vue.js:1691
queueWatcher # vue.js:2791
update # vue.js:2917
notify # vue.js:681
reactiveSetter # vue.js:964
proxySetter # vue.js:3005
(anonymous) # information-assets-processor.vue?cf9d:347
Promise.then (async)
getData # information-assets-processor.vue?cf9d:346
created # information-assets-processor.vue?cf9d:574
callHook # vue.js:2650
Vue._init # vue.js:4123
VueComponent # vue.js:4291
createComponentInstanceForVnode # vue.js:3842
init # vue.js:3690
createComponent # vue.js:5025
createElm # vue.js:4979
patch # vue.js:5549
Vue._update # vue.js:2416
updateComponent # vue.js:2521
get # vue.js:2850
run # vue.js:2927
flushSchedulerQueue # vue.js:2711
(anonymous) # vue.js:1678
flushCallbacks # vue.js:1599
Promise.then (async)
microTimerFunc # vue.js:1645
nextTick # vue.js:1691
queueWatcher # vue.js:2791
update # vue.js:2917
notify # vue.js:681
reactiveSetter # vue.js:964
(anonymous) # vue-router.esm.js:2353
(anonymous) # vue-router.esm.js:2352
updateRoute # vue-router.esm.js:1884
(anonymous) # vue-router.esm.js:1759
(anonymous) # vue-router.esm.js:1869
step # vue-router.esm.js:1604
step # vue-router.esm.js:1611
runQueue # vue-router.esm.js:1615
(anonymous) # vue-router.esm.js:1864
step # vue-router.esm.js:1604
(anonymous) # vue-router.esm.js:1608
(anonymous) # vue-router.esm.js:1847
(anonymous) # vue-router.esm.js:1679
iterator # vue-router.esm.js:1832
step # vue-router.esm.js:1607
step # vue-router.esm.js:1611
runQueue # vue-router.esm.js:1615
confirmTransition # vue-router.esm.js:1855
transitionTo # vue-router.esm.js:1758
addRoutes # vue-router.esm.js:2429
addRoutes # risma.vue?2a44:51
(anonymous) # index.js:120
i # jquery-2.2.4.min.js?v=6.5.5:2
fireWith # jquery-2.2.4.min.js?v=6.5.5:2
ready # jquery-2.2.4.min.js?v=6.5.5:2
J # jquery-2.2.4.min.js?v=6.5.5:2
vue.js:1582 TypeError: Cannot read property 'title' of undefined
at o.render (questionnaire.vue?9925:6)
at o.Re.n._render (vue.min.js:6)
at o.<anonymous> (vue.min.js:6)
at Vi.get (vue.min.js:7)
at new Vi (vue.min.js:7)
at o.e._mount (vue.min.js:6)
at o.Be.$mount (vue.min.js:8)
at o.Be.$mount (vue.min.js:8)
at init (vue.js:3691)
at createComponent (vue.js:5025)
logError # vue.js:1582
globalHandleError # vue.js:1573
handleError # vue.js:1562
(anonymous) # vue.js:1680
flushCallbacks # vue.js:1599
Promise.then (async)
microTimerFunc # vue.js:1645
nextTick # vue.js:1691
queueWatcher # vue.js:2791
update # vue.js:2917
notify # vue.js:681
reactiveSetter # vue.js:964
proxySetter # vue.js:3005
(anonymous) # information-assets-processor.vue?cf9d:347
Promise.then (async)
getData # information-assets-processor.vue?cf9d:346
created # information-assets-processor.vue?cf9d:574
callHook # vue.js:2650
Vue._init # vue.js:4123
VueComponent # vue.js:4291
createComponentInstanceForVnode # vue.js:3842
init # vue.js:3690
createComponent # vue.js:5025
createElm # vue.js:4979
patch # vue.js:5549
Vue._update # vue.js:2416
updateComponent # vue.js:2521
get # vue.js:2850
run # vue.js:2927
flushSchedulerQueue # vue.js:2711
(anonymous) # vue.js:1678
flushCallbacks # vue.js:1599
Promise.then (async)
microTimerFunc # vue.js:1645
nextTick # vue.js:1691
queueWatcher # vue.js:2791
update # vue.js:2917
notify # vue.js:681
reactiveSetter # vue.js:964
(anonymous) # vue-router.esm.js:2353
(anonymous) # vue-router.esm.js:2352
....
I really need a sharp minded Vue expert, to tell me what I'm doing wrong
Related
I'm switching from Firestore to MongoDB, and I'm now trying to remove references to it in my App.vue file. I'm still using Firebase auth.
Where it says this in the console error:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in beforeMount hook: "FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).
My beforeMount() never had App.initializeApp(), and I'm trying to figure out where that needs to go, but nothing is working. I'm really puzzled as to why this one component is not behaving as expected after removing references to Firestore, as all my other components worked fine. Any advice is greatly appreciated.
Full console error:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in beforeMount hook: "FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app)."
found in
---> <Index> at src/components/Index.vue
<App> at src/App.vue
<Root>
warn # vue.runtime.esm.js?2b0e:619
logError # vue.runtime.esm.js?2b0e:1893
globalHandleError # vue.runtime.esm.js?2b0e:1888
handleError # vue.runtime.esm.js?2b0e:1848
invokeWithErrorHandling # vue.runtime.esm.js?2b0e:1871
callHook # vue.runtime.esm.js?2b0e:4235
mountComponent # vue.runtime.esm.js?2b0e:4058
Vue.$mount # vue.runtime.esm.js?2b0e:8459
init # vue.runtime.esm.js?2b0e:3137
merged # vue.runtime.esm.js?2b0e:3322
createComponent # vue.runtime.esm.js?2b0e:6022
createElm # vue.runtime.esm.js?2b0e:5969
patch # vue.runtime.esm.js?2b0e:6560
Vue._update # vue.runtime.esm.js?2b0e:3963
updateComponent # vue.runtime.esm.js?2b0e:4081
get # vue.runtime.esm.js?2b0e:4495
run # vue.runtime.esm.js?2b0e:4570
flushSchedulerQueue # vue.runtime.esm.js?2b0e:4326
eval # vue.runtime.esm.js?2b0e:1989
flushCallbacks # vue.runtime.esm.js?2b0e:1915
Promise.then (async)
timerFunc # vue.runtime.esm.js?2b0e:1942
nextTick # vue.runtime.esm.js?2b0e:1999
queueWatcher # vue.runtime.esm.js?2b0e:4418
update # vue.runtime.esm.js?2b0e:4560
notify # vue.runtime.esm.js?2b0e:730
reactiveSetter # vue.runtime.esm.js?2b0e:1055
eval # vue-router.esm.js?8c4f:2989
eval # vue-router.esm.js?8c4f:2988
updateRoute # vue-router.esm.js?8c4f:2409
eval # vue-router.esm.js?8c4f:2263
eval # vue-router.esm.js?8c4f:2397
step # vue-router.esm.js?8c4f:2001
step # vue-router.esm.js?8c4f:2008
runQueue # vue-router.esm.js?8c4f:2012
eval # vue-router.esm.js?8c4f:2392
step # vue-router.esm.js?8c4f:2001
eval # vue-router.esm.js?8c4f:2005
eval # vue-router.esm.js?8c4f:2379
eval # vue-router.esm.js?8c4f:2127
eval # vue-router.esm.js?8c4f:2203
Promise.then (async)
eval # vue-router.esm.js?8c4f:2150
eval # vue-router.esm.js?8c4f:2171
eval # vue-router.esm.js?8c4f:2171
flatMapComponents # vue-router.esm.js?8c4f:2170
eval # vue-router.esm.js?8c4f:2106
iterator # vue-router.esm.js?8c4f:2357
step # vue-router.esm.js?8c4f:2004
step # vue-router.esm.js?8c4f:2008
runQueue # vue-router.esm.js?8c4f:2012
confirmTransition # vue-router.esm.js?8c4f:2387
transitionTo # vue-router.esm.js?8c4f:2260
init # vue-router.esm.js?8c4f:2980
beforeCreate # vue-router.esm.js?8c4f:1298
invokeWithErrorHandling # vue.runtime.esm.js?2b0e:1863
callHook # vue.runtime.esm.js?2b0e:4235
Vue._init # vue.runtime.esm.js?2b0e:5018
Vue # vue.runtime.esm.js?2b0e:5099
eval # main.js?56d7:30
./src/main.js # app.js:1225
__webpack_require__ # app.js:854
fn # app.js:151
1 # app.js:1262
__webpack_require__ # app.js:854
checkDeferredModules # app.js:46
(anonymous) # app.js:994
(anonymous) # app.js:997
vue.runtime.esm.js?2b0e:1897 FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).
at app (index.esm.js?cc84:356:1)
at Object.serviceNamespace [as auth] (index.esm.js?cc84:406:1)
at VueComponent.beforeMount (Index.vue?b484:544:1)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1863:1)
at callHook (vue.runtime.esm.js?2b0e:4235:1)
at mountComponent (vue.runtime.esm.js?2b0e:4058:1)
at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8459:1)
at init (vue.runtime.esm.js?2b0e:3137:1)
at merged (vue.runtime.esm.js?2b0e:3322:1)
at createComponent (vue.runtime.esm.js?2b0e:6022:1)
logError # vue.runtime.esm.js?2b0e:1897
globalHandleError # vue.runtime.esm.js?2b0e:1888
handleError # vue.runtime.esm.js?2b0e:1848
invokeWithErrorHandling # vue.runtime.esm.js?2b0e:1871
callHook # vue.runtime.esm.js?2b0e:4235
mountComponent # vue.runtime.esm.js?2b0e:4058
Vue.$mount # vue.runtime.esm.js?2b0e:8459
init # vue.runtime.esm.js?2b0e:3137
merged # vue.runtime.esm.js?2b0e:3322
createComponent # vue.runtime.esm.js?2b0e:6022
createElm # vue.runtime.esm.js?2b0e:5969
patch # vue.runtime.esm.js?2b0e:6560
Vue._update # vue.runtime.esm.js?2b0e:3963
updateComponent # vue.runtime.esm.js?2b0e:4081
get # vue.runtime.esm.js?2b0e:4495
run # vue.runtime.esm.js?2b0e:4570
flushSchedulerQueue # vue.runtime.esm.js?2b0e:4326
eval # vue.runtime.esm.js?2b0e:1989
flushCallbacks # vue.runtime.esm.js?2b0e:1915
Promise.then (async)
timerFunc # vue.runtime.esm.js?2b0e:1942
nextTick # vue.runtime.esm.js?2b0e:1999
queueWatcher # vue.runtime.esm.js?2b0e:4418
update # vue.runtime.esm.js?2b0e:4560
notify # vue.runtime.esm.js?2b0e:730
reactiveSetter # vue.runtime.esm.js?2b0e:1055
eval # vue-router.esm.js?8c4f:2989
eval # vue-router.esm.js?8c4f:2988
updateRoute # vue-router.esm.js?8c4f:2409
eval # vue-router.esm.js?8c4f:2263
eval # vue-router.esm.js?8c4f:2397
step # vue-router.esm.js?8c4f:2001
step # vue-router.esm.js?8c4f:2008
runQueue # vue-router.esm.js?8c4f:2012
eval # vue-router.esm.js?8c4f:2392
step # vue-router.esm.js?8c4f:2001
eval # vue-router.esm.js?8c4f:2005
eval # vue-router.esm.js?8c4f:2379
eval # vue-router.esm.js?8c4f:2127
eval # vue-router.esm.js?8c4f:2203
Promise.then (async)
eval # vue-router.esm.js?8c4f:2150
eval # vue-router.esm.js?8c4f:2171
eval # vue-router.esm.js?8c4f:2171
flatMapComponents # vue-router.esm.js?8c4f:2170
eval # vue-router.esm.js?8c4f:2106
iterator # vue-router.esm.js?8c4f:2357
step # vue-router.esm.js?8c4f:2004
step # vue-router.esm.js?8c4f:2008
runQueue # vue-router.esm.js?8c4f:2012
confirmTransition # vue-router.esm.js?8c4f:2387
transitionTo # vue-router.esm.js?8c4f:2260
init # vue-router.esm.js?8c4f:2980
beforeCreate # vue-router.esm.js?8c4f:1298
invokeWithErrorHandling # vue.runtime.esm.js?2b0e:1863
callHook # vue.runtime.esm.js?2b0e:4235
Vue._init # vue.runtime.esm.js?2b0e:5018
Vue # vue.runtime.esm.js?2b0e:5099
eval # main.js?56d7:30
./src/main.js # app.js:1225
__webpack_require__ # app.js:854
fn # app.js:151
1 # app.js:1262
__webpack_require__ # app.js:854
checkDeferredModules # app.js:46
(anonymous) # app.js:994
(anonymous) # app.js:997
firebase/db.js;
import firebase from 'firebase';
import 'firebase/firestore';
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
//[removed for privacy]
};
// Initialize Firebase
export const db = firebase.initializeApp(firebaseConfig).firestore();
firebase.analytics();
I seem to have fixed it by changing my config file to:
import firebase from "firebase/app";
import "firebase/auth";
const firebaseConfig = {
//[hidden]
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
// Initialize Firebase Authentication and get a reference to the service
export const auth = firebase.auth();
Then in my App.vue component, I can:
import {auth} from './firebase/db';
And change firebase.auth() ... to just auth. ..., like this:
await auth.signInWithPopup(provider).then(() => {
auth.onAuthStateChanged((user) => {
However in my other components, I can retain the original import firebase from 'firebase'; and firebase.auth() ... and it works without errors. I don't know why this is. Does anyone know why?
Vanilla Vue CLI installation aside from a handful of pre-installed stuff via NPM.
I've read the online docs, I've read the forums but cannot get the Vue router to work.
I've tried a number of different ways of importing the vue router, but the official document has import VueRouter from 'vue-router' and Vue.use(VueRouter).
adding router object results in "Uncaught ReferenceError: router is not defined"
// main.js
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
//import axios from 'axios'
import { library } from '#fortawesome/fontawesome-svg-core'
import { faUserSecret } from '#fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'
Vue.config.productionTip = false
Vue.component('font-awesome-icon', FontAwesomeIcon)
library.add(faUserSecret)
Vue.use(VueRouter)
export default new VueRouter({
routes: [
{ path: '/', component: () => import('./views/Home.vue') },
// { path: '/login', component: Login },
// { path: '/about', component: About }
]
})
new Vue({
render: h => h(App),
}).$mount('#app')
// App.vue
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/groups">Events Near Me</router-link>
</div>
<img alt="Vue logo" src="./assets/logo.png">
</div>
</template>
<script>
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
</style>
Results in:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'resolve' of undefined"
found in
---> <RouterLink>
<App> at src/App.vue
<Root>
warn # vue.runtime.esm.js?2b0e:619
logError # vue.runtime.esm.js?2b0e:1884
globalHandleError # vue.runtime.esm.js?2b0e:1879
handleError # vue.runtime.esm.js?2b0e:1839
Vue._render # vue.runtime.esm.js?2b0e:3544
updateComponent # vue.runtime.esm.js?2b0e:4060
get # vue.runtime.esm.js?2b0e:4473
Watcher # vue.runtime.esm.js?2b0e:4462
mountComponent # vue.runtime.esm.js?2b0e:4067
Vue.$mount # vue.runtime.esm.js?2b0e:8409
init # vue.runtime.esm.js?2b0e:3118
createComponent # vue.runtime.esm.js?2b0e:5972
createElm # vue.runtime.esm.js?2b0e:5919
createChildren # vue.runtime.esm.js?2b0e:6047
createElm # vue.runtime.esm.js?2b0e:5948
createChildren # vue.runtime.esm.js?2b0e:6047
createElm # vue.runtime.esm.js?2b0e:5948
patch # vue.runtime.esm.js?2b0e:6471
Vue._update # vue.runtime.esm.js?2b0e:3939
updateComponent # vue.runtime.esm.js?2b0e:4060
get # vue.runtime.esm.js?2b0e:4473
Watcher # vue.runtime.esm.js?2b0e:4462
mountComponent # vue.runtime.esm.js?2b0e:4067
Vue.$mount # vue.runtime.esm.js?2b0e:8409
init # vue.runtime.esm.js?2b0e:3118
createComponent # vue.runtime.esm.js?2b0e:5972
createElm # vue.runtime.esm.js?2b0e:5919
patch # vue.runtime.esm.js?2b0e:6510
Vue._update # vue.runtime.esm.js?2b0e:3939
updateComponent # vue.runtime.esm.js?2b0e:4060
get # vue.runtime.esm.js?2b0e:4473
Watcher # vue.runtime.esm.js?2b0e:4462
mountComponent # vue.runtime.esm.js?2b0e:4067
Vue.$mount # vue.runtime.esm.js?2b0e:8409
(anonymous) # main.js?56d7:36
./src/main.js # app.js:2354
__webpack_require__ # app.js:767
fn # app.js:130
1 # app.js:2368
__webpack_require__ # app.js:767
(anonymous) # app.js:902
(anonymous) # app.js:905
Show 12 more frames
vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'resolve' of undefined
at Proxy.render (vue-router.esm.js?8c4f:1026)
at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3542)
at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4060)
at Watcher.get (vue.runtime.esm.js?2b0e:4473)
at new Watcher (vue.runtime.esm.js?2b0e:4462)
at mountComponent (vue.runtime.esm.js?2b0e:4067)
at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8409)
at init (vue.runtime.esm.js?2b0e:3118)
at createComponent (vue.runtime.esm.js?2b0e:5972)
at createElm (vue.runtime.esm.js?2b0e:5919)
logError # vue.runtime.esm.js?2b0e:1888
globalHandleError # vue.runtime.esm.js?2b0e:1879
handleError # vue.runtime.esm.js?2b0e:1839
Vue._render # vue.runtime.esm.js?2b0e:3544
updateComponent # vue.runtime.esm.js?2b0e:4060
get # vue.runtime.esm.js?2b0e:4473
Watcher # vue.runtime.esm.js?2b0e:4462
mountComponent # vue.runtime.esm.js?2b0e:4067
Vue.$mount # vue.runtime.esm.js?2b0e:8409
init # vue.runtime.esm.js?2b0e:3118
createComponent # vue.runtime.esm.js?2b0e:5972
createElm # vue.runtime.esm.js?2b0e:5919
createChildren # vue.runtime.esm.js?2b0e:6047
createElm # vue.runtime.esm.js?2b0e:5948
createChildren # vue.runtime.esm.js?2b0e:6047
createElm # vue.runtime.esm.js?2b0e:5948
patch # vue.runtime.esm.js?2b0e:6471
Vue._update # vue.runtime.esm.js?2b0e:3939
updateComponent # vue.runtime.esm.js?2b0e:4060
get # vue.runtime.esm.js?2b0e:4473
Watcher # vue.runtime.esm.js?2b0e:4462
mountComponent # vue.runtime.esm.js?2b0e:4067
Vue.$mount # vue.runtime.esm.js?2b0e:8409
init # vue.runtime.esm.js?2b0e:3118
createComponent # vue.runtime.esm.js?2b0e:5972
createElm # vue.runtime.esm.js?2b0e:5919
patch # vue.runtime.esm.js?2b0e:6510
Vue._update # vue.runtime.esm.js?2b0e:3939
updateComponent # vue.runtime.esm.js?2b0e:4060
get # vue.runtime.esm.js?2b0e:4473
Watcher # vue.runtime.esm.js?2b0e:4462
mountComponent # vue.runtime.esm.js?2b0e:4067
Vue.$mount # vue.runtime.esm.js?2b0e:8409
(anonymous) # main.js?56d7:36
./src/main.js # app.js:2354
__webpack_require__ # app.js:767
fn # app.js:130
1 # app.js:2368
__webpack_require__ # app.js:767
(anonymous) # app.js:902
(anonymous) # app.js:905
Show 11 more frames
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'resolve' of undefined"
found in
---> <RouterLink>
<App> at src/App.vue
<Root>
warn # vue.runtime.esm.js?2b0e:619
logError # vue.runtime.esm.js?2b0e:1884
globalHandleError # vue.runtime.esm.js?2b0e:1879
handleError # vue.runtime.esm.js?2b0e:1839
Vue._render # vue.runtime.esm.js?2b0e:3544
updateComponent # vue.runtime.esm.js?2b0e:4060
get # vue.runtime.esm.js?2b0e:4473
Watcher # vue.runtime.esm.js?2b0e:4462
mountComponent # vue.runtime.esm.js?2b0e:4067
Vue.$mount # vue.runtime.esm.js?2b0e:8409
init # vue.runtime.esm.js?2b0e:3118
createComponent # vue.runtime.esm.js?2b0e:5972
createElm # vue.runtime.esm.js?2b0e:5919
createChildren # vue.runtime.esm.js?2b0e:6047
createElm # vue.runtime.esm.js?2b0e:5948
createChildren # vue.runtime.esm.js?2b0e:6047
createElm # vue.runtime.esm.js?2b0e:5948
patch # vue.runtime.esm.js?2b0e:6471
Vue._update # vue.runtime.esm.js?2b0e:3939
updateComponent # vue.runtime.esm.js?2b0e:4060
get # vue.runtime.esm.js?2b0e:4473
Watcher # vue.runtime.esm.js?2b0e:4462
mountComponent # vue.runtime.esm.js?2b0e:4067
Vue.$mount # vue.runtime.esm.js?2b0e:8409
init # vue.runtime.esm.js?2b0e:3118
createComponent # vue.runtime.esm.js?2b0e:5972
createElm # vue.runtime.esm.js?2b0e:5919
patch # vue.runtime.esm.js?2b0e:6510
Vue._update # vue.runtime.esm.js?2b0e:3939
updateComponent # vue.runtime.esm.js?2b0e:4060
get # vue.runtime.esm.js?2b0e:4473
Watcher # vue.runtime.esm.js?2b0e:4462
mountComponent # vue.runtime.esm.js?2b0e:4067
Vue.$mount # vue.runtime.esm.js?2b0e:8409
(anonymous) # main.js?56d7:36
./src/main.js # app.js:2354
__webpack_require__ # app.js:767
fn # app.js:130
1 # app.js:2368
__webpack_require__ # app.js:767
(anonymous) # app.js:902
(anonymous) # app.js:905
Show 12 more frames
vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'resolve' of undefined
at Proxy.render (vue-router.esm.js?8c4f:1026)
at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3542)
at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4060)
at Watcher.get (vue.runtime.esm.js?2b0e:4473)
at new Watcher (vue.runtime.esm.js?2b0e:4462)
at mountComponent (vue.runtime.esm.js?2b0e:4067)
at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8409)
at init (vue.runtime.esm.js?2b0e:3118)
at createComponent (vue.runtime.esm.js?2b0e:5972)
at createElm (vue.runtime.esm.js?2b0e:5919)
logError # vue.runtime.esm.js?2b0e:1888
globalHandleError # vue.runtime.esm.js?2b0e:1879
handleError # vue.runtime.esm.js?2b0e:1839
Vue._render # vue.runtime.esm.js?2b0e:3544
updateComponent # vue.runtime.esm.js?2b0e:4060
get # vue.runtime.esm.js?2b0e:4473
Watcher # vue.runtime.esm.js?2b0e:4462
mountComponent # vue.runtime.esm.js?2b0e:4067
Vue.$mount # vue.runtime.esm.js?2b0e:8409
init # vue.runtime.esm.js?2b0e:3118
createComponent # vue.runtime.esm.js?2b0e:5972
createElm # vue.runtime.esm.js?2b0e:5919
createChildren # vue.runtime.esm.js?2b0e:6047
createElm # vue.runtime.esm.js?2b0e:5948
createChildren # vue.runtime.esm.js?2b0e:6047
createElm # vue.runtime.esm.js?2b0e:5948
patch # vue.runtime.esm.js?2b0e:6471
Vue._update # vue.runtime.esm.js?2b0e:3939
updateComponent # vue.runtime.esm.js?2b0e:4060
get # vue.runtime.esm.js?2b0e:4473
Watcher # vue.runtime.esm.js?2b0e:4462
mountComponent # vue.runtime.esm.js?2b0e:4067
Vue.$mount # vue.runtime.esm.js?2b0e:8409
init # vue.runtime.esm.js?2b0e:3118
createComponent # vue.runtime.esm.js?2b0e:5972
createElm # vue.runtime.esm.js?2b0e:5919
patch # vue.runtime.esm.js?2b0e:6510
Vue._update # vue.runtime.esm.js?2b0e:3939
updateComponent # vue.runtime.esm.js?2b0e:4060
get # vue.runtime.esm.js?2b0e:4473
Watcher # vue.runtime.esm.js?2b0e:4462
mountComponent # vue.runtime.esm.js?2b0e:4067
Vue.$mount # vue.runtime.esm.js?2b0e:8409
(anonymous) # main.js?56d7:36
./src/main.js # app.js:2354
__webpack_require__ # app.js:767
fn # app.js:130
1 # app.js:2368
__webpack_require__ # app.js:767
(anonymous) # app.js:902
(anonymous) # app.js:905
Show 11 more frames
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'resolve' of undefined"
found in
---> <RouterLink>
<App> at src/App.vue
<Root>
warn # vue.runtime.esm.js?2b0e:619
logError # vue.runtime.esm.js?2b0e:1884
globalHandleError # vue.runtime.esm.js?2b0e:1879
handleError # vue.runtime.esm.js?2b0e:1839
Vue._render # vue.runtime.esm.js?2b0e:3544
updateComponent # vue.runtime.esm.js?2b0e:4060
get # vue.runtime.esm.js?2b0e:4473
Watcher # vue.runtime.esm.js?2b0e:4462
mountComponent # vue.runtime.esm.js?2b0e:4067
Vue.$mount # vue.runtime.esm.js?2b0e:8409
init # vue.runtime.esm.js?2b0e:3118
createComponent # vue.runtime.esm.js?2b0e:5972
createElm # vue.runtime.esm.js?2b0e:5919
createChildren # vue.runtime.esm.js?2b0e:6047
createElm # vue.runtime.esm.js?2b0e:5948
createChildren # vue.runtime.esm.js?2b0e:6047
createElm # vue.runtime.esm.js?2b0e:5948
patch # vue.runtime.esm.js?2b0e:6471
Vue._update # vue.runtime.esm.js?2b0e:3939
updateComponent # vue.runtime.esm.js?2b0e:4060
get # vue.runtime.esm.js?2b0e:4473
Watcher # vue.runtime.esm.js?2b0e:4462
mountComponent # vue.runtime.esm.js?2b0e:4067
Vue.$mount # vue.runtime.esm.js?2b0e:8409
init # vue.runtime.esm.js?2b0e:3118
createComponent # vue.runtime.esm.js?2b0e:5972
createElm # vue.runtime.esm.js?2b0e:5919
patch # vue.runtime.esm.js?2b0e:6510
Vue._update # vue.runtime.esm.js?2b0e:3939
updateComponent # vue.runtime.esm.js?2b0e:4060
get # vue.runtime.esm.js?2b0e:4473
Watcher # vue.runtime.esm.js?2b0e:4462
mountComponent # vue.runtime.esm.js?2b0e:4067
Vue.$mount # vue.runtime.esm.js?2b0e:8409
(anonymous) # main.js?56d7:36
./src/main.js # app.js:2354
__webpack_require__ # app.js:767
fn # app.js:130
1 # app.js:2368
__webpack_require__ # app.js:767
(anonymous) # app.js:902
(anonymous) # app.js:905
Show 12 more frames
vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'resolve' of undefined
at Proxy.render (vue-router.esm.js?8c4f:1026)
at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3542)
at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4060)
at Watcher.get (vue.runtime.esm.js?2b0e:4473)
at new Watcher (vue.runtime.esm.js?2b0e:4462)
at mountComponent (vue.runtime.esm.js?2b0e:4067)
at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8409)
at init (vue.runtime.esm.js?2b0e:3118)
at createComponent (vue.runtime.esm.js?2b0e:5972)
at createElm (vue.runtime.esm.js?2b0e:5919)
Just provide router object to new Vue({}).
const router = new VueRouter({
routes: [
{ path: '/', component: () => import('./views/Home.vue') },
// { path: '/login', component: Login },
// { path: '/about', component: About }
]
})
new Vue({
router,
render: h => h(App),
}).$mount('#app')
I get an error saying Cannot read property 'split' of undefined when hovering the tooltip created out of NgbTooltip from #ng-bootstrap/ng-bootstrap. I see the placement value is received as 'undefined' on debugging and when I checked html, the code seems good and I am passing the value for [placement] attribute.
Error in the console:
EXCEPTION: Cannot read property 'split' of undefined
ErrorHandler.handleError # error_handler.js:54
next # application_ref.js:348
schedulerFn # async.js:93
SafeSubscriber.__tryOrUnsub # Subscriber.js:236
SafeSubscriber.next # Subscriber.js:185
Subscriber._next # Subscriber.js:125
Subscriber.next # Subscriber.js:89
Subject.next # Subject.js:55
EventEmitter.emit # async.js:79
NgZone.triggerError # ng_zone.js:333
onHandleError # ng_zone.js:294
ZoneDelegate.handleError # zone.js:338
Zone.runTask # zone.js:169
ZoneTask.invoke # zone.js:420
error_handler.js:59 ORIGINAL STACKTRACE:
ErrorHandler.handleError # error_handler.js:59
next # application_ref.js:348
schedulerFn # async.js:93
SafeSubscriber.__tryOrUnsub # Subscriber.js:236
SafeSubscriber.next # Subscriber.js:185
Subscriber._next # Subscriber.js:125
Subscriber.next # Subscriber.js:89
Subject.next # Subject.js:55
EventEmitter.emit # async.js:79
NgZone.triggerError # ng_zone.js:333
onHandleError # ng_zone.js:294
ZoneDelegate.handleError # zone.js:338
Zone.runTask # zone.js:169
ZoneTask.invoke # zone.js:420
error_handler.js:60 TypeError: Cannot read property 'split' of undefined
at Positioning.positionElements (positioning.js:83)
at positionElements (positioning.js:129)
at tooltip.js:47
at SafeSubscriber.schedulerFn [as _next] (async.js:105)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:236)
at SafeSubscriber.next (Subscriber.js:185)
at Subscriber._next (Subscriber.js:125)
at Subscriber.next (Subscriber.js:89)
at EventEmitter.Subject.next (Subject.js:55)
at EventEmitter.emit (async.js:79)
at ng_zone.js:244
at ZoneDelegate.invoke (zone.js:334)
at Zone.run (zone.js:126)
at NgZone.runOutsideAngular (ng_zone.js:164)
at NgZone.checkStable (ng_zone.js:244)
My HTML code:
<template #tipContent>{{licenorsTooltip}}</template>
<button type="button" class="licensor-btn" [placement]="bottom" [ngbTooltip]="tipContent" #t="ngbTooltip" triggers="manual"
(click)="toggleSelect()" on-mouseover='toolTipOver()' on-mouseleave="toolTipLeave()"> </button>
Please note the tooltip is working as expected and error is thrown only on the first instance of hovering. could someone say whats wrong with the code?
Why do I get record is not defined in the console? It also doesnt print any value
this.props.records.forEach(function(record){
numbers.push(
<tr key={record.id} >
<td>{record.title}</td>
</tr>)
})
Error in console
Uncaught ReferenceError: record is not definedReact.createClass.onChange # Inline JSX script:137React.createClass.changeHandler # Inline JSX script:82ReactClass.createClass._handleChange # react-with-addons.js:9067executeDispatch # react-with-addons.js:3307forEachEventDispatch # react-with-addons.js:3295executeDispatchesInOrder # react-with-addons.js:3316executeDispatchesAndRelease # react-with-addons.js:2689forEachAccumulated # react-with-addons.js:19368EventPluginHub.processEventQueue # react-with-addons.js:2896runEventQueueInBatch # react-with-addons.js:11161ReactEventEmitterMixin.handleTopLevel # react-with-addons.js:11187handleTopLevelImpl # react-with-addons.js:11273Mixin.perform # react-with-addons.js:18340ReactDefaultBatchingStrategy.batchedUpdates # react-with-addons.js:9613batchedUpdates # react-with-addons.js:16573ReactEventListener.dispatchEvent # react-with-addons.js:11367
Chances are your array contains some undefined values (e.g. [{id: 1}, undefined, {id: 2}]).
console.log(this.props.records);
// or set a debugger statement to inspect the state
Upon changing my application route via history.replace(PATH), I get this really cryptic error message. The stack shows the error originating in redux's applyMiddleware. I use thunk and redux-promise for middleware.
I've tried tracing the rendering path through each of my components, and my breakpoint never gets to the render method of the state I'm trying to load.
I've also tried updating my npm modules and rebuilding the project.
I'm using React 15.0.2.
ReactReconciler.js:54 Uncaught (in promise) TypeError: Cannot read
property 'getNativeNode' of null(…)getNativeNode #
ReactReconciler.js:54getNativeNode #
ReactCompositeComponent.js:303getNativeNode #
ReactReconciler.js:54updateChildren #
ReactChildReconciler.js:89_reconcilerUpdateChildren #
ReactMultiChild.js:178_updateChildren #
ReactMultiChild.js:271updateChildren #
ReactMultiChild.js:259_updateDOMChildren #
ReactDOMComponent.js:845updateComponent #
ReactDOMComponent.js:691receiveComponent #
ReactDOMComponent.js:647ReactDOMComponent_receiveComponent #
ReactPerf.js:66receiveComponent # ReactReconciler.js:103updateChildren
# ReactChildReconciler.js:85_reconcilerUpdateChildren #
ReactMultiChild.js:178_updateChildren #
ReactMultiChild.js:271updateChildren #
ReactMultiChild.js:259_updateDOMChildren #
ReactDOMComponent.js:845updateComponent #
ReactDOMComponent.js:691receiveComponent #
ReactDOMComponent.js:647ReactDOMComponent_receiveComponent #
ReactPerf.js:66receiveComponent #
ReactReconciler.js:103_updateRenderedComponent #
ReactCompositeComponent.js:661_performComponentUpdate #
ReactCompositeComponent.js:643updateComponent #
ReactCompositeComponent.js:572ReactCompositeComponent_updateComponent
# ReactPerf.js:66receiveComponent #
ReactCompositeComponent.js:495receiveComponent #
ReactReconciler.js:103_updateRenderedComponent #
ReactCompositeComponent.js:661_performComponentUpdate #
ReactCompositeComponent.js:643updateComponent #
ReactCompositeComponent.js:572ReactCompositeComponent_updateComponent
# ReactPerf.js:66receiveComponent #
ReactCompositeComponent.js:495receiveComponent #
ReactReconciler.js:103_updateRenderedComponent #
ReactCompositeComponent.js:661_performComponentUpdate #
ReactCompositeComponent.js:643updateComponent #
ReactCompositeComponent.js:572ReactCompositeComponent_updateComponent
# ReactPerf.js:66receiveComponent #
ReactCompositeComponent.js:495receiveComponent #
ReactReconciler.js:103_updateRenderedComponent #
ReactCompositeComponent.js:661_performComponentUpdate #
ReactCompositeComponent.js:643updateComponent #
ReactCompositeComponent.js:572ReactCompositeComponent_updateComponent
# ReactPerf.js:66performUpdateIfNecessary #
ReactCompositeComponent.js:511performUpdateIfNecessary #
ReactReconciler.js:122runBatchedUpdates # ReactUpdates.js:143perform #
Transaction.js:136perform # Transaction.js:136perform #
ReactUpdates.js:89flushBatchedUpdates #
ReactUpdates.js:165ReactUpdates_flushBatchedUpdates #
ReactPerf.js:66closeAll # Transaction.js:202perform #
Transaction.js:149batchedUpdates #
ReactDefaultBatchingStrategy.js:63enqueueUpdate #
ReactUpdates.js:194enqueueUpdate #
ReactUpdateQueue.js:22enqueueSetState #
ReactUpdateQueue.js:201ReactComponent.setState #
ReactComponent.js:67handleChange # connect.js:301dispatch #
createStore.js:186(anonymous function) # index.js:28(anonymous
function) # index.js:9dispatch # applyMiddleware.js:45
Solved the issue. Turns out it was caused by attempting to map over an array to generate child components in the render method of the component navigated to. I wish the error message were a bit more descriptive.
Also encountered this error. Just like ThinkingInBits, I was mapping over an array creating components. I made a change to the mapping function, leaving one of the variables undefined. This is the error that I kept getting and once I fixed the undefined variable issue, it disappeared. It is quite nasty in the way it is masking the actual problem.