Vue 3 + Naive UI with importmap

Question

Using Vue 3 without build. Trying to import naive-ui with importmap but got syntax error

    <script type="importmap">
        {
            "imports": {
                "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js",
                "naive-ui": "https://unpkg.com/naive-ui"
            }
        }
    </script>

    <script type="module">
        import {createApp} from 'vue';
        import naive from 'naive-ui';

     const App = {
        data() {
         return {
           msg: ''
         }
       }
     }

      const app = createApp(App)
      app.use(naive)
      app.mount('#app')
</script>

Result: Uncaught SyntaxError: The requested module 'naive-ui' does not provide an export named 'default'

Answer 1

Importmap works with ESM modules, but the file from https://unpkg.com/naive-ui is a UMD module, which cannot be used as ESM.

Looking at the npm repository, there is no pre-packaged esm source you could use instead.

jsdelivr has a packaging service, which tries to create esm modules if you add +esm to the URL (https://cdn.jsdelivr.net/npm/naive-ui@2.35.0/+esm). However, it seems to screw up dependencies, so it also does not work.

I'm going to say there is no way to run naive-ui from importmaps at the moment (but let me know if you find one).