Dynamic import function/constructor

1

So I tried to dynamically import Vue, which is a constructor.

import('vue').then(Vue => {
  console.log(Vue) //type "module"
  new Vue({ //error: Vue is not a constructor
    el:'#GraphicalGrapher',
    ...GraphicalGrapher
})

But turns out that if a module has a function/constructor as its default export, import() turns it into an unusable module object.

My workaround was to make another file that did:

import Vue from 'vue'
export {Vue}

And dynamically import that file instead.

Is this just an unavoidable caveat of dynamic import?

2

You can access the default export like so:

import('vue').then(module => {
  module.default // This should be the Vue constructor
  /// do stuff
})

Even better, rename it in destructuring:

import('vue').then(({default: Vue}) => {
  Vue // This should be the Vue constructor
  /// do stuff
})
2 Likes
3

Ah, that worked! Thanks :slight_smile: