Storybook doesn't understand import on demand for antd components

Question

I have followed instructions here to get antd working fine with CRA. But while using it from storybook, I was getting an error as:

Build fails against a mixin with message Inline JavaScript is not enabled. Is it set in your options?

I had fixed that following suggestions on an issue I raised here.

Now, storybook understands antd but not importing components on demand. Is babel has to be configured separately for storybook?

1. On using import { Button } from "antd"; I get this:

2. On using

import Button from "antd/lib/button";
import "antd/lib/button/style";

I get:

Storybook version: "@storybook/react": "^3.4.8"

Dependency: "antd": "^3.7.3"

I have been stuck (again) with this for quite long hours googling things, any help is appreciated. Thanks!

Answer 1

Using Storybook 4, you can create a webpack.config.js file in the .storybook directory with the following configuration:

const path = require("path");

module.exports = {
    module: {
        rules: [
            {
                loader: 'babel-loader',
                exclude: /node_modules/,
                test: /\.js$/,
                options: {
                    presets: ["@babel/react"],
                    plugins: [
                        ['import', {libraryName: "antd", style: true}]
                    ]
                },
            },
            {
                test: /\.less$/,
                loaders: [
                    "style-loader",
                    "css-loader",
                    {
                        loader: "less-loader",

                        options: {
                            modifyVars: {"@primary-color": "#d8df19"},
                            javascriptEnabled: true
                        }
                    }
                ],
                include: path.resolve(__dirname, "../")
            }
        ]
    }
};

Note that the above snippet includes a style overwriting of the primary button color in antd. I figured, you might want to eventually edit the default theme so you can remove that line in case you do not intend to do so.

You can now import the Button component in Storybook using:

import {Button} from "antd";

without having to also import the style file.