Vue-router cannot lazy load child component

Question

I'm using vue-router inside my project, which is working with a library that is, unfortunately, not in active development anymore. I needed to add a few things there, so I downloaded the source, edited it myself and then built it into my project's "externals" folder.

Now, until the project was not using front-end router everything worked fine, but lately, I implemented the vue-router with lazy-loading components and things got a bit trickier.

Library I was talking about is saved inside @/externals/date-picker. Inside my lazy-loaded component I import it using es6 imports:

import DatePicker from '@/externals/date-picker';

Which triggers an error inside vue-router:

Failed to resolve async component default: TypeError: Cannot set property 'vue-date-picker' of undefined

I have no idea what's going on, but it seems like it cannot add the date-picker to module.exports.

I'm pretty sure there has to be the way to load external files even though they're lazy loaded. So, my question is, how can I add the external file/package to my lazy-loaded component? Thank you in advance.

CODE

// router.js
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/something',
            name: 'something',
            title: 'something',
            component: () => import(/* webpackChunkName: "something" */ './views/Component.vue')
        }
    ]
});

// Component.vue
<script>
    import DatePickerOriginal from "@/external/date-picker";

    export default {
        components: {
            DatePickerOriginal
        }
    };
</script>

And the source code of @/external/date-picker is almost the same as here (well, the build tooling was the same, and the application itself most likely does not cause the problem). Also, it might be nice to point out once again, the application is not in the node_modules folder with other packages, but is loaded from @/externals/date-picker.

I am not sure what you are asking about. However lazy loading is about webpack and you can do it by: () => import something from somewhere — roli roli
Can you please add some code? If you have a library it can be imported from node-modules for example moment.js: import moment from 'moment' — roli roli
@roliroli sure, thanks for interest. The question is updated. All relevant code is there I guess. — Dawid Zbiński
it seems to me like the package is not built correctly, but I'm not sure what can I do to fix this. I was building it without changing anything, but the output.path. Configurationn can be found here. — Dawid Zbiński
So the DatePickerOriginal is a component? Can you show some code from it? — roli roli

Dawid Zbiński Dawid Zbiński · Accepted Answer · 2018-10-09T13:36:18

Looks like I was missing libraryTarget: 'window' in my webpack config, while merging the package in build process.

merge(commonConfig, {
    entry: path.resolve(__dirname + '/src/plugin.js'),
    output: {
        // ...
        libraryTarget: 'window'
    }
})

Vue-router cannot lazy load child component

1 Answers