[Bug]: @storybook/react-vite configuration for react-docgen doesn't support components that import postcss modules.

[larowlan]

Describe the bug

Have a component like so

import React from "react"
import styles, { stylesheet } from "./Container.module.css"

const Container = ({ children }) => (
  <div>
    {children}
  </div>
)

export default Container;
export stylesheet;

And where the css file contains an @import

@import url("../../css/variables.css");

The babel config passed to react-docgen doesn't take into account the .babelrc file and attempts to parse the .css file as JavaScript.

This causes an error like so

[vite] Internal server error: /path/to/Container.module.css: Support for the experimental syntax 'decorators' isn't currently enabled (1:1):

Is there anyway to configure react-docgen to ignore .css files in this case?
At present have fallen back to disabling it and manually putting description properties on argTypes instead of auto-generating them from propType docblocks.

Note we use rollup-plugin-postcss to allow emitting a single inline critical css component with the exported stylesheets.
We have a vite plugin (See the reproduction code) that does the equivalent.

To Reproduce

https://stackblitz.com/edit/github-cwovgn-yvzreq?file=src%2Fstories%2FButton.jsx

System

Storybook Environment Info:

  System:
    OS: Linux 6.5 Ubuntu 23.10 23.10 (Mantic Minotaur)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1195G7 @ 2.90GHz
    Shell: 5.2.15 - /bin/bash
  Binaries:
    Node: 16.20.1 
    Yarn: 1.22.19
    npm: 8.19.4 
  Browsers:
    Chrome: 120.0.6099.216
  npmPackages:
    @storybook/addon-actions: ^7.6.6 => 7.6.7 
    @storybook/addon-docs: ^7.6.6 => 7.6.7 
    @storybook/addon-essentials: ^7.6.6 => 7.6.7 
    @storybook/addon-links: ^7.6.6 => 7.6.7 
    @storybook/addon-styling: ^1.3.7 => 1.3.7 
    @storybook/addon-viewport: ^7.6.6 => 7.6.7 
    @storybook/addons: ^7.6.6 => 7.6.7 
    @storybook/react: ^7.6.6 => 7.6.7 
    @storybook/react-vite: ^7.6.6 => 7.6.7 
    @storybook/theming: ^7.6.6 => 7.6.7 
    eslint-plugin-storybook: ^0.6.15 => 0.6.15 
    storybook: ^7.6.6 => 7.6.7

Additional context

We're exporting the stylesheet so we can get reliable class names from CSS modules and combine them into a single critical CSS file that we inline.

[valentinpalkovic]

This error is pretty strange. I would assume that react-docgen just ignores CSS files and should not try to import them. I would suggest opening an issue at https://github.com/reactjs/react-docgen instead and linking this one for reference.

[shilman]

Your Stackblitz reproduction fails before it gets to this point, so I cannot verify the behavior.

However, looking at the code, you are using 7.6 and have not specified an alternative typescript.reactDocgen in your main.js, so your project is using react-docgen-typescript by default. In 8.0 the default will switch to react-docgen. You might try setting it to react-docgen instead to see if that fixes it.

https://storybook.js.org/docs/api/main-config-typescript#reactdocgen

[larowlan]

Thanks for getting back to me, appreciate it.

Your Stackblitz reproduction fails before it gets to this point, so I cannot verify the behavior.

I hadn't saved the stackblitz, I've updated it and it is now showing the error. View the Button story to trigger it.

However, looking at the code, you are using 7.6 and have not specified an alternative typescript.reactDocgen in your main.js, so your project is using react-docgen-typescript by default. In 8.0 the default will switch to react-docgen. You might try setting it to react-docgen instead to see if that fixes it.

I tried it with react-docgen locally instead of react-docgen-typescriptand it did not help. I updated the stackblitz too.

I would assume that react-docgen just ignores CSS files and should not try to import them. I would suggest opening an issue at https://github.com/reactjs/react-docgen instead and linking this one for reference.

Thanks, will do

[github-actions]

Hi there! Thank you for opening this issue, but it has been marked as stale because we need more information to move forward. Could you please provide us with the requested reproduction or additional information that could help us better understand the problem? We'd love to resolve this issue, but we can't do it without your help!

[larowlan]

Hey, is there any more information I can provide here?

[thenoiro]

Have the same case, may be useful:
Bug disappeared when I use style variables directly instead of re-export them from another file:

With re-export:

Without re-export:

[larowlan]

Thanks, I'm using the export unfortunately, to compile a separate CriticalCss component that imports the built stylesheet (with classes)

[erikt9]

Just adding I get this same error without using vite (just @storybook/react-webpack5).
Exporting a style seems to trigger it:

import styles from './styles.module.css'

.
.
.

export const rightAlignedExpander = styles.rightAlignedExpander; // commenting this out removes the error -- story builds fine otherwise, just errors with react-docgen

[ndelangen]

I think this relates to:
#26109
reactjs/react-docgen#892