[Feature] Distribute ESM bundle

[IanVS]

Describe the bug

This addon is not compatible with the vite builder, because it does not expose es modules.

Steps to reproduce the behavior

Use addon-essentials with https://github.com/eirslett/storybook-builder-vite, and observe the error message in the console

Expected behavior

I expect this to work correctly with modern storybook builders like vite.

[IanVS]

I don't have a ton of experience in that area. However, node has supported es modules since version 12, which is the oldest LTS version right now (10 was end-of-life about a month ago). So, is there a reason not to only distribute es modules? I guess to maintain support for IE11, if that's something you still need. I'm really excited for the day everyone can stop worrying about IE11, hopefully it's soon.

If you want to distribute both, I think the best way is either with a wrapper or conditional exports. The approaches are laid out pretty well in https://nodejs.org/api/packages.html#packages_dual_commonjs_es_module_packages. I have been trying to find examples of how other packages do it, without any luck so far, but I'll post back if I do. If we figure out a good way to do this, we should probably update the addon-kit.

[IanVS]

It looks like storybook itself uses the "module" field, which is a non-standard field for webpack. It would be nice to avoid that, but this PR might give some good hints on how to set up multiple build targets: storybookjs/storybook#13013

[winkerVSbecks]

Yea, I spoke to Norbert about this. I'll add in the ESM support today/tomorrow. Will share a preview release for you to test out.

[IanVS]

From discord it sounds like a change to addon-kit to double-publish should be landing tomorrow. 🎉 So maybe it's worth holding off until we see what shape that takes?

[winkerVSbecks]

@IanVS could you test this out with 1.2.1--canary.1d6561e.0