Deprecation warnings after upgrade to TS 4.8

[gerhat]

Describe the bug
After upgrading TypeScript to 4.8.2 from 4.7.4 I am getting the following deprecation warnings at the console:

info @storybook/react v6.5.10
info 
info => Loading presets
info => Loading custom manager config
info Addon-docs: using MDX1
info => Using implicit CSS loaders
info => Loading custom manager config
info => Using default Webpack4 setup
12% building 20/23 modules 3 active ...w.js-generated-config-entry.js
info => Using cached manager
70% sealing React Docgen Typescript PluginDeprecationWarning: '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: 'createFalse' 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.

To Reproduce
Execute:

$ npx sb@next repro

Then select:
react, react_typescript, any_folder_name e.g.:

✔ 🌈 Select the repro framework › react
✔ 📝 Select the repro base template › react_typescript
✔ Enter the output directory … TS4.8-deprecations

After it finishes installing everything try:

$ cd TS4.8-deprecations
$ yarn storybook

You should be able to see the warnings towards the top.

System

Environment Info:

  System:
    OS: macOS 12.5.1
    CPU: (8) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
  Binaries:
    Node: 14.20.0 - /usr/local/bin/node
    npm: 6.14.17 - /usr/local/bin/npm
  Browsers:
    Chrome: 104.0.5112.101
    Edge: 104.0.1293.70
    Firefox: 104.0
    Safari: 15.6.1
  npmPackages:
    @storybook/addon-actions: ^6.5.10 => 6.5.10 
    @storybook/addon-docs: ^6.5.10 => 6.5.10 
    @storybook/addon-essentials: ^6.5.10 => 6.5.10 
    @storybook/addon-knobs: ^6.4.0 => 6.4.0 
    @storybook/addon-links: ^6.5.10 => 6.5.10 
    @storybook/react: ^6.5.10 => 6.5.10 

[lianapache]

This seems to be an issue with react-docgen-typescript-plugin

[LinnJS]

Having the same issue happy to see this issue is known 😄

[Moumouls]

Hi @shilman

A PR was sent on the dep repo hipstersmoothie/react-docgen-typescript-plugin#70

Any chance to motivate @hipstersmoothie to merge, release and then update storybook/react dep to fix warnings ? 🚀

[gravyboat]

hipstersmoothie/react-docgen-typescript-plugin#70 has been merged. If anyone has time to bump this to see if it addresses the warnings that would be great!

[ghost]

I can't get rid of the warning. Can I try something?

[Moumouls]

@gravyboat @yogarasu @LinnJS @lianapache @gerhat after updating to latest version (6.5.13) warnings are gone.

Note: i'm using react 18

[MirKml]

Nope for me, warnings are still presented is sb 6.5.13. It seems that storybook uses own fork of mentioned plugin

@storybook/react-docgen-typescript-plugin@1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0 in my storybook installation.

It means that someone from storybook core maintainers has to update this dependency according mentioned issue by @gravyboat. Then it will be fixed.

[MirKml]

It seems that @shilman is responsible for plugin fork - https://github.com/storybookjs/react-docgen-typescript-plugin.
So @shilman please, can you update @storybook/react-docgen-typescript-plugin to upstream version which includes updates mentioned by @gravyboat which seems fixed this issue?

current stable Typescript is 4.9.2 (4.9 was released before 2 days), but many of us stuck with 4.7.x because of this issue.

[felixhaeberle]

Would be cool to see it this merged!! :)

[matthew-dean]

I'm getting this issue with TypeScript 4.9.3.

UPDATE: If you're using pnpm (and maybe Yarn?), you can manually fix this with a key like this in your package.json file:

  "pnpm": {
    "overrides": {
      "@storybook/react-docgen-typescript-plugin": "npm:react-docgen-typescript-plugin@1.0.2"
    }
  }

Note sure why Storybook forked it, or why they aren't keeping it up to date, but that removes the deprecation warnings. 🤷

[MirKml]

@matthew-dean according the repo, it seems that there are some storybook patches, so I don't know if overriding plugin is save. It's used in doc part of the storybook.
When you overrides, all your doc pages are fine?

@onigoetz made the PR storybookjs/react-docgen-typescript-plugin#8, thank you very much. So @shilman can you review, merge this one? For upcoming 6.5.14 which is in progress please.

[HyejinYang]

I also encountered this issue. It would be nice if it can be fixed in the upcoming 6.5.14 release as @MirKml said.

[bosycom]

Issue still present in storybook 6.5.14. Looking forward to a fix.

The following is a workaround that worked for me using yarn 3.x:

1. Add to package.json:

  "resolutions": {
    "@storybook/react-docgen-typescript-plugin": "npm:react-docgen-typescript-plugin@1.0.2"
  }

2. Run yarn
3. Fixed, storybook runs without deprecation warnings from the plugin

[marksy]

@bosycom's resolution workaround worked for me, for the time being.

[alb3rtuk]

@bosycom's solution worked for me! Many thanks :)

[kaiyoma]

Just upgraded to the latest Storybook (6.5.15) and still seeing this.

[tsmithdk]

Issue still present in storybook 6.5.14. Looking forward to a fix.

The following is a workaround that worked for me using yarn 3.x:

1. Add to package.json:

  "resolutions": {
    "@storybook/react-docgen-typescript-plugin": "npm:react-docgen-typescript-plugin@1.0.2"
  }

2. Run yarn
3. Fixed, storybook runs without deprecation warnings from the plugin

Tried the fix but didn't work for 6.5.15

[DannyJoris]

Same issue in 7.0.0-beta.20.

[supunTE]

Issue still present in storybook 6.5.14. Looking forward to a fix.

The following is a workaround that worked for me using yarn 3.x:

1. Add to package.json:

  "resolutions": {
    "@storybook/react-docgen-typescript-plugin": "npm:react-docgen-typescript-plugin@1.0.2"
  }

2. Run yarn
3. Fixed, storybook runs without deprecation warnings from the plugin

Same warnings with "@nrwl/storybook": "^15.6.2",
This didn't work.

[uditalias]

Same issue with 6.5.16
All the above solutions didn't work.
Also, storybook is not running with node v18. Only v16.

[shilman]

Ermahgerd!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-beta.48 containing PR #21095 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb@next upgrade --prerelease

[MirKml]

I see you drop fork completely - 👍. Little bit sad that it's only for sb 7.0+, but it's OK, workaround with package.json overrides works. I will looking forward for 7.0 with typescript 5.0 😉

BTW @uditalias - latest sb 6 works fine with node 18

[Jack-Works]

still happens in 7.0.0 beta 53

[shilman]

Ermahgerd!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-beta.61 containing PR #21380 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb@next upgrade --prerelease

[andrevenancio]

Using latest typescript 5.0.2 causes issues with storybook-addon-actions, and if I revert to typescript 4.9.5 I get to this issue which is still NOT resolved :(

[crunchwrap89]

If you add below code to your package.json it will remove the deprecation warnings, yes.
But it will make your hot reload 300% slower.
I guess deprecation warnings are better in this case.

"resolutions": {
"@storybook/react-docgen-typescript-plugin": "npm:react-docgen-typescript-plugin@1.0.2"
}