JavaEar 专注于收集分享传播有价值的技术资料

动态导入的vue组件无法解析 (Dynamic imported vue component failed to resolve)

When I try to import a dynamic component with the import() function I receive following error:

[Vue warn]: Failed to resolve async component: function () {
    return __webpack_require__("./src/components/types lazy recursive ^\\.\\/field\\-.*$")("./field-" + _this.type);
}
Reason: Error: Loading chunk 0 failed.

Unfortunately I don't know what causes this error. I already tried to set the esModule to false inside the vue-loader config due to the Release Notes.

I used vue-cli 2.9.2 with the webpack template to setup this project and this is the code of the actual component:

<template>
    <div>
        <component :is="fieldType">
            <children/>
        </component>
    </div>
</template>

<script>
export default {
    name: 'DynamicComponent',
    props: {
        type: String,
    },
    computed: {
        fieldType () {
            return () => import(`./types/type-${this.type}`)
        }
    }
}
</script>

1个回答

    最佳答案

  1. 英文原文

    The root cause is import() is async (it returns a Promise) which the error you got already told you:

    [Vue warn]: Failed to resolve async component

    Using a watch will be better like below demo (Inside Promise.then(), change componentType), then hook beforeMount or mounted to make sure props=type is intialized correctly.:

    <template>
        <div>
            <component :is="componentType">
                <children/>
            </component>
        </div>
    </template>
    
    <script>
    import DefaultComponent from './DefaultComponent'
    
    export default {
        name: 'DynamicComponent',
        components: {
            DefaultComponent
        },
        props: {
            type: String,
        },
        data: {
            componentType: 'DefaultComponent'
        },
        watch: {
            type: function (newValue) {
                import(`./types/type-${newValue}`).then(loadedComponent => { this.componentType = loadedComponent} )
            }
        },
        mounted: function () {
            import(`./types/type-${this.type}`).then(loadedComponent => { this.componentType = loadedComponent} )
        }
    }
    </script>
    

    中文翻译

    根本原因是 import() async (它返回承诺),你已经告诉过你的错误:

      

    [Vue警告]:无法解析异步组件

    使用 watch 会更好像下面的demo(Inside Promise.then(),更改componentType),然后挂钩beforeMount或挂载以确保props = type是初始化正确。:

     &LT;模板&GT;
        &LT; DIV&GT;
            &lt; component:is =" componentType" &gt;
                &LT;儿童/&GT;
            &LT; /成分&gt;
        &LT; / DIV&GT;
    &LT; /模板&GT;
    
    &LT;脚本&GT;
    从'./DefaultComponent'导入DefaultComponent
    
    export default {
        名称:'DynamicComponent',
        组件: {
            DefaultComponent
        },
        道具: {
            type:String,
        },
        数据:{
            componentType:'DefaultComponent'
        },
        看:{
            type:function(newValue){
                import(`./types/type  -  $ {newValue}`)。then(loadedComponent =&gt; {this.componentType = loadedComponent})
            }
        },
        已安装:function(){
            import(`./types/type  -  $ {this.type}`)。then(loadedComponent =&gt; {this.componentType = loadedComponent})
        }
    }
    &LT; /脚本&GT;
     

    The root cause is import() is async (it returns a Promise) which the error you got already told you:

    [Vue warn]: Failed to resolve async component

    Using a watch will be better like below demo (Inside Promise.then(), change componentType), then hook beforeMount or mounted to make sure props=type is intialized correctly.:

    <template>
        <div>
            <component :is="componentType">
                <children/>
            </component>
        </div>
    </template>
    
    <script>
    import DefaultComponent from './DefaultComponent'
    
    export default {
        name: 'DynamicComponent',
        components: {
            DefaultComponent
        },
        props: {
            type: String,
        },
        data: {
            componentType: 'DefaultComponent'
        },
        watch: {
            type: function (newValue) {
                import(`./types/type-${newValue}`).then(loadedComponent => { this.componentType = loadedComponent} )
            }
        },
        mounted: function () {
            import(`./types/type-${this.type}`).then(loadedComponent => { this.componentType = loadedComponent} )
        }
    }
    </script>
    

    根本原因是 import() async (它返回承诺),你已经告诉过你的错误:

      

    [Vue警告]:无法解析异步组件

    使用 watch 会更好像下面的demo(Inside Promise.then(),更改componentType),然后挂钩beforeMount或挂载以确保props = type是初始化正确。:

     &LT;模板&GT;
        &LT; DIV&GT;
            &lt; component:is =" componentType" &gt;
                &LT;儿童/&GT;
            &LT; /成分&gt;
        &LT; / DIV&GT;
    &LT; /模板&GT;
    
    &LT;脚本&GT;
    从'./DefaultComponent'导入DefaultComponent
    
    export default {
        名称:'DynamicComponent',
        组件: {
            DefaultComponent
        },
        道具: {
            type:String,
        },
        数据:{
            componentType:'DefaultComponent'
        },
        看:{
            type:function(newValue){
                import(`./types/type  -  $ {newValue}`)。then(loadedComponent =&gt; {this.componentType = loadedComponent})
            }
        },
        已安装:function(){
            import(`./types/type  -  $ {this.type}`)。then(loadedComponent =&gt; {this.componentType = loadedComponent})
        }
    }
    &LT; /脚本&GT;