This article is about fixing React + Storybook + SCSS modules not working in storybookjs storybook
  • 08-Feb-2023
Lightrun Team
Author Lightrun Team
This article is about fixing React + Storybook + SCSS modules not working in storybookjs storybook

React + Storybook + SCSS modules not working in storybookjs storybook

Lightrun Team
Lightrun Team

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
  1. Add Storybook to the project by executing:
npx sb init
  1. Enable SCSS compatibility in Storybook by utilizing the SCSS preset.

Error Message

The error encountered upon executing npm run storybook is as follows:

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)

Note: The attempt to resolve the issue using npx sb@next repro was unsuccessful.

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

There are a few possible solutions to this issue. Here are some steps to try:

  1. Make sure you have correctly installed and configured the necessary dependencies and plugins, including “@storybook/react”, “@storybook/addon-actions”, “@storybook/addon-links”, and “node-sass”.
  2. Configure your webpack config file to handle SCSS files, by adding the following code:
module: {
  rules: [
      test: /\.scss$/,
      use: [
          loader: 'sass-loader',
          options: {
            sourceMap: true,
  1. Import your SCSS file in the component file, by adding the following code:
import './YourComponent.scss';
  1. 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';

These steps should resolve the issue with SCSS modules not working in Storybook. If you are still facing problems, it is best to check the Storybook documentation or seek help from the Storybook community.

Other popular problems with storybookjs storybook

Problem: Configuration Issues

One of the most common problems with Storybook is improper configuration. This can lead to issues with missing dependencies, incorrect file paths, and other similar problems.


The solution to this issue is to carefully follow the instructions in the Storybook documentation, including the setup and configuration of your project. It’s also a good idea to double-check your configurations to make sure that everything is correctly set up.

Problem: Components Not Rendering

Another common issue with Storybook is components not rendering properly. This can be caused by a number of things, including incorrect import statements, missing dependencies, and issues with your component’s structure.


To solve this issue, carefully check your code and make sure that all required dependencies are installed and imported correctly. It’s also a good idea to run a quick test with a simple component to make sure that Storybook is functioning properly.

Problem: Inconsistent State Management

Inconsistent state management can be a problem in Storybook, especially when working with complex components. This can lead to unexpected results and behavior, making it difficult to test and debug your components.


To solve this issue, it’s recommended to use a state management solution, such as Redux or MobX, to manage your component’s state consistently. Additionally, make sure to isolate your component’s state from the rest of your application, which will make it easier to test and debug.

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

  1. Building and Testing UI Components:

Storybook can be used for building and testing UI components in an isolated environment. This allows developers to create, refine, and test components without having to worry about the surrounding context or other dependencies. Storybook also provides an interactive environment for showcasing and testing components, making it easier to demonstrate the design and functionality of components to stakeholders.

  1. Documenting UI Components:

Storybook can also be used for documenting UI components. This can help ensure that components are well-documented and easy to understand, especially for new team members or other stakeholders. Storybook also provides a centralized place for storing and organizing documentation, making it easier to find and access.

  1. Enhancing UI Components with Add-ons:

Storybook provides a number of add-ons and plugins that can be used to enhance its functionality and add new features. For example, developers can use the Knobs add-on to easily manipulate the props of a component, or the Actions add-on to log the interactions with a component. Here’s an example of how to use the Knobs add-on in 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")}

It’s Really not that Complicated.

You can actually understand what’s going on inside your live applications.

Try Lightrun’s Playground

Lets Talk!

Looking for more information about Lightrun and debugging?
We’d love to hear from you!
Drop us a line and we’ll get back to you shortly.

By submitting this form, I agree to Lightrun’s Privacy Policy and Terms of Use.