Storybook: Configuring storybook with antd and emotion

[devautor]

I am trying to use the libraries antd and emotion in a create-react-app bootstrapped project. I have followed antd docs to set up antd with react-app-rewired and config-overrides.js.
I would very much like to use antd within storybook too, but I am not able to set it up. Here are the things I have tried:

Following previous issues and storybook docs, my webpack.config.js is configured as:

const path = require("path");
module.exports = (baseConfig, env, defaultConfig) => {
  defaultConfig.module.rules.push({
    test: /\.less$/,
    loaders: ["style-loader", "css-loader", "less-loader"],
    include: path.resolve(__dirname, "../")
  });

  return defaultConfig;
};

1. When I use

import Button from "antd/lib/button";
import "antd/lib/button/style";
Build fails against a mixin with message `Inline JavaScript is not enabled. Is it set in your options?`

1. When I use
   import { Button } from "antd";
   It loads the structure (of components), but not their library styles (while it works directly from the app.js declaration in the same manner). Is it to get something like babel-plugin-import, if yes, how?

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

Dependency: "antd": "^3.7.3"

I have been stuck for a few hours now with this, any help is appreciated. Thanks!

[igor-dv]

Googling this error, looks like you need to enable javascriptEnabled option in the less-loader.

[devautor]

Though I am looking through google results, but please spill some reference if you have something on top of your head on how to do it? 👍
For instance: this answer doesn't work!

[igor-dv]

Something like this:

loaders: [
  "style-loader", 
  "css-loader", 
  {
    loader: "less-loader",
    options: { javascriptEnabled : true }
  }
],

[devautor]

I followed your suggestions to this guide, and it works. Grateful!
And, I see that you even typed the whole thing. Thanks :)

[jembach]

hi,
i have the same problem. Could you please post the solution how do you solve the problem?

[milmaj]

Create a webpack.config.js in your /.storybook folder:

const path = require('path');

module.exports = (baseConfig, env, defaultConfig) => {
    // Extend defaultConfig as you need.
    defaultConfig.module.rules.push({
        test: /\.less$/,
        loaders: [
            "style-loader",
            "css-loader",
            {
              loader: "less-loader",
              options: { javascriptEnabled : true }
            }
        ],
        include: path.resolve(__dirname, '../src/'),
    });
    return defaultConfig;
};

Ant.Design and many other libraries use javascript in less, for example here:
https://github.com/ant-design/ant-design/blob/31a2d8b446991ac4fabc12473195bd49a55ea2b7/components/style/color/bezierEasing.less#L110

Here we keep the default storybook config and add rules including javascriptEnabled option for less.

[Arguseye]

hi,
i have the same problem. Could you please post the solution how do you solve the problem?

i import component's sytle after add javascriptEnabled: true.

https://github.com/ant-design/ant-design/issues/11603

[jijigo]

I found now should need lessOptions in the options object
it's work now. Thanks!

[
  'style-loader',
  'css-loader',
  {
    loader: 'less-loader',
    options: {
      lessOptions: {
        javascriptEnabled: true
      }
    }
  }
],

[rexuli]

I can load antd less on storybook using:
create-react-app(typescript) 16.13
antd 4.6.2
storybook 6.0.2

.storybook/main.js

const path = require('path');

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    {
      name: '@storybook/preset-create-react-app',
      options: {
        craOverrides: {
          fileLoaderExcludes: ['less'],
        },
      },
    },
  ],
  webpackFinal: async (config, { configType }) => {
    config.module.rules.push({
      test: /\.less$/,
      use: ['style-loader', 'css-loader', { loader: 'less-loader', options:{ lessOptions: {javascriptEnabled : true }}}],
      include: path.resolve(__dirname, '../'),
    });

    return config;
  },
}

[uaite]

@rexuli I have the same setup as you and tried your solution, but I'm still getting the same error. Any ideas?

Also tried setting the javascriptEnabled: true in other places and using older webpack syntax just to be sure, but no success.

Edit: actually, I changed my imports and this specific error is gone, but now I'm getting

var api = require("!../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js");
      ^
Unrecognised input
      in /Users/eduardo/dev/ui/node_modules/antd/lib/typography/style/index.less (line 1, column 8)
 @ ./node_modules/antd/lib/typography/style/index.less 2:26-251 43:4-64:5 46:18-243
[...]

Any help would be greatly appreciated!

[akaguny]

@uaite , show config, versions of storybook, less, less-loader, create-react-app
upd: append before return config in your webpackFinal section that:
fixBabelImports('antd', { libraryDirectory: 'es', style: true, })(config)

My config:

const fixBabelImports = require("customize-cra").fixBabelImports;

const path = require('path')

module.exports = {
    stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
    addons: [
        "@storybook/addon-links",
        "@storybook/addon-essentials",
    {
      "name": "@storybook/preset-create-react-app",
      "options": {
        "craOverrides": {
          "fileLoaderExcludes": ["less"]
        }
      }
    },
    ],
  webpackFinal: async (config, { configType }) => {
    config.module.rules.push({
      test: /\.less$/,
      use: ['style-loader', 'css-loader', { loader: 'less-loader', options:{ lessOptions: {javascriptEnabled : true }}}],
      include: path.resolve(__dirname, '../'),
    });

    fixBabelImports('antd', {
      libraryDirectory: 'es',
      style: true,
    })(config)

    return config;
  },
};

[daiyis]

@rexuli I have the same setup as you and tried your solution, but I'm still getting the same error. Any ideas?

Also tried setting the javascriptEnabled: true in other places and using older webpack syntax just to be sure, but no success.

Edit: actually, I changed my imports and this specific error is gone, but now I'm getting

var api = require("!../../../../style-loader/dist/runtime/injectStylesIntoStyleTag.js");
      ^
Unrecognised input
      in /Users/eduardo/dev/ui/node_modules/antd/lib/typography/style/index.less (line 1, column 8)
 @ ./node_modules/antd/lib/typography/style/index.less 2:26-251 43:4-64:5 46:18-243
[...]

Any help would be greatly appreciated!

@uaite I had the exact same problem and it turns out that the storybook has a default less rule, so you need to delete that one first before adding your new rule, otherwise the new rule will be ignored!. eg:

const { module = {} } = baseConfig;

// Remove original less loader
baseConfig.module.rules = baseConfig.module.rules.filter(
  f => f.test.toString() !== '/\\.less$/'
);