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:

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!

回答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.

回答2:

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;
};

回答3:

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.

来源：https://stackoverflow.com/questions/51679614/storybook-doesnt-understand-import-on-demand-for-antd-components

标签

reactjs

create-react-app

antd

StorYBook