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

Question

Trying to follow some Vue tutorials and I can\'t currently import Vue in a .js file and then import this file in my index.html. This is how I\'m im

Answer 1

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

   4. Load your own code as an ESM module.
   5. In your own scripts, and the scripts that you import - you can now successfully import from named modules.

   Full example: