storybook: [Bug]: Unable to start Storybook 6.5.x for react after upgrade Typescript to 5.+
Describe the bug
I’m currently on Storybook 6.5.16 for React.
After upgrading Typescript to version 5.0.2, the following errors are throwing when I start storybook:
70% sealing plugins DocGenPlugin/dev/node_modules/@storybook/react-docgen-typescript-plugin/dist/generateDocgenCodeBlock.js:37
return insertTsIgnoreBeforeStatement(typescript_1.default.createExpressionStatement(typescript_1.default.createBinary(typescript_1.default.createPropertyAccess(typescript_1.default.createIdentifier(d.displayName), typescript_1.default.createIdentifier("displayName")), typescript_1.default.SyntaxKind.EqualsToken, typescript_1.default.createLiteral(d.displayName))));
^
TypeError: typescript_1.default.createIdentifier is not a function
at setDisplayName (/dev/node_modules/@storybook/react-docgen-typescript-plugin/dist/generateDocgenCodeBlock.js:37:186)
To Reproduce
clone https://github.com/annidai/default-ts yarn && yarn storybook
System
Environment Info:
System:
OS: macOS 13.1
CPU: (10) arm64 Apple M1 Pro
Binaries:
Node: 16.18.1 - ~/.volta/tools/image/node/16.18.1/bin/node
Yarn: 1.22.19 - ~/Development/eblock-web/node_modules/.bin/yarn
npm: 8.19.2 - ~/.volta/tools/image/node/16.18.1/bin/npm
Browsers:
Chrome: 111.0.5563.64
Firefox: 109.0
Safari: 16.2
npmPackages:
@storybook/addon-actions: 6.5.16 => 6.5.16
@storybook/addon-console: 1.2.3 => 1.2.3
@storybook/addon-essentials: 6.5.16 => 6.5.16
@storybook/addon-links: 6.5.16 => 6.5.16
@storybook/builder-webpack5: 6.5.16 => 6.5.16
@storybook/manager-webpack5: 6.5.16 => 6.5.16
@storybook/node-logger: 6.5.16 => 6.5.16
@storybook/react: 6.5.16 => 6.5.16
Additional context
No response
About this issue
- Original URL
- State: closed
- Created a year ago
- Reactions: 45
- Comments: 21 (5 by maintainers)
Commits related to this issue
- fix(docs): tsc Related issue https://github.com/storybookjs/storybook/issues/21642 — committed to dooboolab-community/dooboo-ui by hyochan a year ago
- chore: fix storybook there was a breaking change with TS 5.X https://github.com/storybookjs/storybook/issues/21642 — committed to pass-culture/pass-culture-app-native by voisinhugo 4 months ago
- chore: fix storybook there was a breaking change with TS 5.X https://github.com/storybookjs/storybook/issues/21642 — committed to pass-culture/pass-culture-app-native by voisinhugo 4 months ago
- chore: fix storybook there was a breaking change with TS 5.X https://github.com/storybookjs/storybook/issues/21642 — committed to pass-culture/pass-culture-app-native by voisinhugo 4 months ago
Workarounds:
package json:
See also here: https://github.com/hipstersmoothie/react-docgen-typescript-plugin/issues/78#issuecomment-1409224863.
The solution provided there worked for me when dealing with the issue.
Ta-da!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.17-alpha.0 containing PR #21745 that references this issue. Upgrade today to the
@prereleaseNPM tag to try it out!Closing this issue. Please re-open if you think there’s still more to do.
Great workaround! 👍 With Node v18.14.1, Typescript 5.0.2 and @storybook/react 6.5.16, just adding
seems to be enough to fix the build. I’m not sure whether
cross-env NODE_OPTIONS=--openssl-legacy-provideris necessary 🤔.I can confirm that this is not fixed with the combination of SB 7.0.7 and TS 5.0.4.
ModuleBuildError: Module build failed (from ../../node_modules/react-docgen-typescript-loader/dist/index.js):TypeError: typescript_1.default.createIdentifier is not a functionat setDisplayName (/home/opc/jet/node_modules/react-docgen-typescript-loader/dist/generateDocgenCodeBlock.js:62:174)at /home/opc/jet/node_modules/react-docgen-typescript-loader/dist/generateDocgenCodeBlock.js:38:32...None of the above solutions worked for me but, this worked! Thanks!
I have a private React project that fails to start with SB 6.5+TS 5.0, and succeeds with SB 7+TS 5.0 (and SB 6.5+TS 4.9)
In other words: Yes this seems to be fixed in Storybook 7.0
@ryami333 Storybook 7 is in RC so if it works there then that would be useful info to know. I doubt we’ll fix in 6.5 since it risks destabilizing that release for current users. I know that the latest version of react-docgen-typescript-plugin is buggy since I’ve fixed some of those bugs in our fork. It’s not as simple as bumping the version.
@shilman are there any further steps other than updating the package?
With this prerelease package, Storybook starts without errors, but the controls from 3rd party libs are gone (it was working for me with Storybook 6.5 and TypeScript 4).
What I mean by 3rd party is that I’m wrapping MUI components (which use
forwardRef, not sure if that’s relevant but I saw that there are other tickets aboutforwardRefand Storybook 7, like #21686)Here’s an example:
A simple Story that loads this Breadcrumbs component gives me “No inputs found for this component”
My
main.jshasreactDocgen: 'react-docgen-typescript'set, which was working with TypeScript 4@shilman I see that you added the “Needs more info” tag - can you please share which info is required? This looks pretty cut-and-dry to me: there were deprecation warnings long before Typescript 5 was actually released when you ran Storybook:
So we know exactly why it’s now broken - Typescript 5 dropped those methods entirely, but there was never an update to the dependencies of
@storybook/react(specifically@storybook/react-docgen-typescript-plugin) to address it. Whether it’s fixed in Storybook 7 or not is irrelevant - that’s not a stable release of Storybook, whereas Typescript 5 is a stable (current) release of Typescript.I think this is fixed in 7.0 already. Can anybody please try upgrading & report back? Many thanks! 🙏
Migration guide: https://storybook.js.org/migration-guides/7.0
The issue persist with Storybook 7.1