Preact-cli: How to use Storybook with preact-cli?

[russiann]

I wanna use storybook with preact-cli, however, I can't find a way to do this.

[developit]

Is it possible to provide a custom webpack configuration to storybook?

[thangngoc89]

I used to have Storybook set up with preact-cli. Just tell storybook to use cra webpack setup. add babel plugin to transform react => preact-compat

[developit]

we should totally add this to the recipes section of the wiki

[joshuataylor]

I would also like to know how to do this, will figure it out and post back. Not an expert in babel :+1:.

[russiann]

The recipe:
Just add this webpack.config.js in your Storybook config directory (.storybook by default).

const defaults = require('@storybook/react/dist/server/config/defaults/webpack.config');
const webpack  = require('webpack');

module.exports = (base, env) => {
  const config = defaults(base, env);
  return Object.assign({}, config, {
    resolve: Object.assign({}, config.resolve, {
      alias: Object.assign({}, (config.resolve || {}).alias, {
        react: 'preact-compat',
        'react-dom': 'preact-compat'
      })
    }),
    plugins: [
      new webpack.ProvidePlugin({
        Component: ['preact', 'Component'],
        React: ['preact-compat']
      })
    ].concat(config.plugins)
  })
};

😃

[hellsan631]

I used @russiann as a starting point, eventually I landed on this:

webpack.config.js

const webpack  = require('webpack');
const path = require("path");

module.exports = (baseConfig, env, defaultConfig) => {
  // we are extending the base alias config here, adding preact as an alias
  defaultConfig.resolve.alias = {
    ...defaultConfig.resolve.alias,
    'react': 'preact-compat',
    'react-dom': 'preact-compat'
  };

  // adding new plugins to the default config.
  defaultConfig.plugins.push(
    new webpack.ProvidePlugin({
      Component: ['preact', 'Component'],
      React: ['preact-compat']
    })
  );

  return defaultConfig;
};

This uses the recommended way to extend the default config

[nickytonline]

I wrote a blog post about this, for those interested.

https://dev.to/nickytonline/setting-up-storybook-for-preact-p5a

[reznord]

Thanks for this. Will be adding to the Wiki pages.