Storybook: Can't configure it with CSS Module and PostCSS

[CloudPower97]

Describe the bug
I'm trying to use CSS Modules with PostCSS, but I'm experiencing a lot of problem configuring webpack.config.js up.

To Reproduce
It's a fresh installation of storybook.
Just head over to your .storybook folder and add a webpack.config.js file.

I've tried :

const path = require('path')

module.exports = (baseConfig, env, defaultConfig) => {
  defaultConfig.module.rules.push({
    test: /\.module\.css$/,
    include: path.resolve(__dirname, '../'),
    use: [
      {
        loader: 'style-loader',
      },
      {
        loader: 'css-loader',
        options: {
          importLoaders: 1,
          modules: true,
          localIdentName: '[name]__[local]___[hash:base64:5]',
        },
      },
      {
        loader: 'postcss-loader',
        options: {
          config: {
            path: path.resolve(__dirname, '../'),
          },
        },
      },
    ],
  })

  defaultConfig.resolve.alias = {
    components: path.join(path.resolve(__dirname, '../'), 'src', 'components'),
    containers: path.join(path.resolve(__dirname, '../'), 'src', 'containers'),
    hoc: path.join(path.resolve(__dirname, '../'), 'src', 'hoc'),
    style: path.join(path.resolve(__dirname, '../'), 'src', 'style'),
    libs: path.join(path.resolve(__dirname, '../'), 'src', 'libs'),
    assets: path.join(path.resolve(__dirname, '../'), 'src', 'assets'),
    vendor: path.join(path.resolve(__dirname, '../'), 'src', 'vendor'),
  }

  defaultConfig.externals = {
    jsdom: 'window',
    cheerio: 'window',
    'react/lib/ExecutionEnvironment': true,
    'react/lib/ReactContext': 'window',
    'react/addons': true,
  }

  return defaultConfig
}

and this one:

module.exports = {
  module: {
    rules: [
      {
        test: /\.module\.css$/,
        include: path.resolve(__dirname, '../'),
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: true,
              localIdentName: '[name]__[local]___[hash:base64:5]',
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              config: {
                path: path.resolve(__dirname, '../'),
              },
            },
          },
        ],
      },
    ],
  },
  resolve: {
    alias: {
      components: path.join(path.resolve(__dirname, '../'), 'src', 'components'),
      containers: path.join(path.resolve(__dirname, '../'), 'src', 'containers'),
      hoc: path.join(path.resolve(__dirname, '../'), 'src', 'hoc'),
      style: path.join(path.resolve(__dirname, '../'), 'src', 'style'),
      libs: path.join(path.resolve(__dirname, '../'), 'src', 'libs'),
      assets: path.join(path.resolve(__dirname, '../'), 'src', 'assets'),
      vendor: path.join(path.resolve(__dirname, '../'), 'src', 'vendor'),
    },
  },
  externals: {
    jsdom: 'window',
    cheerio: 'window',
    'react/lib/ExecutionEnvironment': true,
    'react/lib/ReactContext': 'window',
    'react/addons': true,
  },
}

with no luck.

Everything else works just fine.

This is driving me crazy!

Here is the error it gives me:

ERROR in ./src/components/FeatureCard/FeatureCard.module.css (./node_modules/react-scripts/node_modules/css-loader??ref--9-1!./node_modules/postcss-loader/src??postcss!./node_modules/style-loader!./node_modules/css-loader??ref--12-1!./node_modules/postcss-loader/src??ref--12-2!./src/components/FeatureCard/FeatureCard.module.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError

(2:1) Unknown word

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

 @ ./src/components/FeatureCard/FeatureCard.module.css 2:14-347 21:1-42:3 22:19-352
 @ ./src/components/FeatureCard/FeatureCard.js
 @ ./src/components/FeatureCard/FeatureCard.stories.js
 @ ./src sync .stories.js$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/server/config/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true
Child HtmlWebpackCompiler:
                          Asset     Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  559 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/@storybook/core/node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core/dist/server/templates/index.ejs] 1.62 KiB {HtmlWebpackPlugin_0} [built]
    [./node_modules/@storybook/core/node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {HtmlWebpackPlugin_0} [built]
    [./node_modules/@storybook/core/node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 519 bytes {HtmlWebpackPlugin_0} [built]
    [./node_modules/lodash/lodash.js] 527 KiB {HtmlWebpackPlugin_0} [built]
ℹ ｢wdm｣: Failed to compile.

Any help is much appreciated!
Thanks in advance and keep up the good work!

System:

• OS: ArchLinux
• Device: Xiaomi ProBook 15.6
• Browser: Version 70.0.3538.77 (Official Build) (64-bit)
• Framework: React 16.5.2
• Version: 4.0.9

[igor-dv]

Default config already has partially css rules supported. If you are using CRA2 it even brings more css rules... So you probably need to replace/disable the css rules that are already coming from the defaultConfig.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[jsomdev]

Was there any solution @CloudPower97 ? I am having the same issue

[ahahn95]

Having this same issue!

[iamjaredwalters]

Running into this issue as well ;(

[iamjaredwalters]

Success. I was able to make get this working using this config:

const path = require('path');

// Export a function. Accept the base config as the only param.
module.exports = async ({ config, mode }) => {
  // `mode` has a value of 'DEVELOPMENT' or 'PRODUCTION'
  // You can change the configuration based on that.
  // 'PRODUCTION' is used when building the static version of storybook.

  // Make whatever fine-grained changes you need
  config.module.rules.push({
    test: /\.module\.css$/,
    exclude: /\.module\.css$/,
    use: ['style-loader', 'css-loader'],
    include: path.resolve(__dirname, '../'),
  });

  // Return the altered config
  return config;
};