storybook-addon-html icon indicating copy to clipboard operation
storybook-addon-html copied to clipboard

Compatibility with non-webpack builders

Open tobystokes opened this issue 2 years ago • 3 comments

(Firstly, thanks for this essential addon!)

Currently, I don't think this is compatible with Storybooks builders that are not webpack based - specifically the one I tested/care about is the Vite builder

I get the following error: exports is not defined

I'm fairly sure the answer is to also build/publish this as an ES module that can be used by the browser natively, not sure I'm quite up to a PR though...

tobystokes avatar Oct 29 '21 11:10 tobystokes

Also ran in to problem using Vite builder with this addon and would very much appreciate a fix.

perragnarl avatar Mar 02 '22 10:03 perragnarl

The problem is not directly, that there are no ESM builds of this addon, because Vite does support CommonJS. The problem is, that babel transpiles to the exports syntax (since babel 7), which vite does not understand (vite only knows of module.exports).

I opened up a PR to make the build of this addon a little bit more modern https://github.com/whitespace-se/storybook-addon-html/pull/69, which fixes this issue for me.

I don't know how actively maintained this repo is. If you can't wait for the next release, you could checkout my branch as a git submodule, run yarn && cd addon && yarn build and then register the addon via, e.g.

// .storybook/main.js
[..]
  addons: [
   [..]
    '../vendor/storybook-addon-html/addon/preset.js',
  ],
[..]

aboutsimon avatar Mar 24 '22 16:03 aboutsimon

I will take a look at @aboutsimon’s PR. Thanks for reporting this!

jeanfredrik avatar Sep 27 '22 08:09 jeanfredrik