I'm upgrading the package okta/okta-vue from version 1.3.0 to 3.1.0.
It also included installation of okta-auth-js package since version 2.0.0 of okta/okta-vue.
I followed the migration info according to the changelog and the migration guide:
https://github.com/okta/okta-vue/blob/okta-vue-3.2.0/CHANGELOG.md
https://github.com/okta/okta-vue/blob/okta-vue-3.2.0/MIGRATING.md
After following the guides, I recieve errors that seem to repeat themselves in the console such as:
[Vue warn]: Error in beforeCreate hook: "TypeError: Cannot read properties of undefined (reading '_router')"
TypeError: Cannot read properties of undefined (reading '_router')
TypeError: guard is not a function
[vue-router] uncaught error during route navigation:
The 3 first errors repeat themselves several times.
I tried looking on other topics and saw some answers speaking about "this" which might cause the problem, but it doesn't seem to be the issue in my case.
Following is the routes.js code:
import DashboardLayout from 'src/components/Dashboard/Layout/DashboardLayout.vue'
import Overview from 'src/components/Dashboard/Views/Dashboard/Overview.vue'
// import Auth from '#okta/okta-vue'
import { LoginCallback } from '#okta/okta-vue'
import {
routes_App1,
routes_App3,
routes_App4,
...,
routes_App99
} from './routesDefinition'
// Dashboard Pages
const UserProfile = () => import ('src/components/Dashboard/Views/Pages/UserProfile.vue')
const routes = [
{
path: '/implicit/callback',
name: 'Okta Callback',
component: LoginCallback
// component: Auth.handleCallback()
}, {
path: '/',
component: DashboardLayout,
redirect: '/overview',
meta: {
requiresAuth: true
},
children: [
{
base: '/',
path: 'overview',
name: 'Overview',
component: Overview
},
{
path: 'userprofile',
name: 'User Profile',
component: UserProfile
},
routes_App1,
routes_App3,
routes_App4,
...,
routes_App99
]
}, {
path: '*',
component: DashboardLayout,
redirect: '/overview',
meta: {
requiresAuth: true
}
},
]
export default routes
If for any reason it matters, my company's app is written with Vue 2 in the fronted and PHP - Laravel in the backend.
The app worked completely fine before upgrading the package.
Here are some of the related packages versions I'm using (after the upgrade):
vue#2.7.10, vue-router#3.6.4, #okta/okta-auth-js#4.9.2, #okta/okta-vue#3.1.0, webpack#5.74.0
If there's any other important files I need to attach as code please let me know and I'll add them.
Please help me if anyone knows what might be the solution for those errors.
Edit: I upgraded to Webpack 5.74 recently and it didn't change anything.
Thanks in advance, Gady.
Related
I am trying to figure out how to open a Vuetify dialog using the Vue router.
The vue-router is a new experience for me so still learning it. But Ive been working on this all day and have not come anywhere close to solving the issue.
Issue: I need to update the v-model to true to open the dialog when a router link is clicked
I have tried using meta tags and the beforerouterupdate() method to try and update the v-model but that has not worked.
This is my current route file
const routes = [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/backup',
name: 'backup',
component: BackupDialog,
children: [
{
path: '/backup/:options',
name: 'optionsModal',
component: DbBackupOptions,
meta: {
showModal: true
}
},
]
},
]
I am not sure I have the right configuration at this point. I also tried using dynamic routing but I could not figure that out either.
Is there some one that can give me some insight on how to resolve this issue or pointers in the right direction ?
I have figured out the issue mostly to the help of a video I found on Youtube.
Vue Router Based Modal
I wanted to create a custom plugin for a local databaase in Nuxt.js, after I was done with the code I registered it in nuxt.config.js and it didn't work. So I've tried the example code on docs to see what I was doing wrong, and the thing is, example code didn't work too. Here is how I registered it:
plugins/hello.js
export default ({ app }, inject) => {
inject("hello", msg => console.log(`Hello ${msg}!`));
};
nuxt.config.js
module.exports = {
ssr: false,
target: "static",
head: {
title: "project-title",
meta: [{ charset: "utf-8" }],
},
loading: false,
plugins: [{ ssr: true, src: "#/plugins/icons.js" }, "#/plugins/hello.js"],
modules: ["#nuxtjs/axios", "#nuxtjs/auth-next"],
}
Whenever I try to use this.$hello("something"), Nuxt returns this.$hello is not a function
Hmm, got it. After deleting and reinstalling node_modules it's resolved, then I tried changing the name of the plugin file, after then build failed from ./node_modules/#nuxt/webpack/node_modules/babel-loader/lib/index.js. After reinstalling packages again (deleted .nuxt, node_modules and lock file) issue is resolved.
This is similar to a lot of questions asked re: setting up Vue Router with an Express server using the connect-history-api-fallback middleware as directed in the Vue Router docs, but I’m still running into two issues:
When I refresh any page, I am redirected to my Home route (e.g. http://localhost:8080/451)
When I enter a direct link in the address bar (e.g. http://localhost:8080/451/alerts), I am also redirected to my Home route
I am not receiving a “Cannot GET /” error, so I am pretty confident that connect-history-api-fallback is implemented correctly.
For context, this is what my router looks like:
const router = new VueRouter({
base: __dirname,
mode: 'history',
routes: [
{
component: Home,
name: 'home',
path: '/:siteId',
},
{
component: SuperAdmin,
name: 'super-admin',
path: '/:siteId/super-admin',
},
{
component: Alerts,
name: 'alerts',
path: '/:siteId/alerts',
},
{
component: LPRAdmin,
name: 'lpr-admin',
path: '/:siteId/lpr-admin',
},
{
component: ControlCenterAdmin,
name: 'control-center-admin',
path: '/:siteId/control-center-admin',
},
],
});
And this is my configuration in the server:
const staticFileMiddleware = express.static('build/public');
app.use(staticFileMiddleware);
app.use(history({
verbose: true,
}));
app.use(staticFileMiddleware);
Has anyone dealt with and solved this or a similar issue? Thanks in advance!
For anyone who comes across this in the future, we were able to solve it! Somewhat embarrassingly, we forgot we were rerouting users to the home page after authentication every time the app mounted. We removed
this.$router.push(`/${siteId}`);
from our App.js and the issues are resolved!
I'm using Vue Material, and their md-tabs component to manage the application tabs (Home, Profile ...).
I'd like to create a /404 page, which obviously cannot be a tab :)
To do so I simply add a /404 entry to the router:
const routes = [
{ path: '/home', name: 'Home', component: Home },
{ path: '/profile', name: 'Profile', component: Profile },
{ path: '/404', name: '404', component: NotFound },
{ path: '*', redirect: '/404' },
];
It works, but on the /404 page I get the error:
Uncaught TypeError: Cannot read property 'parentNode' of null
at eval (webpack-internal:///./node_modules/vue-material/dist/vue-material.js:14093)
The error disappears whan adding an md-tab for the /404, which is not a solution XD
<md-tabs md-sync-route class="md-primary">
<md-tab id="tab-home" md-label="Home" to="/home"></md-tab>
<md-tab id="tab-profile" md-label="Profile" to="/profile"></md-tab>
<md-tab id="tab-404" md-label="404" to="/404"></md-tab>
</md-tabs>
Is there a way to fix this?
Thank you !
This should fix your issue:
<md-tabs router-link>
<md-tab md-label="Foo" to="/foo">foo</md-tab>
<md-tab md-label="Bar" to="/bar">bar</md-tab>
</md-tabs>
I'm using the latest vue-cli, and everything works in development.
After I build it the first page of the app is not rendering properly, the rest of the pages are working fine.
Here is how it looks on dev:
and this is how it looks on prod:
Using dev tools I see the elements are not rendered properly, so I can still see the actual component (like <aq-filters>) instead of just a div:
As I mentioned, it only happens for this one page, the rest works fine.
There is no error during the build, or in the console.
Here is some of the code that might be relevant:
import { createNamespacedHelpers } from "vuex";
import DomainModal from "./AddDomainModal";
import {
PageHeader,
AqFilters,
AqEmptyPage,
AqAsync,
AqAccordionList,
AqAccordionItem,
AqGrid,
AqSelectionActions,
TenantStatusCell
} from "comp";
const { mapGetters, mapActions } = createNamespacedHelpers("domains");
...
components: {
DomainModal,
PageHeader,
AqFilters,
AqEmptyPage,
AqAsync,
AqAccordionList,
AqAccordionItem,
AqGrid,
AqSelectionActions
}
Any idea what's going on here?
UPDATE
I found a solution but I don't know why it works.
In my router.js file I used dynamic imports to create chunks, except for the first page (domains) that I imported statically:
{
path: "/domains",
name: "domains",
component: DomainsPage,
meta: { requiresAuth: true }
},
Once I changed it to dynamic import it solves the problem:
{
path: "/domains",
name: "domains",
component: () =>
import("#/views/domains/DomainsPage" /* webpackChunkName: "DomainsPage" */),
meta: { requiresAuth: true }
},
Can anyone explain it?