CODEWITHSUNDEEP
reactjscreate-react-appantdstorybook
devautor
devautor

Reputation: 2596

Storybook doesn't understand import on demand for antd components

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:

image

2. On using

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

I get:

image

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!

Upvotes: 8

Views: 5120

Answers (3)

Gerrie van Wyk
Gerrie van Wyk

Reputation: 697

If you are using AntD Advanced-Guides for React and storybook v5 create .storybook/webpack.config.js with the following:

const path = require('path');

module.exports = async ({ config, mode }) => {

  config.module.rules.push({
      loader: 'babel-loader',
      exclude: /node_modules/,
      test: /\.(js|jsx)$/,
      options: {
          presets: ['@babel/react'],
          plugins: [
              ['import', {
                libraryName: 'antd',
                libraryDirectory: 'es',
                style: true
              }]
          ]
      },
  });

  config.module.rules.push({
      test: /\.less$/,
      loaders: [
          'style-loader',
          'css-loader',
          {
              loader: 'less-loader',
              options: {
                  modifyVars: {'@primary-color': '#f00'},
                  javascriptEnabled: true
              }
          }
      ],
      include: [
        path.resolve(__dirname, '../src'),
        /[\\/]node_modules[\\/].*antd/
      ]
  });

  return config;
};

Then you can use import { Button } from 'antd' to import antd components.

Upvotes: 2

cheickmec
cheickmec

Reputation: 183

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.

Upvotes: 7

scroobius
scroobius

Reputation: 722

I'm currently using storybook with antd and i got it to play nice, by using this config in my webpack.config.js file in the .storybook folder:

const { injectBabelPlugin } = require('react-app-rewired');
const path = require("path");

module.exports = function override(config, env) {
config = injectBabelPlugin(
['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
config,
);



config.module.rules.push({
  test: /\.css$/,
  loaders: ["style-loader", "css-loader", ],
  include: path.resolve(__dirname, "../")
  })


return config;
};

Upvotes: 1

Related Questions