Vue 2 dynamic component import issue

Question

I have dynamic component called like this:

<component v-bind:is="loaderComponent" />

Then in my export default:

export default {
components: {
    'loader': () => import(Vue.prototype.$VUE_LOADER_CONFIG.componentUrl)
  }
},
computed: {
    loaderComponent: function () {
    console.log('1', Vue.prototype.$VUE_LOADER_CONFIG.componentUrl)
    return 'loader'
  }
}

That one console.log gives me the right path to the component, but it doesnt work, i need to pass the string instead of this variable to the import function to make this works.

import('../../Loaders/SomeLoader')

I get an error:

Vue warn]: Failed to resolve async component: function loader() {
      return __webpack_require__("./src/base/components/Payment/Loader lazy recursive")(vue__WEBPACK_IMPORTED_MODULE_2__["default"].prototype.$VUE_LOADER_CONFIG.componentUrl);
    }
Reason: Error: Cannot find module '../../Loaders/SomeLoader'

Any ideas?

score 0 · Answer 1 · answered Jul 29 '22 at 20:37

0

It looks like Vue.prototype.$VUE_LOADER_CONFIG.componentUrl contains a relative path. Try to use an absolute path instead:

Vue.prototype.$VUE_LOADER_CONFIG.componentUrl = '@/base/components/Payment/Loader'

answered Jul 29 '22 at 20:37

Romalex

1,582
11
13

Absolute path like this: ```'@/base/components/Payment/Loader'``` gives mi the same error – Marek Jul 30 '22 at 09:14
1

Check out this question https://stackoverflow.com/questions/47954655/dynamic-imports-in-es6-with-runtime-variables – Romalex Jul 30 '22 at 22:49

Vue 2 dynamic component import issue

1 Answers1