[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