Typescript v5 compatibility

dnjstrom commented 1 year ago

Hi! I tried upgrading to typescript@5.0.0-beta yesterday and ran into the below issue with react-docgen-typescript-plugin when trying to run storybook. Seems like the api of the typescript compiler, expected to be released some time this month, has changed in an incompatible way. I've set up a reproduction repo to help investigate the issue here: https://github.com/dnjstrom/storybook-typescript-5.

npm run storybook

> storybook-typescript-5@0.1.0 storybook
> start-storybook -p 6006 -s public

info @storybook/react v6.5.16
info
(node:85516) DeprecationWarning: --static-dir CLI flag is deprecated, see:

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated---static-dir-cli-flag
(Use `node --trace-deprecation ...` to show where the warning was created)
info => Loading presets
info => Serving static files from ./public at /
info Addon-docs: using MDX1
info => Loading Webpack configuration from `node_modules/react-scripts`
info => Removing existing JavaScript and TypeScript rules.
info => Modifying Create React App rules.
(node:85516) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
10% building 0/1 entries 0/0 dependencies 0/0 modules
info => Using cached manager
70% sealing plugins DocGenPlugin/Users/daniel.strom/Code/storybook-typescript-5/node_modules/@storybook/react/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 (/Users/daniel.strom/Code/storybook-typescript-5/node_modules/@storybook/react/node_modules/@storybook/react-docgen-typescript-plugin/dist/generateDocgenCodeBlock.js:37:186)
    at /Users/daniel.strom/Code/storybook-typescript-5/node_modules/@storybook/react/node_modules/@storybook/react-docgen-typescript-plugin/dist/generateDocgenCodeBlock.js:201:34
    at Array.map (<anonymous>)
    at Object.generateDocgenCodeBlock (/Users/daniel.strom/Code/storybook-typescript-5/node_modules/@storybook/react/node_modules/@storybook/react-docgen-typescript-plugin/dist/generateDocgenCodeBlock.js:200:46)
    at /Users/daniel.strom/Code/storybook-typescript-5/node_modules/@storybook/react/node_modules/@storybook/react-docgen-typescript-plugin/dist/plugin.js:166:68
    at Array.forEach (<anonymous>)
    at /Users/daniel.strom/Code/storybook-typescript-5/node_modules/@storybook/react/node_modules/@storybook/react-docgen-typescript-plugin/dist/plugin.js:157:34
    at Hook.eval [as call] (eval at create (/Users/daniel.strom/Code/storybook-typescript-5/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:14:1)
    at Hook.CALL_DELEGATE [as _call] (/Users/daniel.strom/Code/storybook-typescript-5/node_modules/tapable/lib/Hook.js:14:14)
    at Compilation.seal (/Users/daniel.strom/Code/storybook-typescript-5/node_modules/webpack/lib/Compilation.js:2801:19)
    at /Users/daniel.strom/Code/storybook-typescript-5/node_modules/webpack/lib/Compiler.js:1187:20
    at /Users/daniel.strom/Code/storybook-typescript-5/node_modules/webpack/lib/Compilation.js:2757:4
    at _next2 (eval at create (/Users/daniel.strom/Code/storybook-typescript-5/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at eval (eval at create (/Users/daniel.strom/Code/storybook-typescript-5/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:68:1)
    at /Users/daniel.strom/Code/storybook-typescript-5/node_modules/webpack/lib/FlagDependencyExportsPlugin.js:385:11
    at /Users/daniel.strom/Code/storybook-typescript-5/node_modules/neo-async/async.js:2830:7
    at Object.each (/Users/daniel.strom/Code/storybook-typescript-5/node_modules/neo-async/async.js:2850:39)
    at /Users/daniel.strom/Code/storybook-typescript-5/node_modules/webpack/lib/FlagDependencyExportsPlugin.js:361:18
    at /Users/daniel.strom/Code/storybook-typescript-5/node_modules/neo-async/async.js:2830:7
    at Object.each (/Users/daniel.strom/Code/storybook-typescript-5/node_modules/neo-async/async.js:2850:39)
    at /Users/daniel.strom/Code/storybook-typescript-5/node_modules/webpack/lib/FlagDependencyExportsPlugin.js:51:16
    at Hook.eval [as callAsync] (eval at create (/Users/daniel.strom/Code/storybook-typescript-5/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:62:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/daniel.strom/Code/storybook-typescript-5/node_modules/tapable/lib/Hook.js:18:14)
    at Compilation.finish (/Users/daniel.strom/Code/storybook-typescript-5/node_modules/webpack/lib/Compilation.js:2714:28)
    at /Users/daniel.strom/Code/storybook-typescript-5/node_modules/webpack/lib/Compiler.js:1182:19
    at process.processTicksAndRejections (node:internal/process/task_queues:77:11)

Node.js v18.12.0

Knagis commented 1 year ago

See https://github.com/hipstersmoothie/react-docgen-typescript-plugin/issues/78 https://github.com/storybookjs/react-docgen-typescript-plugin/pull/8

dnjstrom commented 1 year ago

Ah, great! Thanks for pointing me in the right direction! 🙏

hipstersmoothie / react-docgen-typescript-plugin

Typescript v5 compatibility #81