preset-create-react-app support of craco

[liokm]

When @craco/craco is used as a replacement of react-scripts, there is no fork of react-scripts, thus this line, which tries to require the non-existing module .../@craco/craco/index.js/config/webpack.config, will fail. Although we could solve the issue by either providing a local react-scripts or mocking the module, I want to know whether there is any plan for preset-create-react-app to support user provided entire webpack config. Thanks a lot.

The storybook config looks like

addons: [
    {
        name: "@storybook/preset-create-react-app",
        options: {
            scriptsPackageName: "@craco/craco"
        }
    },
    ...
]

[mrmckeb]

Hi @liokm, so as craco is a little different than a fork of react-scripts, it requires you to modify the CRA config for Storybook in the same way that you do with Craco.

Can you share more information about your Craco setup? It might be something we can automate.

[liokm]

Hi @mrmckeb , thank you.

The config is as following. I am not using preset-ant-design as there are more configures to be done. antd.less could be changed to modifyVars of lessOptions and does not matter. Yeah, craco reads CRA webpack config and does its injection before invoking react-scripts commands. I am using createWebpackDevConfig to get the config and pass it to preset-create-react-app through mocked config module.

[root]/craco.config.js

const CracoAntDesignPlugin = require("craco-antd");
const path = require("path");

module.exports = {
  plugins: [
    {
      plugin: CracoAntDesignPlugin,
      options: {
        customizeThemeLessPath: path.join(__dirname, "src/antd.less")
      }
    }
  ]
};

package.json

    "@craco/craco": "^5.6.3",
    "@storybook/preset-create-react-app": "^1.5.2",
    "@storybook/react": "^5.3.14",
    "antd": "^4.0.1",
    "craco-antd": "^1.14.1",

[mrmckeb]

Hi @liokm, from what I can see, you'll need to implement this yourself for now. As Craco isn't a fork of CRA, but instead modifies it, you would need to do something like this:

addons: [
    '@storybook/preset-create-react-app'
],
webpackFinal: async (config) => {
    // Change your config here

    return config;
  },

We also support passing babel plugins/presets through a babel.config.js file.

You can find more about webpackFinal here: https://storybook.js.org/docs/configurations/custom-webpack-config/#examples

From what I can see, you shouldn't need to change too much for Ant Design - in fact it works with CRA with no config - but it looks like that Craco plugin does a lot of customisation for advanced usage: https://github.com/DocSpring/craco-antd/blob/master/lib/craco-antd.js

We'd welcome a PR to add some level of compat with Craco, but right now it seems that this would be a large amount of work. CC @shilman who may have some other thoughts?

[benwiles1]

I just moved to using craco to apply the craco-cesium fixes to use cesium. I was able to get it working for that specific craco plugin with the following main.js:

const cracoCesium = require( "craco-cesium" )()

module.exports = {
    stories: ["../src/**/*.stories.tsx"],
    addons: [
        "@storybook/preset-create-react-app",
        "@storybook/addon-actions",
        "@storybook/addon-links",
    ],
    webpackFinal( config, { configType } ) {
        // run craco plugins since there is no preset for craco
        return cracoCesium.overrideWebpackConfig( {
            webpackConfig: config,
            context: {
                env: configType.toLowerCase(),
            },
        } );
    },
};

[danielknell]

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

[robhogan]

@danielknell first, thanks! Worked a treat and seems like the most sensible+DRY way of handling craco configs.

FYI: I'm using craco to customise babel-loader so that I can have TSX outside my CRA root (yarn workspace monorepo setup). Your preset worked almost out of the box for me, except that I had to set the cracoConfigFile option because my craco config lives in my workspace root, not in the CRA root. That could be made a little bit smoother if the preset checked package.json for the cracoConfig key. I'll put in a PR if I get chance, but just letting you know. Cheers again!

[elektronik2k5]

Thanks a lot @danielknell for your work on https://github.com/artisanofcode/storybook-preset-craco cause it works great!