Configure Storybook to work with Next.js, TypeScript, and CSS Modules

README.md

In addition to the Storybook for React setup, you'll also need to install these packages:

npm i -D @babel/core babel-loader css-loader style-loader

main.js

const path = require('path');

module.exports = {
  stories: ['../stories/**/*.stories.js', '../stories/**/*.stories.tsx'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
  presets: [path.resolve(__dirname, './next-preset.js')]
};

next-preset.js

const path = require('path');

module.exports = {
  webpackFinal: async (baseConfig, options) => {
    // Modify or replace config. Mutating the original reference object can cause unexpected bugs.
    const { module = {} } = baseConfig;

    const newConfig = {
      ...baseConfig,
      module: {
        ...module,
        rules: [...(module.rules || [])]
      }
    };

    // TypeScript with Next.js
    newConfig.module.rules.push({
      test: /\.(ts|tsx)$/,
      include: [
        path.resolve(__dirname, '../components'),
        path.resolve(__dirname, '../stories')
      ],
      use: [
        {
          loader: 'babel-loader',
          options: {
            presets: ['next/babel'],
            plugins: ['react-docgen']
          }
        }
      ]
    });
    newConfig.resolve.extensions.push('.ts', '.tsx');

    //
    // CSS Modules
    // Many thanks to https://github.com/storybookjs/storybook/issues/6055#issuecomment-521046352
    //

    // First we prevent webpack from using Storybook CSS rules to process CSS modules
    newConfig.module.rules.find(
      rule => rule.test.toString() === '/\\.css$/'
    ).exclude = /\.module\.css$/;

    // Then we tell webpack what to do with CSS modules
    newConfig.module.rules.push({
      test: /\.module\.css$/,
      include: path.resolve(__dirname, '../components'),
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            importLoaders: 1,
            modules: true
          }
        }
      ]
    });

    return newConfig;
  }
};

preview.js

// If you need global CSS, you can import it here and Storybook will automatically include it in all stories.
// You don't need this if you don't have any global CSS.
import '../src/styles.css';

@justincy thanks for this. Where do main.js, next-preset.js, and preview.js go? Inside of .storybook/?

@kris10cabrera Yes

Thanks. Last question, is Typescript required to use storybook with NextJS? @justincy

@kris10cabrera No

@kris10cabrera I don't believe there's anything special you need to do in order to use Storybook with Next.js if you're not using Typescript.

Thank you @justincy

thaaaanks @justincy

postcss-loader

{
  loader: 'postcss-loader',
  options: {
    sourceMap: true,
    config: {
      path: './.storybook/'
    }
  }
}

my hero

Thanks 🎈

Thank you 🎉

I use scss so I replace CSS module part with this ↓

// SCSS preset for Storybook
 newConfig.module.rules.push({
      test: /\.(s*)css$/,
      loaders: ["style-loader", "css-loader", "sass-loader"],
      include: path.resolve(__dirname, "../src/styles/global.scss"),
 });

Brilliant, thanks for the guide @justincy!

Is there a way to handle SCSS modules?

I've created a "componentname.module.scss" file, and it works in NextJS but can't seem to get it to load in Storybook!

@RichardBosworth See the comment by trinwin about SCSS.

@RichardBosworth See the comment by trinwin about SCSS.

Am I right in thinking that the above only applies to the global SCSS file? I'm trying to get Storybook specifically to work with CSS Modules but using SCSS instead of plain CSS. So my Component file references an "import styles from './componentfile.module.scss'.

Everything works great when I use just plain CSS Modules. But when I try to use sass-loader to load the modules, it throws an error. If I try to pass the options in your original posting to sass-loader, it says that they're incorrect.

@RichardBosworth

Am I right in thinking that the above only applies to the global SCSS file?

I don't believe so. The code snippet appears to be loading both scss and css module files and then explicitly including one global css file.

Did you try it?

@RichardBosworth

Am I right in thinking that the above only applies to the global SCSS file?

I don't believe so. The code snippet appears to be loading both scss and css module files and then explicitly including one global css file.

Did you try it?

So the solution was:

newConfig.module.rules.push({
            test: /\.module\.(s*)css$/,
            include: path.resolve(__dirname, '../components'),
            use: [
                'style-loader',
                {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 1,
                        modules: true,
                    },
                },
                'sass-loader',
            ],
        });

