Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Tracked by #26606
hulh122 opened this issue Apr 9, 2024 · 6 comments
Open
Tracked by #26606

Comments

@hulh122
Copy link

hulh122 commented Apr 9, 2024

Describe the bug

Problem

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

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
Copy link

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

To Reproduce

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
Copy link
Contributor

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
Copy link
Author

hulh122 commented Apr 10, 2024

@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:

image

@vanessayuenn
Copy link
Contributor

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
Copy link
Author

hulh122 commented Apr 19, 2024

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?

@hulh122 hulh122 closed this as completed Apr 22, 2024
@hulh122 hulh122 reopened this Apr 22, 2024
@hieucd04
Copy link

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.

bug

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants