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.
Related
I struggle to add a plugin in Nuxt.js. I have been looking to the doc and all kind of similar problems, but I got the same error: simpleParallax is not defined.
I tried different approach on all files
nuxt.config.js:
plugins: [
{src: '~/plugins/simple-parallax.js', mode:'client', ssr: false}
],
plugins/simple-parallax.js:
import Vue from 'vue';
import simpleParallax from 'simple-parallax-js';
Vue.use(new simpleParallax);
index.vue:
Export default {
plugins: ['#/plugins/simple-parallax.js'],
mounted() {
var image = document.getElementsByClassName('hero');
new simpleParallax(image, {
scale: 1.8
});
}
}
Error message:
ReferenceError: simpleParallax is not defined.
The best solution I found out so far is to register simpleParallax on the Vue prototype like so in a plugin nuxt file with the name simple-parallax.client.js:
import Vue from 'vue';
import simpleParallax from 'simple-parallax-js';
Vue.prototype.$simpleParallax = simpleParallax;
Also my nuxt.config.js file if anyone would like to verify that as well:
plugins: [
{src: '~/plugins/simple-parallax.client.js', mode: 'client', ssr: false}
],
I then have access to the plugin before instantiation in my case in the mounted life cycle of the primary or root component to grab the desired HTML elements and instantiate their individual parallax with the newly added global method this.$simpleParallax
For example I can then intiate a certain HTML element to have its parallax like so:
const someHTMLElement = document.querySelectorAll('.my-html-element');
const options = {...} // your desired parallax options
new this.$simpleParallax(someHTMLElement, options);
Actually you don't need to use plugin here.
Just import simpleParallax from 'simple-parallax-js' in your component and init it with your image in mounted hook.
index.vue:
import simpleParallax from 'simple-parallax-js'
export default {
...
mounted() {
// make sure this runs on client-side only
if (process.client) {
var image = document.getElementsByClassName('thumbnail')
new simpleParallax(image)
}
},
...
}
And don't forget to remove previously created plugin, it's redundant here.
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 :)
I'm working on a vuejs project and we're trying to use external vue cli applications as libraries. In these libraries we want to be able to export a router config, which lazy loads the components within one of these modules. However when we compile this using the vue-cli-service into a library and it's got lazy chunk assets we cannot resolve them with webpack.
I have a feeling its something to do with the public path, or some simple configuration but i'm just stuck and banging my head against a wall at this stage with it.
https://github.com/EvanBurbidge/mono-repo-tester
Here's a simple overview of what we're doing
App1 -> main app, installs App2, imports { router } from 'app2'
App2 -> library, compiles to common js lib exports router config
The console output from app1
The router configuration from app2
The router importing app2 from app1
/* config.module.rule('js') */
{
test: /\.jsx?$/,
exclude: [
function () { /* omitted long function */ }
],
use: [
/* config.module.rule('js').use('cache-loader') */
{
loader: 'cache-loader',
options: {
cacheDirectory: '/Users/evan/test/node_modules/.cache/babel-loader',
cacheIdentifier: '39e7e586'
}
},
/* config.module.rule('js').use('babel-loader') */
{
loader: 'babel-loader'
}
]
},
I think I know what the problem is.
It appears that you're suffering from the fact that the default config of webpack bundled with VueJS does not support what you are trying to accomplish. In fact, it may very well be that Webpack does not support what you are trying to accomplish #2471 #6818 #7843.
When you compile app2 into UMD and try to use it within app1 by importing the UMD, the dynamic imports of app2 are not being resolved and are thus not copied over to the publicPath of app1. Since it is a dynamic import, compilation succeeds to the point where you can deploy the app. When you try to load the app however, it starts complaining that chunks are missing.
Here's one way to solve this problem:
app2/package.json
{
"name": "app2",
...
"main": "src/router.js"
}
app2/src/router.js
const Hey = () => import(/*webpackChunkName: 'app2.Hello.vue' */ './components/HelloWorld.vue')
export default [
{
path: '/app2',
component: Hey,
name: 'app2.hey'
}
]
app1/router.js
import app2Router from 'app2'
import Home from './views/Home.vue'
export default new Router([
mode: 'history',
...
routes: [
{
path: '/',
name: 'home',
component: Home
},
...app2Router
]
])
By marking the main or module of app2/package.json as router.js instead of the the UMD bundle, you are forcing app1 to build the whole dependency graph and include any dynamic import that is detected. This in turn causes the dependencies to be copied over properly.
You could also achieve the exact same results by using
import app2Router from 'app2/src/router'
Supposedly, this issue is now fixed in Webpack 5 https://github.com/webpack/webpack/issues/11127
I used vue create to create a new view project with Babel, TypeScript, Router and Unit Testing. I then installed axios using npm.
Having done no other changes, I served the application by navigating to the src directory and running vue serve.
The resulting boilerplate application fails to load with the following error:
[Vue warn]: Unknown custom element: - did you register
the component correctly? For recursive components, make sure to
provide the "name" option.
found in
---> at App.vue
My own research shows that this error usually happens when you fail to call Vue.Use(). However, my router.ts file does so:
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
Vue.use(Router);
export default new Router({ routes: [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
}, ], });
Does anyone know what is wrong here? Given I haven't changed anything, could it be a config issue?
I got it!
The issue was that I was running the server the wrong way. I was using:
vue serve src/App.vue
when I should have used:
npm run serve
After that change, it started to work.
You don't need to navigate to the src folder, just navigate to the root directory of your application, then run npm run serve.
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?