Use with Storybook about craco HOT 9 CLOSED

I know it's been a while but it should work now with the new API.

Documentation available here.

from craco.

Hi @jgoux

craco doesn't return any config.

The way it works is that it make some tweaking according to how craco si setup and then call CRA.

You can try to leverage the plugin system of craco to write a plugin that will output the webpack config somewhere accessible to storybook.

from craco.

Thanks for your answer @patricklafrance

I wish the ecosystem was more collaborative about webpack's config overwrite.

Project such as https://github.com/andywer/webpack-blocks would be a good start, then craco or storybook's configs could be just a thin layer over this primitive.

Have a nice day! 🌞

from craco.

@patricklafrance shouldn't that example be:

/* eslint-disable import/first */

const {
  createWebpackDevConfig,
} = require('@craco/craco');
const cracoConfig = require('../craco.config.js');

module.exports = (webpackConfig) => {
  const config = createWebpackDevConfig({
    ...cracoConfig,
    webpack: {
      configure: webpackConfig.config,
    },
  });

  return config;
};

?

Otherwise you would be just loading the main app webpack config, not Storybook webpack config.

from craco.

Hi @gajus

Did you have problems with the original exemple?

Storybook support "full control mode" for the webpack config so I thought that would be enough. A merge might be necessary.

Not sure about the webpack key in your example though.

Patrick

from craco.

I didn't manage to get it working with either your approach or my approach. With your approach webpack was bundling the main application, not Storybook. With my approach I started getting loads of Babel errors (cannot recall what they were now).

I ended up just patching webpack config injected by Storybook:

/* eslint-disable import/first */

module.exports = ({ config }) => {
  const babelLoaderOptions = config.module.rules[0].use[0].options;

  config.module.rules = config.module.rules.filter((rule) => {
    return !(rule.use && rule.use[0].loader && rule.use[0].loader.includes('eslint-loader'));
  });

  // The last rule is the rule added by Storybook to pre-process project files.
  const babelRule = config.module.rules[config.module.rules.length - 1];

  if (!babelRule.loader.includes('babel-loader')) {
    throw new Error('Unexpected state.');
  }

  babelRule.options.plugins = [
    [
      'babel-plugin-styled-components',
      {
        diplayName: true,
      },
    ],
    ...babelRule.options.plugins,
  ];

  config.module.rules.push({
    test: /\.stories\.js?$/,
    loaders: [
      {
        loader: require.resolve('@storybook/addon-storysource/loader'),
        options: {
          parser: 'flow',
        },
      },
    ],
    enforce: 'pre',
  });

  return config;
};

from craco.

ok thank you, thank you for your feedback, I will remove the example and revisit it later

from craco.

Simply merge seems not work. With the help of preset-create-react-app it could work. I have raised an issue here storybookjs/presets#109

from craco.

I hit problems with Craco and storybook last night so built an experimental preset based on preset-create-react-app to use the webpack config from Craco instead of pulling it directly from react-scripts.

This means any Craco plugins, changes postcss plugins, manual webpack tweaks, etc will also be applied to storybook.

Its a bit hackey at the moment and calls out to internal apis inside preset-create-react-app but that seemed like a better choice than re-inventing the wheel.

Any feedback, contributions, fixes, etc are welcome, it would be good to have solid integration between storybook and Craco.

• Github Repo
• Yarn
• NPM

from craco.