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

by

The way you can use ES modules in your Browser directly (as of June 2020) is thus:

  1. 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.0.0-beta.14/vue.esm-browser.js

  2. Make your browser work with the experimental importmap feature. Import maps are a new web recommendation, not yet supported in mainstream browsers. https://wicg.github.io/import-maps/#import-map In Chrome this is under chrome://flags#enable-experimental-productivity-features
    (latest Chrome versions moved this under chrome://flags#enable-experimental-web-platform-features)

  3. 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.37/vue.esm-browser.min.js",
  "vue-router": "https://cdnjs.cloudflare.com/ajax/libs/vue-router/4.0.16/vue-router.esm-browser.min.js"
} }
</script>
  1. Load your own code as an ESM module.
<script type="module" src="./main.js"></script>
  1. In your own scripts, and the scripts that you import – you can now successfully import from named modules.

Full example:

<html>
<body>
<script type="importmap">
{ "imports": {
  "vue":        "https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.37/vue.esm-browser.min.js",
  "vue-router": "https://cdnjs.cloudflare.com/ajax/libs/vue-router/4.0.16/vue-router.esm-browser.min.js"
} }
</script>
<script type="module">
import { createRouter, createWebHistory } from 'vue-router'
import { createApp } from 'vue'

const router = createRouter()

export default createApp({
  router
})
</script>
</body>
</html>

More Related Contents:

  1. What should I do to use this webpacked JS library? [closed]
  2. Vue.js dynamic images not working
  3. Communication between sibling components in Vue.js 2.0
  4. Vue.js 3 Event Bus
  5. [Vue warn]: Property or method is not defined on the instance but referenced during render
  6. Difference between the created and mounted events in Vue.js
  7. Filter list with Vue.js
  8. How to call function on child component on parent events
  9. forEach is not a function error with JavaScript array
  10. Vuejs typescript this.$refs..value does not exist
  11. How to call multiple functions with @click in vue?
  12. How to use any icons with Nuxt3?
  13. How to install jQuery into Nuxt.js?
  14. Is there a proper way of resetting a component’s initial data in vuejs?
  15. Can vue-router open a link in a new tab?
  16. Two components binding Vuejs
  17. Module not found: Error: Can’t resolve vue, path not correct
  18. Methods vs Computed in Vue
  19. Vue js error: Component template should contain exactly one root element
  20. How to use any icons with Nuxt or Vue?
  21. What is ?
  22. Add global variable in Vue.js 3
  23. How to set a component non-reactive data in Vue 2?
  24. How do I hide the VueJS syntax while the page is loading?
  25. How to use Vuetify tabs with vue-router
  26. Styling Vuetify selectors
  27. How to navigate using vue router from Vuex actions
  28. Conflict on Template of Twig and Vue.js
  29. Detect Back Button in Navigation Guards of Vue-Router
  30. How to import ipcRenderer in vue.js ? __dirname is not defined

Leave a Comment