如何使用ESM导入Vue材质（Webpack UMD）？

Question

I have a pug file with the following...

#footer
    script(type="module")
          | import Vue from '/vue/vue.esm.browser.js'
          | import { JRGVue } from '/ui/index.js'
          | import VueMaterial from '/material/vue-material.js'
          | (()=>{
          |     const vue = new JRGVue(Vue);
          |     vue.app.use(VueMaterial);
          |     vue.app.$mount('#jg-app');
          | })();

I get

Uncaught SyntaxError: The requested module '/material/vue-material.js' does not provide an export named 'default'

When I change it to

import * as VueMaterial from '/material/vue-material.js'

I get

Uncaught TypeError: _vue2.default is not a constructor

What is the proper way to import the Vue Material library using ESM?

Update

It does seem to work with Vuetify

#footer
    script(type="module")
          | import Vue from '/vue/vue.esm.browser.js'
          | window.Vue = Vue;
    script(type="module")
          | import * as Vuetify from '/vuetify/vuetify.js';
          | import { JRGVue } from '/ui/index.js';
          | Vue.use(Vuetify);
          | const vue = new JRGVue(Vue);
          | vue.app.$mount('#jg-app');

Update

No longer seems to be working with the newest version. It would be really nice to find a UI with native ESM support

Answer 1

In case the import refers to vue-material library, a correct way to import it is:

import VueMaterial from 'vue-material';

And bundle the application with it.

It's impossible to import it with native ES modules ( <script type="module"> ).

It's possible to import packages that were built as ES modules (eg vue.esm.browser.js for vue ) but vue-material doesn't have ES6 entry point.

In case /material/vue-material.js refers to vue-material/dist/vue-material.js , it is UMD module which cannot be imported by ES module without module interop.

ES module that could be imported is vue-material/src/index.js but it cannot be imported directly because the package uses source files that aren't compliant with specs (.vue, .scss) and need to be built.

A way to import vue-material UMD module at runtime is to use SystemJS for module interop.

Also, IIFE is an antipattern in module scope.