Storybook: postcss-loader cause errors with react-calendar module

[esbenvb]

Describe the bug
I am trying to introduce storybook on a web app which use typescript and scss.

To Reproduce
When I use the sample story (with two buttons), it works fine. However, when I try mounting one of our existing components in the story, I get the following compile error:

ERROR in ./node_modules/react-calendar/dist/Calendar.css (./node_modules/@storybook/core/node_modules/css-loader??ref--6-1!./node_modules/postcss-loader/src??postcss!./node_modules/style-loader!./node_modules/css-loader!./node_modules/react-calendar/dist/Calendar.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError

(2:1) Unknown word

  1 |
> 2 | var content = require("!!../../css-loader/index.js!./Calendar.css");
    | ^
  3 |
  4 | if(typeof content === 'string') content = [[module.id, content, '']];

 @ ./node_modules/react-calendar/dist/Calendar.css 2:14-203 21:1-42:3 22:19-208
 @ ./node_modules/react-calendar/dist/entry.js
 @ ./src/components/yyyyyy/components/zzzDate/zzzDateDesktop.tsx
 @ ./src/components/yyyyyy/components/zzzDate/zzzDate.tsx
 @ ./src/components/yyyyyy/index.tsx
 @ ./src/views/xxxxxxxxxxxxxxx/components/Tax.tsx
 @ ./src/views/xxxxxxxxxxxxxxx/components/Laundry.stories.tsx
 @ ./.storybook/config.ts

Code snippets
the webpack.config of the react project:

const merge = require("webpack-merge");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const Dotenv = require("dotenv-webpack");
const PACKAGE = require("./package.json");
const StyleLintPlugin = require("stylelint-webpack-plugin");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const path = require("path");

const commonConfig = {
    entry: "./src/index.tsx",
    output: {
        filename: PACKAGE.name + ".js",
        path: __dirname + "/build/dist"
    },
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".json", ".scss"]
    },
    module: {
        rules: [
            { test: /\.tsx?$/, use: ["awesome-typescript-loader"] },
            { enforce: "pre", test: /\.js$/, use: ["source-map-loader"] },
            { test: /\.css$/, use: ["style-loader", "css-loader"] },
            {
                test: /\.scss$/,
                include: [path.resolve(__dirname, "src/styles")],
                exclude: [path.resolve(__dirname, "src/components"), path.resolve(__dirname, "src/views")],
                use: ["style-loader", "css-loader", "sass-loader"]
            },
            {
                test: /\.scss$/,
                exclude: [path.resolve(__dirname, "src/styles")],
                use: ["style-loader", "css-loader?modules&localIdentName=[name]__[local]___[hash:base64:5]", "sass-loader"]
            },
            {
                test: /\.(jpg|png|gif|svg)$/i,
                use: [
                    "url-loader?limit=4096&hash=sha512&digest=hex&name=assets/[name]-[hash].[ext]",
                    "image-webpack-loader?disable&optipng.optimizationLevel=7&gifsicle.interlaced=false"
                ]
            }
        ]
    },
    plugins: [new HtmlWebpackPlugin({ template: "./src/index.html" }), new Dotenv()],
    externals: {
        react: "React",
        "react-dom": "ReactDOM"
    },
    optimization: {
        minimizer: [new UglifyJsPlugin()],
        splitChunks: {
            chunks: "all",
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    priority: 2,
                    name: "vendor",
                    enforce: true,
                    chunks: "all"
                },
                shared: {
                    test: /shared[\\/]src[\\/]components/,
                    priority: 3,
                    name: "shared",
                    enforce: true,
                    chunks: "all"
                }
            }
        }
    }
};

module.exports = [
    merge(commonConfig, {
        name: "serve",
        mode: "development",
        devtool: "source-map",
        output: {
            publicPath: "/"
        },
        plugins: [
            new StyleLintPlugin(),
            new BundleAnalyzerPlugin({
                openAnalyzer: false
            })
        ],
        devServer: {
            port: 9000,
            historyApiFallback: true,
            proxy: {
                "/api": {
                    target: "http://xxxxxx",
                    pathRewrite: {
                        "/api": ""
                    }
                }
            }
        }
    }),
    merge(commonConfig, {
        name: "build",
        mode: "production",
        devtool: "source-map"
    })
];

And the webpack.config.js of storybook

// you can use this file to add your custom webpack plugins, loaders and anything you like.
// This is just the basic way to add additional webpack configurations.
// For more information refer the docs: https://storybook.js.org/configurations/custom-webpack-config

// IMPORTANT
// When you add this file, we won't add the default configurations which is similar
// to "React Create App". This only has babel loader to load JavaScript.
const path = require("path");

module.exports = (baseConfig, env, config) => {
    config.module.rules.push(
        { test: /\.tsx?$/, use: ["awesome-typescript-loader"] },
        { enforce: "pre", test: /\.js$/, use: ["source-map-loader"] },
        { test: /\.css$/, use: ["style-loader", "css-loader"] },
        {
            test: /\.scss$/,
            include: [path.resolve(__dirname, "src/styles")],
            exclude: [path.resolve(__dirname, "src/components"), path.resolve(__dirname, "src/views")],
            use: ["style-loader", "css-loader", "sass-loader"]
        },
        {
            test: /\.scss$/,
            exclude: [path.resolve(__dirname, "src/styles")],
            use: ["style-loader", "css-loader?modules&localIdentName=[name]__[local]___[hash:base64:5]", "sass-loader"]
        },
        {
            test: /\.(jpg|png|gif|svg)$/i,
            use: [
                "url-loader?limit=4096&hash=sha512&digest=hex&name=assets/[name]-[hash].[ext]",
                "image-webpack-loader?disable&optipng.optimizationLevel=7&gifsicle.interlaced=false"
            ]
        }
    );
    config.resolve.extensions.push(".ts", ".tsx", ".js", ".json", ".scss");
    return config;
};

System:

• OS: Windows 7
• Device: Dell laptop
• Browser: Chrome
• Framework: React 16.5.2,
• Version: 4.0.12

[igor-dv]

The config object you use is already having some css rules. You should replace them or just use the baseConfig (the first param)

[esbenvb]

Thanks, that solved the problem!