React + Storybook + SCSS modules not working in storybookjs storybook

Explanation of the problem

The issue encountered is that Storybook fails to build and run after incorporating SCSS compatibility using the SCSS preset.

Steps to Reproduce

1. Create a new React app with Typescript by running the following command:

npx create-react-app my-app --template typescript

2. Add Storybook to the project by executing:

npx sb init

ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".
  ╷
2 │       import API from "!../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
  │                                                                                                  ^
  ╵
  src\stories\button.module.scss 2:98  root stylesheet
    at processResult (C:\workspace\omegafox-components\node_modules\webpack\lib\NormalModule.js:758:19)
    at C:\workspace\omegafox-components\node_modules\webpack\lib\NormalModule.js:860:5
    at C:\workspace\omegafox-components\node_modules\loader-runner\lib\LoaderRunner.js:399:11
    at C:\workspace\omegafox-components\node_modules\loader-runner\lib\LoaderRunner.js:251:18
    at context.callback (C:\workspace\omegafox-components\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
    at Object.loader (C:\workspace\omegafox-components\node_modules\sass-loader\dist\index.js:69:5)
    at runNextTicks (node:internal/process/task_queues:61:5)
    at processImmediate (node:internal/timers:437:9)

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

• Instantly add logs to, set metrics in, and take snapshots of live applications
• Insights delivered straight to your IDE or CLI
• Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for React + Storybook + SCSS modules not working in storybookjs storybook

module: {
  rules: [
    {
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          options: {
            sourceMap: true,
          },
        },
      ],
    },
  ],
},

3. Import your SCSS file in the component file, by adding the following code:

import './YourComponent.scss';

4. If the above steps still do not resolve the issue, try using CSS Modules instead of global SCSS styles. To do this, change the test in the webpack config file to:

test: /\.module\.scss$/

And then import your CSS file in the component file like this:

import styles from './YourComponent.module.scss';

Other popular problems with storybookjs storybook

A brief introduction to storybookjs storybook

Storybook is an open-source tool for building and testing UI components in an isolated environment. It is widely used by developers for creating reusable components, and for showcasing and testing their design and functionality. Storybook is built on top of modern JavaScript frameworks such as React, Vue, and Angular and supports popular CSS-in-JS libraries and static CSS preprocessors.

Storybook provides a centralized environment for developers to manage and document their UI components, making it easier to collaborate with designers, product managers, and other stakeholders. It allows developers to quickly and easily test and showcase their components, and to ensure that they are functioning as expected. Storybook also provides a number of add-ons and plugins, which can be used to enhance its functionality and add new features. These add-ons and plugins allow developers to integrate Storybook with other tools and workflows, making it a powerful tool for building and testing UI components.

Most popular use cases for storybookjs storybook

import { withKnobs, text, boolean } from "@storybook/addon-knobs";

export default {
  title: "Button",
  decorators: [withKnobs],
};

export const withText = () => (
  <Button disabled={boolean("Disabled", false)}>
    {text("Label", "Hello Storybook")}
  </Button>
);