importing a package in ES6: “Failed to resolve module specifier “vue””

Question

As of June 2020

The way you can use ES modules in your Browser directly is this:

Use the ESM version of your dependencies (the one that has import instead of require).

For example, Vue ESM version is available at: https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.41/vue.esm-browser.prod.js
Make your browser work with the experimental importmap feature.

update 2022: major browsers now support Import maps

For older versions of Chrome this is under chrome://flags#enable-experimental-productivity-features
(latest Chrome versions moved this under chrome://flags#enable-experimental-web-platform-features)
Create an importmap in your HTML file.

It only works with inline <script> tags at the moment in Chrome. For example:

<script type="importmap">
  { "imports": {
      "vue":        "https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.41/vue.esm-browser.prod.js",
      "vue-router": "https://cdnjs.cloudflare.com/ajax/libs/vue-router/4.1.5/vue-router.esm-browser.min.js"
  } }
</script>

Load your own code as an ESM module.

<script type="module" src="./main.js"></script>

In your own scripts, and the scripts that you import – you can now successfully import from named modules.

Import Maps Documentation

Full example:

<html>
<body class="app">

<script type="importmap">
  { "imports": {
      "vue":               "https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.41/vue.esm-browser.prod.js",
      "vue-router":        "https://cdnjs.cloudflare.com/ajax/libs/vue-router/4.1.5/vue-router.esm-browser.min.js",
      "@vue/devtools-api": "https://unpkg.com/@vue/devtools-api@6.4.5/lib/esm/index.js"
  } }
</script>

<script type="module">
  import { createRouter, createWebHistory } from 'vue-router'
  import { createApp } from 'vue'

  const app = createApp({ template: 'Hello world.' })
  const router = createRouter({
    routes: [{ path: '/:pathMatch(.*)*', component: app }],
    history: createWebHistory()
  })
  app.use(router)

  document.addEventListener('DOMContentLoaded', () => app.mount('.app'));
</script>

</body>
</html>

Leave a Comment Cancel reply