Storybook: Can't use JSX nor import CSS file in a custom addon

Created on 12 Mar 2019 · 6Comments · Source: storybookjs/storybook

Describe the bug
I created a custom addon whose purpose is to print the HTML of the current viewed story. But it seems that I cannot import a CSS file nor use JSX in my addon.
Adding a custom webpack config with babel-loader, style-loader and css-loader doesn't fix this issue.

To Reproduce
Bug reproduction : https://github.com/mr-wildcard/storybook-custom-addon-bug-repro
Temporary fix : https://github.com/mr-wildcard/storybook-custom-addon-bug-repro/tree/temporay-fix

Expected behavior
Storybook should let me use JSX without any custom webpack config.
I might be wrong, but Storybook should also let me import a CSS file in my addon and process it out of the box.

Code snippets
see reproduction repository.

System:

OS: macOS 10.14.3
Device: Macbook Pro
Browser: Chrome
Framework: react
Addons: custom
Version: 5.0.1

addons in progress question / support

Source

mr-wildcard

👍2

Most helpful comment

cc @ndelangen

shilman on 12 Mar 2019

👍2

All 6 comments

cc @ndelangen

shilman on 12 Mar 2019

👍2

I'm also experiencing this issue, v5.0.5

tourshi on 25 Mar 2019

I'm not sure why the defaults are that way and I'll let @ndelangen field that.

As for customization, when you do typical "webpack customization" you're customizing the webpack in the preview, which is the area where your stories are rendered. However, addons are running in the manager which is the UI that wraps it. And it has its own webpack process and configuration.

For more info on customizing manager webpack post 4.1, see https://github.com/storybooks/storybook/issues/4995

shilman on 26 Mar 2019

Thank you @shilman . You're right, I was aware of the preview/manager distinction but didn't realize they were built using different webpack configurations.

I'll try @ndelangen solution 👍

mr-wildcard on 28 Mar 2019

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!