Error importing CSS modules with Storybook webpack 5

Question

I am using Storybook with webpack 5 for a simple project and I'm having challenges with CSS module imports despite customising the webpack config for storybook.

(2:7) src/stories/header.css Unknown word

  1 | 
> 2 |       import API from "!../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
    |       ^
  3 |       import domAPI from "!../../node_modules/style-loader/dist/runtime/styleDomAPI.js";
  4 |       import insertFn from "!../../node_modules/style-loader/dist/runtime/insertBySelector.js";

    at processResult (./node_modules/webpack/lib/NormalModule.js:743:19)
    at ./node_modules/webpack/lib/NormalModule.js:844:5
    at ./node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at ./node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (./node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (./node_modules/@storybook/builder-webpack5/node_modules/css-loader/dist/index.js:155:5)
    at runNextTicks (node:internal/process/task_queues:61:5)
    at processImmediate (node:internal/timers:437:9)
ModuleBuildError: Module build failed (from ./node_modules/@storybook/builder-webpack5/node_modules/css-loader/dist/cjs.js):
CssSyntaxError

My main.js file looks like this

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  framework: '@storybook/react',
  core: {
    builder: 'webpack5',
  },
  webpackFinal: async (config, { configType }) => {
    const path = require('path');

    config.module.rules.push({
      test: /\.css$/,
      use: ['style-loader', 'css-loader'],
      include: path.resolve(__dirname, '../src'),
    });
    return config;};
  },
};

Answer 1

I had exactly the same error and it was caused by accidentally using the @nrwl/react/plugins/storybook twice, which lead to duplicate webpack loader rules so I am guessing that framework: '@storybook/react' already sets up loaders for .css files and then you are adding your own loader here

config.module.rules.push({
  test: /\.css$/,
  use: ['style-loader', 'css-loader'],
  include: path.resolve(__dirname, '../src'),
});

which first uses css-loader, then style-loader and then it gets passed to the rule that is already in place by the @storybook/react framework which again uses css-loader, but the input of this loader is the output of the style-loader from your rule. You can actually see this in the error

(2:7) src/stories/header.css Unknown word

  1 | 
> 2 |       import API from "!../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
    |       ^
  3 |       import domAPI from "!../../node_modules/style-loader/dist/runtime/styleDomAPI.js";
  4 |       import insertFn from "!../../node_modules/style-loader/dist/runtime/insertBySelector.js";

because css-loader is expecting a CSS file but style-loader outputs JS file and therefore it throws error Unknown word because import is invalid CSS word.

So to fix you issue, you probably need to remove your custom rule for CSS files, because it's already included in the rules.