Adding the sass-loader after the css-loader modules bit. Also adding the (s*)css bit.

thanks

Thanks @justincy!

thaaaanks @justincy

postcss-loader

{
  loader: 'postcss-loader',
  options: {
    sourceMap: true,
    config: {
      path: './.storybook/'
    }
  }
}

addition of this for: postcss-loader@4.0.4

{
   loader: "postcss-loader",
	options: {
	   postcssOptions: {
		sourceMap: true,
		config: path.resolve(__dirname, "../postcss.config.js"),
           },
        },
},

I managed to get SCSS modules working with @storybook/preset-scss :

{
  name: '@storybook/preset-scss',
  options: {
    cssLoaderOptions: {
      modules: {
        auto: true
      }
    }
  }
},

Global style import also works in preview.js.

https://github.com/storybookjs/presets/tree/master/packages/preset-scss

EDIT: I added the auto option to css modules to prevent classes in my global files to be scoped.

I managed to get SCSS modules working with @storybook/preset-scss :

{
  name: '@storybook/preset-scss',
  options: {
    cssLoaderOptions: {
      modules: true,
    }
  }
},

Global style import also works in preview.js.

https://github.com/storybookjs/presets/tree/master/packages/preset-scss

The clean solution, thanks @drskullster

Thanks @justincy!

I'm experiencing some issues with Storybook not applying directives (e.g., @apply) correctly, however, it works with NextJS.

Do you have any ideas about this, and do they work for you?

@andymeek I don't use @apply. Are you using Tailwind? I got that working once with @apply by including postcss-loader.

use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            importLoaders: 1,
            modules: true
          }
        }, 'postcss-loader'
      ]

I managed to get SCSS modules working with @storybook/preset-scss :

{
  name: '@storybook/preset-scss',
  options: {
    cssLoaderOptions: {
      modules: {
        auto: true
      }
    }
  }
},

Global style import also works in preview.js.

https://github.com/storybookjs/presets/tree/master/packages/preset-scss

EDIT: I added the auto option to css modules to prevent classes in my global files to be scoped.

This worked for me too! thanks @drskullster

Below is the config I used to get css-modules to work with tailwind + scss + anything you put in postcss- the same as in the SPA via Next.js v10.
Note that I manually installed all of the below packages since I've had some PostCss warnings which indicated I am not passing in any config, which made me suspect PostCss7 was used somewhere below. If you experience the lack of tailwind styling in storybook- that's probably it.
Also note that sass-loader comes last in the loader array.

 const removeIndex = newConfig.module.rules.findIndex(
      (rule) => rule.test.toString() === "/\\.css$/"
    );

    if (removeIndex !== -1) {
      newConfig.module.rules.splice(removeIndex, 1);
    }

    newConfig.module.rules.push({
      test: /\.(s*)css$/,
      loaders: [
        "style-loader",
        {
          loader: "css-loader",
          options: {
            importLoaders: 1,
            modules: { auto: true },
          },
        },
        {
          loader: "postcss-loader",
          options: {
            postcssOptions: {
              config: path.resolve(__dirname, "..", "postcss.config.js"),
            },
          },
        },
        "sass-loader",
      ],
    });

This is my package.json:

"devDependencies": {
    "@storybook/react": "6.1.11",
    "css-loader": "5.0.1",
    "postcss": "8.2.1",
    "postcss-flexbugs-fixes": "5.0.2",
    "postcss-import": "14.0.0",
    "postcss-loader": "4.1.0",
    "postcss-preset-env": "6.7.0",
    "sass": "1.30.0",
    "sass-loader": "10.1.0",
    "style-loader": "2.0.0"
  }

As a result, I was able to use both tailwind and scss syntax in my css modules:

.disabled {
  @apply hover:shadow-none;

  @extend .non-interactive;
}

Make sure you import your global css files in preview.js, the same way your _app component would.

Thanks @justincy

A config for NextJS Absolute Imports and Module path aliases

somewhere convenient in next-preset.js

baseConfig.resolve.alias = {
  ...baseConfig.resolve.alias,
  "@/components": path.resolve(__dirname, "../components"),
};