Cannot resolve RouterLink tag

Cannot resolve RouterLink tag - javascript

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')

Related

React Admin Tutorial by Marmelab not working

I am trying to follow this React-Admin tutorial by marmelab.com : https://marmelab.com/react-admin/Tutorial.html
After the following setup:
> npm create-react-app test-admin
> cd test-admin/
> npm install react-admin ra-data-json-server prop-types
> npm start
I tried running the following code as mentioned in the tutorial:
// in src/App.js
import * as React from "react";
import { Admin } from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';
const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');
const App = () => <Admin dataProvider={dataProvider} />;
export default App;
This gives me no output and a list of errors as follows:
react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
printWarning # react-dom.development.js:86
error # react-dom.development.js:60
render # react-dom.development.js:29404
./src/index.js # index.js:5
options.factory # react refresh:6
__webpack_require__ # bootstrap:24
(anonymous) # startup:7
(anonymous) # startup:7
react.development.js:1476 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
at resolveDispatcher (react.development.js:1476:1)
at useContext (react.development.js:1484:1)
at CoreAdminContext (CoreAdminContext.js:12:1)
at renderWithHooks (react-dom.development.js:16141:1)
at mountIndeterminateComponent (react-dom.development.js:20838:1)
at beginWork (react-dom.development.js:22342:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4157:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4206:1)
at invokeGuardedCallback (react-dom.development.js:4270:1)
at beginWork$1 (react-dom.development.js:27243:1)
resolveDispatcher # react.development.js:1476
useContext # react.development.js:1484
CoreAdminContext # CoreAdminContext.js:12
renderWithHooks # react-dom.development.js:16141
mountIndeterminateComponent # react-dom.development.js:20838
beginWork # react-dom.development.js:22342
callCallback # react-dom.development.js:4157
invokeGuardedCallbackDev # react-dom.development.js:4206
invokeGuardedCallback # react-dom.development.js:4270
beginWork$1 # react-dom.development.js:27243
performUnitOfWork # react-dom.development.js:26392
workLoopSync # react-dom.development.js:26303
renderRootSync # react-dom.development.js:26271
performSyncWorkOnRoot # react-dom.development.js:25924
flushSyncCallbacks # react-dom.development.js:11982
flushSync # react-dom.development.js:26040
legacyCreateRootFromDOMContainer # react-dom.development.js:29309
legacyRenderSubtreeIntoContainer # react-dom.development.js:29335
render # react-dom.development.js:29419
./src/index.js # index.js:5
options.factory # react refresh:6
__webpack_require__ # bootstrap:24
(anonymous) # startup:7
(anonymous) # startup:7
react-dom.development.js:18525 The above error occurred in the <CoreAdminContext> component:
at CoreAdminContext (http://localhost:3000/static/js/bundle.js:92536:28)
at AdminContext
at Admin (http://localhost:3000/static/js/bundle.js:102485:25)
at App
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError # react-dom.development.js:18525
update.callback # react-dom.development.js:18558
callCallback # react-dom.development.js:13092
commitUpdateQueue # react-dom.development.js:13113
commitLayoutEffectOnFiber # react-dom.development.js:23204
commitLayoutMountEffects_complete # react-dom.development.js:24461
commitLayoutEffects_begin # react-dom.development.js:24447
commitLayoutEffects # react-dom.development.js:24385
commitRootImpl # react-dom.development.js:26651
commitRoot # react-dom.development.js:26517
performSyncWorkOnRoot # react-dom.development.js:25956
flushSyncCallbacks # react-dom.development.js:11982
flushSync # react-dom.development.js:26040
legacyCreateRootFromDOMContainer # react-dom.development.js:29309
legacyRenderSubtreeIntoContainer # react-dom.development.js:29335
render # react-dom.development.js:29419
./src/index.js # index.js:5
options.factory # react refresh:6
__webpack_require__ # bootstrap:24
(anonymous) # startup:7
(anonymous) # startup:7
react.development.js:1476 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
at resolveDispatcher (react.development.js:1476:1)
at useContext (react.development.js:1484:1)
at CoreAdminContext (CoreAdminContext.js:12:1)
at renderWithHooks (react-dom.development.js:16141:1)
at mountIndeterminateComponent (react-dom.development.js:20838:1)
at beginWork (react-dom.development.js:22342:1)
at beginWork$1 (react-dom.development.js:27219:1)
at performUnitOfWork (react-dom.development.js:26392:1)
at workLoopSync (react-dom.development.js:26303:1)
at renderRootSync (react-dom.development.js:26271:1)
resolveDispatcher # react.development.js:1476
useContext # react.development.js:1484
CoreAdminContext # CoreAdminContext.js:12
renderWithHooks # react-dom.development.js:16141
mountIndeterminateComponent # react-dom.development.js:20838
beginWork # react-dom.development.js:22342
beginWork$1 # react-dom.development.js:27219
performUnitOfWork # react-dom.development.js:26392
workLoopSync # react-dom.development.js:26303
renderRootSync # react-dom.development.js:26271
performSyncWorkOnRoot # react-dom.development.js:25924
flushSyncCallbacks # react-dom.development.js:11982
flushSync # react-dom.development.js:26040
legacyCreateRootFromDOMContainer # react-dom.development.js:29309
legacyRenderSubtreeIntoContainer # react-dom.development.js:29335
render # react-dom.development.js:29419
./src/index.js # index.js:5
options.factory # react refresh:6
__webpack_require__ # bootstrap:24
(anonymous) # startup:7
(anonymous) # startup:7
I am sure I am following the tutorial correctly.
Does this have anything to do with conflicting versions?
How do I fix this issue and continue with the tutorial?
My React version:
$ npm view react version
18.0.0

React 18 no longer supports ReactDOM.render, as they have replaced it with createRoot.
You can learn more about it here: React v18.0
You can continue with the tutorial by just downgrading to React 17:
npm install --save react#17.0.2 react-dom#17.0.2

You must change index.js file.
import ReactDom from 'react-dom/client'
const root = ReactDOM.creatorRoot(document.getElementById('root'));
root.render(<App/>);

Removing firestore from Vue project but retaining firebase auth

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?

Vue component's props turns into undefined

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

Cannot read property 'split' of undefined on NgbTooltip - #ng-bootstrap/ng-bootstrap

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 gulp-uglify breaks backendless?

I actually have no idea, which part of code should i show you.
I have a webApp (reactJs, flux, react-router, nodejs+express server);
It works fine, right untill i uglify main.js file.
Here the "search" through backendless database (http://backendless.com/documentation/data/js/data_search_and_query.htm)
var dataQuery = {
condition: conditions,
options: {
pageSize: 18,
relationsDepth: 1
}
}
If I don't use gulp uglify in my Build, it works fine.
If I do use uglify, I'm getting this error:
GET https://api.backendless.com/v1/data/t?pageSize=18&relationsDepth=1 404 (Not Found)
Why does it happen?
full version:
GET https://api.backendless.com/v1/data/t?pageSize=18&relationsDepth=1 404 (Not Found)
e._ajax_for_browser.o # main.js:15
e._ajax_for_browser.a.ignoreCache # main.js:15
e._ajax_for_browser # main.js:15
C.find # main.js:15
r # main.js:15
(anonymous function) # main.js:15
r.$Dispatcher_invokeCallback # main.js:1
r.dispatch # main.js:1
a.handleViewAction # main.js:15
o.search # main.js:12
r.createClass._getInitItems # main.js:13
r.createClass._getAllEstateItems # main.js:13
l.addons.update.$merge.searchByParams # main.js:15
r.createClass.componentDidMount # main.js:13
o.notifyAll # main.js:3
m.close # main.js:9
a.closeAll # main.js:12
a.perform # main.js:12
h # main.js:9
a.perform # main.js:12
d.batchedUpdates # main.js:8
o # main.js:11
$._renderNewRootComponent # main.js:9
r.measure.i # main.js:9
$.render # main.js:9
r.measure.i # main.js:9
(anonymous function) # main.js:15
u.createClass.statics.run.L # main.js:2
(anonymous function) # main.js:2
(anonymous function) # main.js:2
(anonymous function) # main.js:2
r.to # main.js:2
(anonymous function) # main.js:2
r.from # main.js:2
u.createClass.statics.dispatch # main.js:2
u.createClass.statics.refresh # main.js:2
u.createClass.statics.run # main.js:2
r # main.js:3
250.../jsLibs/1. backendless.min # main.js:15
a # main.js:1
e # main.js:1
(anonymous function) # main.js:1
UPD#1
Gulpfile.js:
var gulp = require('gulp');
var browserify = require('gulp-browserify');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var uglifycss = require('gulp-uglifycss');
gulp.task('browserify', function() {
gulp.src('src/js/main.js')
.pipe(browserify({transform: 'reactify'}))
.pipe(concat('main.js'))
.pipe(gulp.dest('dist/js'));
});
gulp.task('uglifyjs', function() {
gulp.src('dist/js/main.js')
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
});
gulp.task('copy', function() {
gulp.src('src/index.html')
.pipe(gulp.dest('dist'));
gulp.src('src/assets/**/*.*')
.pipe(gulp.dest('dist/assets'));
});
gulp.task('default',['browserify', 'copy']);
gulp.task('watch', function() {
gulp.watch('src/**/*.*', ['default']);
});
gulp.task('js', function () {
gulp.src('src/jsLibs/*.js')
.pipe(concat('scripts.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
})
gulp.task('css', function () {
gulp.src('src/css/*.css')
.pipe(concat('styles.css'))
.pipe(uglifycss())
.pipe(gulp.dest('dist/css'))
})

As it was answered on our support forum:
Our JS SDK forms the url from the name of your constructor-function,
thus if you rename it - the request will query another table, and for
now there is no way to change this logic from your code.
So you're looking in the right direction: the most suitable solution
in this case will be to exclude these constructor-functions names from
uglify's obfuscation list.
Regards,
Mark

Can you give me please code from .js file where from you make query to find data object. I think you do searching in another class.

GET https://api.backendless.com/v1/data/t?pageSize=18&relationsDepth=1 404 (Not Found)
This request goes to table named t. I'm pretty sure your table name is not t.

Develop Reference

JavaScript is the programming language of the Web.

Cannot resolve RouterLink tag - javascript

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')

Related

React Admin Tutorial by Marmelab not working

Removing firestore from Vue project but retaining firebase auth

Vue component's props turns into undefined

Cannot read property 'split' of undefined on NgbTooltip - #ng-bootstrap/ng-bootstrap

Why gulp-uglify breaks backendless?

Categories

Resources