[Bug]: build error using typescript decorators when upgrade react-vite to 8.0.6

[hulh122]

Describe the bug

Problem

I meet the build error when i use the react-vite@8.0.6.

Reason

In our project, we use the decorators in typescript, such as: @GET export class Service {} After upgrade to 8x and build the storybook, reat-docgen seems meeting some build errors which found that babel should set decoratorsBeforeExport: true. But I can not find a good way to set the babel config to work. I use the setting babel / babelDefault. But not working

To Reproduce

https://stackblitz.com/edit/github-vp3hr9?file=src%2FApp.tsx,src%2Fstories%2FButton.tsx&preset=node

try yarn build-storybook

System

System:
    OS: Linux 4.19 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (232) x64 AMD EPYC 7K83 64-Core Processor
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.5.1 - /usr/bin/node
    npm: 10.4.0 - /usr/bin/npm
    pnpm: 8.15.1 - /usr/bin/pnpm <----- active

Additional context

No response

[TechQuery]

@hulh122 so fast you are, I found the bug almost at the same time.

To Reproduce

• Source code: idea2app/Idea-React#53
• Cloud IDE: https://gitpod.io#https://github.com/idea2app/Idea-React/pull/53

System

  System:
    OS: Windows 10 10.0.19045
    CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
  Binaries:
    Node: 18.17.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.15.1 - C:\Program Files\nodejs\pnpm.CMD <----- active
  Browsers:
    Edge: Chromium (123.0.2420.81)
  npmPackages:
    @storybook/addon-console: ^3.0.0 => 3.0.0
    @storybook/addon-essentials: ^8.0.6 => 8.0.6
    @storybook/addon-interactions: ^8.0.6 => 8.0.6
    @storybook/addon-links: ^8.0.6 => 8.0.6
    @storybook/addon-mdx-gfm: 8.0.6 => 8.0.6
    @storybook/addon-storysource: ^8.0.6 => 8.0.6
    @storybook/blocks: ^8.0.6 => 8.0.6
    @storybook/react: ^8.0.6 => 8.0.6
    @storybook/react-vite: ^8.0.6 => 8.0.6
    @storybook/test: ^8.0.6 => 8.0.6
    storybook: ^8.0.6 => 8.0.6

[valentinpalkovic]

Hi @hulh122

In Storybook 8, we changed the default component analysis tool from react-docgen-typescript to react-docgen. We got a lot of reports that, in some edge cases, the analysis tool doesn't extract component information properly and even leads to breaking stories.

You can read about this in the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-docgen-component-analysis-by-default

I want to try out, whether the error disappears if you use the former default react-docgen-typescript. For that, go to your .storybook/main.js|ts file and configure the following:

export default {
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+  },
};

Please let me know whether this has helped!

In the meantime I try to figure out your options of setting the mentioned babel configuration to allow to parse the decorator before export statements.

[hulh122]

@valentinpalkovic

Sorry, I have tried react-docgen-tyepscript, but it does not work neither.

Here is my result after change reactDocgen to react-docgen-tyepscript:

[vanessayuenn]

After upgrade to 8x and build the storybook, reat-docgen seems meeting some build errors which found that babel should set decoratorsBeforeExport: true. But I can not find a good way to set the babel config to work. I use the setting babel / babelDefault. But not working

One idea to try is to supply your own .babelrc (with the decoratorsBeforeExport configuration) and enable @storybook/addon-webpack5-compiler-babel.

[hulh122]

After upgrade to 8x and build the storybook, reat-docgen seems meeting some build errors which found that babel should set decoratorsBeforeExport: true. But I can not find a good way to set the babel config to work. I use the setting babel / babelDefault. But not working

One idea to try is to supply your own .babelrc (with the decoratorsBeforeExport configuration) and enable @storybook/addon-webpack5-compiler-babel.

@vanessayuenn Is there a plan to support the feature official?

[hieucd04]

I ran into this issue while migrating from react-docgen-typescript to react-docgen. In my case, reverting back to react-docgen-typescript does fix the problem for me, though.