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?
Related
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.
The following is my problem.
I packaged my project through vite in library mode. The error occurs whenever my library includes any third party UI library (e.g vue-loading-overlay). But other libraries like moment.js will have no problem.
This is my vite.config.js, Is there any problem with my configuration?
import { defineConfig } from "vite";
import vue from "#vitejs/plugin-vue";
export default defineConfig({
plugins: [vue()],
build: {
lib: {
entry: resolve(__dirname, "src/lib.ts"),
name: "my-ui-lib",
fileName: "my-ui-lib",
},
rollupOptions: {
external: ["vue"],
output: [
{
format: "es",
exports: "named",
globals: { vue: "vue" },
},
],
},
},
});
Finally I resolved my problem, Adding the following in vite.config.js. It works for me.
build: {
/** If you set esmExternals to true, this plugins assumes that
all external dependencies are ES modules */
commonjsOptions: {
esmExternals: true
},
}
Original Answer
"Chart.js V3 is treeshakable so you need to import and register everything or if you want everything you need to import the chart from the auto import like so:
change
import Chart from 'chart.js'
to ->
import Chart from 'chart.js/auto';
For more information about the different ways of importing and using chart.js you can read the integration page in the docs.
Since you are upgrading from Chart.js V2 you might also want to read the migration guide since there are some major breaking changes between V2 and V3"
/* Adding the following in vite.config.js. Just copy and paste all these code. It works for me. */
import { defineConfig } from "vite";
import react from "#vitejs/plugin-react";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
commonjsOptions: {
esmExternals: true,
},
});
react-pdf v6 has a pretty clever solution for this, look at their entry files. I think the point is to link to the correct file, somehow there's no need to "actually" import the worker (it doesn't run on main thread anyway I guess? New to worker and pdfjs).
import * as pdfjs from 'pdfjs-dist/build/pdf';
pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.js', import.meta.url);
import.meta availability.
Refer to vuejs 3 documentation to import vue.
My VueJS application is using a router and has a LoadingPage.vue component which is being used in the router as follows:
{
path: "/loading",
name: "loading",
component: () =>
import(
/* webpackChunkName: "loading" */
/* webpackPrefetch: false */
/* webpackMode: "lazy" */
"../views/LoadingPage.vue"
),
}
Upon visiting the /loading route, the component is being shown successfuly. However, I'm not seeing a separate chunk when I inspect the files request by the browser.
Here's a screenshot of the .js files that are being loaded:
I expected a loading.[hash].js file there, but it's missing.
What could be causing this problem? I'm using vue 2.6.14 and vue-router 3.5.1
I also haven't touched the vue.config.js file, it looks like this:
module.exports = {
configureWebpack: {
devtool: "source-map",
},
devServer: {
host: "localhost",
},
};
I encountered the same problem as well. I solved it but deleting extra import statement at the top of the file. Try to make sure you are not importing the same component twice.
My route : Route in index.js
Import statement in index.js: Import statement in index.js
Once i deleted all the duplicate component (Account etc) and run build, a separate chunk created : Admin chunk
Hope it can solve your problem as well.
I had to manually upgrade from 3.2 to 4.2 and because I am developing a Angular library, I could not use the schematics to perform the update.
I have got it working on the development build. We are developing a feature library that targets the checkout (Payment Page and Order Confirmation Page) and it works fine.
With the production build (ng build --configuration production), the payment page works fine, but the Order Confirmation page is not working. it complains that orderCore feature is not configured properly.
Note: we are being redirected from an external site, back to the order confirmation page (after authorization). When the page loads, it shows the following error in the log and show a broken my account page.
core.js:6498 ERROR Error: Feature orderCore is not configured properly
at FacadeFactoryService.getResolver (spartacus-core.js:24825)
at FacadeFactoryService.create (spartacus-core.js:24867)
at facadeFactory (spartacus-core.js:24898)
at orderReturnRequestFacadeFactory (spartacus-order-root.js:13)
at Object.factory (spartacus-order-root.js:37)
at R3Injector.hydrate (core.js:11457)
at R3Injector.get (core.js:11276)
at NgModuleRef$1.get (core.js:25352)
at Object.get (core.js:25066)
at lookupTokenUsingModuleInjector (core.js:3354)
Anyone has an idea if we are missing some configuration in the feature modules?
import { NgModule } from '#angular/core';
import { checkoutTranslationChunksConfig, checkoutTranslations } from '#spartacus/checkout/assets';
import { CHECKOUT_FEATURE, CheckoutRootModule } from '#spartacus/checkout/root';
import { CmsConfig, I18nConfig, provideConfig } from '#spartacus/core';
#NgModule({
declarations: [],
imports: [
CheckoutRootModule,
],
providers: [provideConfig({
featureModules: {
[CHECKOUT_FEATURE]: {
module: () =>
import('#spartacus/checkout').then((m) => m.CheckoutModule),
}
},
} as CmsConfig),
provideConfig({
i18n: {
resources: checkoutTranslations,
chunks: checkoutTranslationChunksConfig,
},
} as I18nConfig)
]
})
export class CheckoutFeatureModule {
}
My colleague has provided a proposal:
If you want to use Spartacus Order library, you need to create "order-feature.module.ts" for it. And by default core is bundled together with components. So, in your configuration, you need have this set: "[ORDER_CORE_FEATURE]: ORDER_FEATURE". So, the config is something like this:
const config: CmsConfig = {
featureModules: {
[ORDER_FEATURE]: {
cmsComponents: [
....
],
},
// by default core is bundled together with components
[ORDER_CORE_FEATURE]: ORDER_FEATURE,
},
};
When trying to lazy load components in my routes.js file, my CSS is not compiled.
When using an import statement at the top of the file, everything works as expected. There are no console errors or compile errors. I'm using Vue.js, Vue-Router, Laravel, and Laravel-Mix (all latest versions)
//Working (CSS is present)
import Home from '../../components/admin/Home';
//Not Working (No CSS is present)
function loadView(view) {
return () => import(/* webpackChunkName: "view-[request]" */ `../../components/admin/${view}.vue`)
}
//How I'm initializing the component
let routes = [
{
path: '/',
name: 'home',
component: loadView('Home'),
meta: {
requiresAuth: true
}
}]
//Laravel Mix Config
const mix = require('laravel-mix');
const webpack = require('webpack');
mix.js('resources/js/apps/registration/app.js', 'public/js/apps/registration/app.js')
.js('resources/js/apps/admin/app.js', 'public/js/apps/admin/app.js')
.js('resources/js/material-dashboard.js', 'public/js/material-dashboard.js')
.js('resources/js/material-dashboard-extras.js', 'public/js/material-dashboard-extras.js')
.sass('resources/sass/app.scss', 'public/css');
mix.webpackConfig({
plugins: [
/**
* Bug with moment.js library causing ./locale not to be found
* https://github.com/moment/moment/issues/2979
* Created an empty module running npm install --save empty-module and then doing the below
*/
new webpack.ContextReplacementPlugin(/\.\/locale$/, 'empty-module', false, /js$/),
/**
* Global objects are not getting recognized via require
* Set them up here
* global_name: path or module
*/
new webpack.ProvidePlugin({
/**
* There was an error with Popper not being defined due to Popper being included in Bootstrap
* https://github.com/FezVrasta/bootstrap-material-design/issues/1296
*/
'Popper': 'popper.js/dist/umd/popper'
})
]
});
Attached are screenshots of what I mean by CSS not being applied
How page looks with import
How page looks when trying to lazy load components in routes.js
You are not supposed to import the webpack chunk name, instead just reference the approriate path to the component like so:
//Not Working (No CSS is present)
function loadView(view) {
return () => import( `../../components/admin/${view}.vue`)
}
NB: not tested, hope it helps :)