Storybook [next.js] does not apply class names

[deema089786]

Steps to reproduce

Code Sandbox: https://replit.com/join/kmltgscaty-deema089786

Current behavior

Storybook stories do not display components with applied class names

Expected behavior

Storybook stories display components with applied class names

Context

Im trying to create new project based on NX, Nextjs, Storybook and Pigment CSS.
Storybook does not applied class names to styled components created via pigment-css.

When I just run my next.js app everything is working fine

When I run Storybook with "Vite" framework everything is working as expected (styled components displayed with class names and correct styles)

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

<System:
OS: macOS 14.5
CPU: (10) arm64 Apple M1 Max
Memory: 4.01 GB / 32.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
Managers:
CocoaPods: 1.14.3 - /opt/homebrew/bin/pod
Homebrew: 4.2.1 - /opt/homebrew/bin/brew
pip3: 21.2.4 - /usr/bin/pip3
RubyGems: 3.0.3.1 - /usr/bin/gem
Utilities:
Make: 3.81 - /usr/bin/make
GCC: 15.0.0 - /usr/bin/gcc
Git: 2.39.0 - /opt/homebrew/bin/git
Clang: 15.0.0 - /usr/bin/clang
Curl: 8.6.0 - /usr/bin/curl
OpenSSL: 3.2.0 - /opt/homebrew/bin/openssl
Servers:
Apache: 2.4.58 - /usr/sbin/apachectl
Virtualization:
Docker: 20.10.23 - /usr/local/bin/docker
Docker Compose: 2.15.1 - /usr/local/bin/docker-compose
SDKs:
iOS SDK:
Platforms: DriverKit 23.2, iOS 17.2, macOS 14.2, tvOS 17.2, watchOS 10.2
Android SDK:
API Levels: 33, 34
Build Tools: 30.0.3, 34.0.0
System Images: android-34 | Google APIs ARM 64 v8a
IDEs:
Android Studio: Hedgehog 2023.1.1 Patch 1 Hedgehog 2023.1.1 Patch 1
Vim: 9.0 - /usr/bin/vim
Xcode: 15.1/15C65 - /usr/bin/xcodebuild
Languages:
Bash: 3.2.57 - /bin/bash
Java: 17.0.9 - /usr/bin/javac
Perl: 5.34.1 - /usr/bin/perl
Python3: 3.9.6 - /usr/bin/python3
Ruby: 2.6.10 - /usr/bin/ruby
Databases:
PostgreSQL: 14.9 - /opt/homebrew/bin/postgres
SQLite: 3.43.2 - /usr/bin/sqlite3
Browsers:
Chrome: 125.0.6422.141
Safari: 17.5

Search keywords: nextjs storybook

[Sephster]

It also breaks rendering if you use const StyledLink = styled.a instead of const StyledLink = styled('a') with the following message:

pigment_css_react__WEBPACK_IMPORTED_MODULE_2_.styled.a is not a function

[matthewwasbrough-cognitant]

I know this question is coming from the nextjs/vite setup. My answer is a fix for the nextjs/webpack/typescript build.

In my initial setup I got the same issue showing <h1 class>Main heading</h1> without the class name.

There is no pigment-css/webpack-loader that I could find (if I missed something then please let me know and I'll update the docs). Having played around with linaria, which also is built on wyw-in-js, I tried the @wyw-in-js/webpack-loader which just lead to errors. What I had missed was to include was a .babelrc that forced storybook to use babel and solved my issue.

My .babelrc is

{
  "presets": ["next/babel"]
}

and for anyone looking for how to use the webpack-loader in .storybook/main.ts include the following:

const config: StorybookConfig = {
  ..., // other storybook config
  webpackFinal: async (config, { configType }) => {
    // @ts-ignore
    config.module.rules.push({
      test: /\.(tsx|ts|js|mjs|jsx)$/,
      use: [
        {
          loader: require.resolve('@wyw-in-js/webpack-loader'),
          options: {
            sourceMap: false,
          },
        },
      ],
      exclude: [
        /node_modules/,
        path.resolve(process.cwd(), 'storybook-stories.js'),
        path.resolve(process.cwd(), 'storybook-config-entry.js'),
      ],
    });
    return config;
  },
};
export default config;

[netdown]

@matthewwasbrough-cognitant Great, thank you! Have you also managed to make theming work?

[matthewwasbrough-cognitant]

@matthewwasbrough-cognitant Great, thank you! Have you also managed to make theming work?

@netdown I had to put my playing with this on hold so I didn't look at theming yet.