Preact: Preact + Styled Components + Storybook

[marvinhagemeister]

Posted by @phunkren in slack:

I managed to reproduce the Preact | Styled Components | Storybook issue we spoke about yesterday. For the repro, I created a project with preact-cli and upgraded preact to X.

Repo: https://github.com/phunkren/preact-storybook-sc

npm i
npm run storybook

[cristianbote]

It turns out it was just a compat issue for styled-components. Defining a ./storybook/webpack.config.js file with the proper aliases solved it.

Here's the webpack config:

module.exports = ({ config }) => {
    config.resolve.alias = Object.assign({}, config.resolve.alias, {
        react: "preact/compat",
        'react-dom': 'preact/compat'
    })

    return config;
}

All in all, preact x works great with storybook! 😄