Open canvas in new tab url has empty args query param.

[hasanirogersvmlyr]

Describe the bug
The URL generated in the "open canvas in new tab" button has an empty args query param. This only seems to happen when the user has not used any controls on the original canvas and thus no args has been generated. The empty args query param seems to set the args to some kind of undefined value rather than falling back to default args defined in the story. This makes our stories display incorrectly. The story displays correctly when &args= is removed from the url.

To Reproduce
Unfortunately I'm behind a private corporate repo and I can't share it's reproduction.

System
Environment Info:

System:
OS: macOS 11.6
CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
Binaries:
Node: 14.17.6 - ~/.nvm/versions/node/v14.17.6/bin/node
Yarn: 1.15.2 - /usr/local/bin/yarn
npm: 6.14.15 - ~/.nvm/versions/node/v14.17.6/bin/npm
Browsers:
Chrome: 99.0.4844.84
Firefox: 97.0
Safari: 14.1.2
npmPackages:
@storybook/addon-a11y: ^6.4.18 => 6.4.18
@storybook/addon-actions: ^6.4.18 => 6.4.18
@storybook/addon-essentials: ^6.4.18 => 6.4.18
@storybook/addon-links: ^6.4.18 => 6.4.18
@storybook/addon-postcss: ^2.0.0 => 2.0.0
@storybook/components: ^6.4.18 => 6.4.18
@storybook/preset-scss: ^1.0.3 => 1.0.3
@storybook/web-components: ^6.4.18 => 6.4.18

Additional context
I'll share images to try and help explain the issue.

This is the url before clicking the open canvas in new tab button. Notice how it has no args query params. It is using the default args.

After clicking the open canvas in new tab button, &args= appears in the url. This is causing the args to be misconfigured. Notice the text is gray instead of white.

Once &args= is removed from the url, the default args are correctly applied and the text is white like it was in the original canvas url.

[ArinzeJeffrey-droid]

Currently having the same issue 😢 at the moment.

[ArinzeJeffrey-droid]

@hasanirogersvmlyr A friend of mine was able to resolve this by adding this to your storybook main.js file

typescript: {
  check: false,
  reactDocgen: "react-docgen",
}

Here's a reference for more info https://gist.github.com/shilman/036313ffa3af52ca986b375d90ea46b0

[hasanirogersvmlyr]

Thanks for the assist! I tried that code and restarted. Doesn't solve our issue though. Does it matter that we're using Storybook for Web Components?

[toli444]

Can be connected with these:
#17517
#17413

[shilman]

We’re cleaning house! Storybook has changed a lot since this issue was created and we don’t know if it’s still valid. Please open a new issue referencing this one if:

• this is still a problem in SB 7.x
• you can provide a consistent reproduction in 7.x (at https://storybook.new/ or per repro docs).