[Bug]: Storybook 8: [storybook:react-docgen-plugin] Leading decorators must be attached to a class declaration in scss

[dartess]

Describe the bug

When I try to build I got:

[storybook:react-docgen-plugin] <...>/Some.module.scss: Leading decorators must be attached to a class declaration. (1:5)

> 1 | @use 'themes';
    |      ^
  2 | @use 'colors';
  3 |
  4 | $vertical-padding: 14px;
file: <...>/Some.tsx:1:5
=> Failed to build the preview
SyntaxError: ./<...>/Some.module.scss: Leading decorators must be attached to a class declaration. (1:5)

> 1 | @use 'themes';
    |      ^
  2 | @use 'colors';
  3 |
  4 | $vertical-padding: 14px;
    at constructor (./node_modules/@babel/parser/lib/index.js:356:19)
    at JSXParserMixin.raise (./node_modules/@babel/parser/lib/index.js:3223:19)
    at JSXParserMixin.parseDecorators (./node_modules/@babel/parser/lib/index.js:12790:18)
    at JSXParserMixin.parseStatementLike (./node_modules/@babel/parser/lib/index.js:12586:25)
    at JSXParserMixin.parseModuleItem (./node_modules/@babel/parser/lib/index.js:12565:17)
    at JSXParserMixin.parseBlockOrModuleBlockBody (./node_modules/@babel/parser/lib/index.js:13189:36)
    at JSXParserMixin.parseBlockBody (./node_modules/@babel/parser/lib/index.js:13182:10)
    at JSXParserMixin.parseProgram (./node_modules/@babel/parser/lib/index.js:12464:10)
    at JSXParserMixin.parseTopLevel (./node_modules/@babel/parser/lib/index.js:12454:25)
    at JSXParserMixin.parse (./node_modules/@babel/parser/lib/index.js:14376:10)
    at parse (./node_modules/@babel/parser/lib/index.js:14396:26)
    at parser (./node_modules/@babel/core/lib/parser/index.js:41:34)
    at parser.next (<anonymous>)
    at parse (./node_modules/@babel/core/lib/parse.js:25:37)
    at parse.next (<anonymous>)
    at evaluateSync (./node_modules/gensync/index.js:251:28)
    at sync (./node_modules/gensync/index.js:89:14)
    at stopHiding - secret - don't use this - v1 (./node_modules/@babel/core/lib/errors/rewrite-stack-trace.js:47:12)
    at parseSync (./node_modules/@babel/core/lib/parse.js:40:72)
    at babelParser (./node_modules/react-docgen/dist/babelParser.js:78:41)
    at FileState.parse (./node_modules/react-docgen/dist/FileState.js:101:48)
    at FileState.resolveImportedValue (./node_modules/react-docgen/dist/importer/makeFsImporter.js:119:23)
    at FileState.import (./node_modules/react-docgen/dist/FileState.js:92:67)
    at findScopePath (./node_modules/react-docgen/dist/utils/resolveToValue.js:61:57)
    at resolveToValue (./node_modules/react-docgen/dist/utils/resolveToValue.js:106:24)
    at resolveToValue (./node_modules/react-docgen/dist/utils/resolveToValue.js:123:22)
    at resolveHOC (./node_modules/react-docgen/dist/utils/resolveHOC.js:48:59)
    at findComponentDefinition (./node_modules/react-docgen/dist/utils/findComponentDefinition.js:64:85)
    at ./node_modules/react-docgen/dist/resolver/FindExportedDefinitionsResolver.js:44:67
    at Array.forEach (<anonymous>)
    at Object.exportDeclaration (./node_modules/react-docgen/dist/resolver/FindExportedDefinitionsResolver.js:43:54)
    at NodePath._call (./node_modules/@babel/traverse/lib/path/context.js:46:20)
    at NodePath.call (./node_modules/@babel/traverse/lib/path/context.js:36:17)
    at NodePath.visit (./node_modules/@babel/traverse/lib/path/context.js:82:31)
    at TraversalContext.visitQueue (./node_modules/@babel/traverse/lib/context.js:86:16)
    at TraversalContext.visitMultiple (./node_modules/@babel/traverse/lib/context.js:61:17)
    at TraversalContext.visit (./node_modules/@babel/traverse/lib/context.js:107:19)
    at traverseNode (./node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at NodePath.visit (./node_modules/@babel/traverse/lib/path/context.js:88:52)
    at TraversalContext.visitQueue (./node_modules/@babel/traverse/lib/context.js:86:16)
    at TraversalContext.visitSingle (./node_modules/@babel/traverse/lib/context.js:65:19)
    at TraversalContext.visit (./node_modules/@babel/traverse/lib/context.js:109:19)
    at traverseNode (./node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at traverse (./node_modules/@babel/traverse/lib/index.js:52:34)
    at FileState.traverse (./node_modules/react-docgen/dist/FileState.js:112:5)
    at FindExportedDefinitionsResolver.resolve (./node_modules/react-docgen/dist/resolver/FindExportedDefinitionsResolver.js:88:10)
    at runResolver (./node_modules/react-docgen/dist/resolver/utils/runResolver.js:30:47)
    at parse (./node_modules/react-docgen/dist/parse.js:57:63)
    at defaultParse (./node_modules/react-docgen/dist/main.js:55:35)
    at Object.transform (./node_modules/@storybook/react-vite/dist/preset.js:1:2727)

But storybook dev works fine.

To Reproduce

No response

System

No response

Additional context

SB 8.0.0-beta.3

[valentinpalkovic]

For some reason, react-docgen wants to parse your CSS files, which it shouldn't. Can you provide a minimal reproduction?

[dartess]

@valentinpalkovic so!

Repl: https://github.com/dartess/sb8-repl-react-docgen-plugin-bug

run npm run build and see:

SyntaxError: ./src/Header/Header.module.scss: Unexpected token (1:0)

> 1 | :export {
    | ^
  2 |   height: 10px;
  3 | }
  4 |

The error is different because I removed the extra code. But the problem is the same: trying to parse css as js.

Important: if you replace

export const HEADER_HEIGHT = parseInt(styles.height, 10);

with

const HEADER_HEIGHT = parseInt(styles.height, 10);

the build is successful.
No idea how this happens.

[ndelangen]

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

[ndelangen]

OK, I've done some research, and was able to make react-docgen ignore certain files.

I'll open a PR with a fix for storybook's react-vite framework.