Dynamic import of native ES modules for async components causes error

[anthonygore]

Version

2.4.4

Reproduction link

https://github.com/anthonygore/vue-dynamic-import

Steps to reproduce

Must use a browser where dynamic module import is supported e.g. the latest Safari or Chrome Canary.

What is expected?

Async component should load and auto-resolve module

What is actually happening?

Uncaught error "Cannot add property _Ctor, object is not extensible".

---

As of v2.4.0, ES modules are auto-resolved when used as dynamic components e.g.

new Vue({
  el: '#app',
  components: {
    MyComponent: () => import('./MyComponent.js')
  }
});

However, this only works if the module has been transpiled from ES to CommonJS since it checks for the flag __esModule. It does not work for native ES modules where the flag is not present.

If you agree, I could easy put in a PR to remove the check for comp.__esModule on line 15 of resolve-async-component.js, which would solve the issue

[yyx990803]

Removing the check wouldn't fix this, it will only break existing usage on transpiled modules. What we need is a way to check if an object is a native module object from a dynamic import.

[anthonygore]

I mean just remove the check for __esModule

i.e. change this

if (comp.__esModule && comp.default) {
    comp = comp.default
}

To this:

if (comp.default) {
    comp = comp.default
}

[yyx990803]

That's not safe enough IMO. This would break if the user somehow defines a custom option called default. I've found a way to detect a native Module namespace object by checking comp[Symbol.toStringTag].

[yyx990803]

Note the same fix needs to be in vue-router for route async components to work.