Vue路由器无法延迟加载子组件

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 .

Answer 1

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