Storybook doesn't understand import on demand for antd components

storybook addons
storybook knobs
storybook github
storybook-next
storybook/react native
npm storybook
storybook tutorial
storybook mdx

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!

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.

Storybook doesn't work with React Native 0.61 · Issue #8613 , Describe the bug There are two problems: Storybook starts with "No addons loaded" page. After making changes to components "No addons  The very handy Storybook Info addon autogenerates prop tables documentation for each component, however it doesn’t work with Typescript types. The current solution is to use react-docgen-typescript-loader to preprocess the TypeScript files to give the Info addon what it needs.

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

Custom Webpack Config, You can customize Storybook's webpack setup by providing a webpackFinal field in main.js file. The value should be an async function that receives a webpack  Bug summary It seems that something broke in v4.0.0-alpha.16 and has remained broken through v4.0.0-alpha.18. Using a fresh install of storybook into a brand new CRA, the storybook doesn't load

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.

Storybook for Vue, Manual setup. If you want to set up Storybook manually for your Vue project, this is the guide for you. Step 1: Add dependencies. Add @storybook/vue. Storybook doesn’t always notice such changes. View customization If you would like to change how your stories are displayed, you can wrap them in a container.

TypeScript Config, The very handy Storybook Info addon autogenerates prop tables documentation for each component, however it doesn't work with Typescript types. The current  Display code and copy it to the clipboard. It also has options to customize colors and syntax highlighting for any language. There is similar functionality via @storybook/addon-info but addon-info doesn’t currently work when using @storybook/html.

Addon Gallery, Similar to knobs this doesn't add any additional React wrappers to the story, so any other addons used (prop-types, jsx) aren't effected. Has a React hooks like  Make children's storybooks online for free. Get your book published to share with family. Read stories in our free online children's book library.

Addons, There is similar functionality via @storybook/addon-info but addon-info doesn't currently work when using @storybook/html. AngularJS (1.x). Create stories with​  Storybook 5.3 is packed with new features, but doesn’t contain any breaking changes as far as we know. We’ve got a 5.0 upgrade guide if you’re coming from 3.x/4.x. If you’re already on 5.x

Comments
  • have you tried ```import { Button } from "antd"; import "antd/lib/button/style"; ```` ?
  • How does the Button style magically appear without being imported by the developer?
  • @vsync the styles for Button are being imported by babel_plugin_import import { Button } from 'antd'; ReactDOM.render(<Button>xxxx</Button>); -----> var _button = require('antd/lib/button'); ReactDOM.render(<_button>xxxx</_button>);