[Bug]: Unable to start Storybook 6.5.x for react after upgrade Typescript to 5.+

[annidai]

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

[andreigec]

Workarounds:

package json:

"resolutions": {
    "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.cd77847.0"
  },

"scripts": {
  "build-storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider build-storybook"
}

[annidai]

Workarounds:

package json:

"resolutions": {
    "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.cd77847.0"
  },

"scripts": {
  "build-storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider build-storybook"
}

Works perfectly! Thanks!

Is this fixed with the Storybook 7.+?

[VGalata]

See also here: hipstersmoothie/react-docgen-typescript-plugin#78 (comment).

The solution provided there worked for me when dealing with the issue.

[shilman]

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

[ryami333]

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

70% sealing plugins DocGenPluginDeprecationWarning: 'createIdentifier' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: '' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createLiteral' has been deprecated since v4.0.0. Use `factory.createStringLiteral`, `factory.createStringLiteralFromNode`, `factory.createNumericLiteral`, `factory.createBigIntLiteral`, `factory.createTrue`, `factory.createFalse`, or the factory supplied by your transformation context instead.
DeprecationWarning: 'createBinaryExpression' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createExpressionStatement' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createPropertyAssignment' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createObjectLiteralExpression' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createExpressionStatement' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createTypeOfExpression' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createElementAccessExpression' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createIfStatement' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createBlock' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createVariableDeclaration' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createCatchClause' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createTryStatement' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createNull' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createTrue' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createArrayLiteralExpression' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.
DeprecationWarning: 'createFalse' has been deprecated since v4.0.0. Use the appropriate method on 'ts.factory' or the 'factory' supplied by your transformation context instead.

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.

[shilman]

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

[literalpie]

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

[hyochan]

Workarounds:

package json:

"resolutions": {
    "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.cd77847.0"
  },

"scripts": {
  "build-storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider build-storybook"
}

Thanks the resolution worked to solve the issue here https://github.com/dooboolab/dooboo-ui/actions/runs/4461816661/jobs/7835929160

[lauriharpf]

Workarounds:

package json:

"resolutions": {
    "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.cd77847.0"
  },

"scripts": {
  "build-storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider build-storybook"
}

Great workaround! 👍 With Node v18.14.1, Typescript 5.0.2 and @storybook/react 6.5.16, just adding

"resolutions": {
     "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.cd77847.0"
},

seems to be enough to fix the build. I'm not sure whether cross-env NODE_OPTIONS=--openssl-legacy-provider is necessary 🤔.

[shilman]

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 @prerelease NPM tag to try it out!

npx sb@next upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[mrharispe]

@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 about forwardRef and Storybook 7, like #21686)

Here's an example:

import {
  Breadcrumbs as MuiBreadcrumbs,
  BreadcrumbsProps as MuiBreadcrumbsProps,
} from '@mui/material'
import { forwardRef } from 'react'

export type BreadcrumbsProps = MuiBreadcrumbsProps

const Breadcrumbs = forwardRef<HTMLElement, BreadcrumbsProps>(
  ({ ...props }, ref) => <MuiBreadcrumbs ref={ref} {...props} />,
)

export default Breadcrumbs

A simple Story that loads this Breadcrumbs component gives me "No inputs found for this component"

My main.js has reactDocgen: 'react-docgen-typescript' set, which was working with TypeScript 4

[SiddharthaChowdhury]

See also here: hipstersmoothie/react-docgen-typescript-plugin#78 (comment).

The solution provided there worked for me when dealing with the issue.

None of the above solutions worked for me but, this worked! Thanks!

[shilman]

@mrharispe that's why it's a prerelease. we are still flushing out the bugs in the new version of the package.

[mrharispe]

@mrharispe that's why it's a prerelease. we are still flushing out the bugs in the new version of the package.

I'm just trying to help the Storybook team figure out bugs before GA. Simply giving repro steps to what I think is a bug, please don't take it the wrong way, I can't wait to use Storybook 7! Keep up the good work!

[TerrySlack]

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

Could you make it or a clone public? I've tried upgrading to 7.0 and it breaks. So I thought, let's confirm that SB 7 works. I created a new project, with React. And installed Storybook 7 fresh. It breaks. It would be nice to see a React repo with SB 7 working.
At this point, I'm thinking I"ll wait until 7 matures, before upgrading.

[dbrackma]

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 function
at 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
...

[RodrigoTomeES]

The issue persist with Storybook 7.1

[dbrackma]

UPDATE
In case this helps anyone else, we were able to get past the issue I reported back in April with SB 7.0.7 and TS 5.0.4. (Sorry for not reporting back sooner...)

Our SB Webpack build was configured to dynamically load and register the obsolete react-docgen-typescript-loader package, which uses the deprecated top-level TS Compiler APIs, causing a failure at build time. (Its functionality was absorbed into the react-docgen-typescript-plugin package, which has been upgraded to use the corresponding factory APIs.) As it turns out, we had an old rule referencing this loader package but was no longer needed - once we removed it from our SB WebPack config we were good to go.

[caiocaprio]

What would be the solution?
I still have the problem!

[TerrySlack]

@caiocaprio
Here is a link to a working repo with Storybook 7.1.1, Typescript, and Webpack. Hope this helps

https://github.com/TerrySlack/WebPack-5-React-Typescript-BoilerPlate

[jenskuhrjorgensen]

@shilman seems like the alpha release fixes my issue too - thanks a lot!

But, why was it never released in a proper v6.5.17 release instead of an alpha release?