Esm-browser format cannot be used with a vue3 project

[tarsusi]

Reproduction

https://codesandbox.io/s/pinia-browser-example-7ofsdg

Steps to reproduce the bug

1 - Open this codesandbox
2 - See the browser window error

Expected behavior

Pinia should be used with esm-browser module.

Actual behavior

Pinia cannot be accessed like this.

Additional information

In my project, I need to use Vue3 project directly on browser. That's why I need to import Vue and a state management library(vuex or pinia) using "importmap". How can I use Pinia directly in browser without any bundle tools.

[antoniandre]

Hi @tarsusi,

To properly test the ESM build, you should use import maps, which is still quite new.
I had a similar issue while testing vue, vue-router and one of my libs out of curiosity, and solved it with the import map.

Follow this tutorial: https://www.digitalocean.com/community/tutorials/how-to-dynamically-import-javascript-with-import-maps

This is also discussed here:

• https://stackoverflow.com/questions/52612446/importing-a-package-in-es6-failed-to-resolve-module-specifier-vue
• Import maps mozilla/standards-positions#146

Also, if you really need a browser build, the provided IIFE should work fine, and in the case of Pinia, I don't think it makes any performance difference loading it, against loading exactly what you need - even if you do it very carefully - using the ES module. 🤷‍♂️

[tarsusi]

Hi @antoniandre ,

If you check the codesandbox repo, I included in my first comment, you will see that I have already using import-maps. Let me test with IIFE but why isn't mentioned in the documentation. Since, in the docs there are suggesting using "import maps" for running in browser directly.