Storybook: Upgrade from 5.1.9 -> 5.2.0 breaking with knobs

[charl-kruger]

Describe the bug
We have upgraded from 5.1.9 -> 5.2.0 however now we are getting a few errors regarding knobs. Has anyone else experienced this?

Also are there changes we maybe need to implement for 5.2.0? Or a upgrade doc?

ERROR in C:/..-apps/io-storybook/node_modules/@storybook/addon-knobs/dist/components/types/Array.d.ts
ERROR in C:/..-apps/io-storybook/node_modules/@storybook/addon-knobs/dist/components/types/Array.d.ts(4,53):
TS2304: Cannot find name 'readonly'.

ERROR in C:/..-apps/io-storybook/node_modules/@storybook/addon-knobs/dist/components/types/Array.d.ts
ERROR in C:/..-apps/io-storybook/node_modules/@storybook/addon-knobs/dist/components/types/Array.d.ts(4,62):
TS2693: 'string' only refers to a type, but is being used as a value here.

ERROR in C:/..-apps/io-storybook/node_modules/@storybook/addon-knobs/dist/components/types/Options.d.ts
ERROR in C:/..-apps/io-storybook/node_modules/@storybook/addon-knobs/dist/components/types/Options.d.ts(4,134):
TS2304: Cannot find name 'readonly'.

ERROR in C:/..-apps/io-storybook/node_modules/@storybook/addon-knobs/dist/components/types/Options.d.ts
ERROR in C:/..-apps/io-storybook/node_modules/@storybook/addon-knobs/dist/components/types/Options.d.ts(4,143):
TS2365: Operator '>' cannot be applied to types 'boolean' and 'undefined[]'

...

To Reproduce
Steps to reproduce the behavior:
npm update

Expected behavior
Build successfully

Code snippets
Working:

    "@storybook/addon-actions": "5.1.9",
    "@storybook/addon-info": "5.1.9",
    "@storybook/addon-knobs": "5.1.9",
    "@storybook/addon-links": "5.1.9",
    "@storybook/addon-notes": "5.1.9",
    "@storybook/addon-options": "5.1.9",
    "@storybook/addons": "5.1.9",
    "@storybook/angular": "5.1.9",

Breaking:

    "@storybook/addon-actions": "5.2.0",
    "@storybook/addon-info": "5.2.0",
    "@storybook/addon-knobs": "5.2.0",
    "@storybook/addon-links": "5.2.0",
    "@storybook/addon-notes": "5.2.0",
    "@storybook/addon-options": "5.2.0",
    "@storybook/addons": "5.2.0",
    "@storybook/angular": "5.2.0",

[tevey]

We have the same issue that knobs stops working when upgrading to 5.2. But we got no errors at all.

[xilovesyu]

facing same issue

[xilovesyu]

Actually, if I used version 5.1.9 and removed yarn.lock, I will also have the problem.

[shilman]

I'm not a typescript expert but it looks like maybe Storybook is using a more recent version of typescript? cc @emilio-martinez @kroeder @gaetanmaisse

[jlbates]

I'm seeing similar build time breaking changes in other addons as well.

[emilio-martinez]

TS2304: Cannot find name 'readonly'.

Yeah, this error looks like what you'd get if you're using a lower version of Typescript. Specifically, I believe applying the readonly modifier to mapped types was added starting in TS 3.4, which is why previous versions of the Typescript compiler will choke on it.

@CharlJKruger what TS version are you using in your project?

[fabiradi]

Having the same issue:

• Upgraded to 5.2
• addon-knobs not working (is shown, but has no effect whatsoever)
• no error, neither while building, nor interacting.

[shilman]

@fabiradi did you try cleaning out node_modules, clear lockfiles, etc?

[fabiradi]

I will have to try that on Monday when I'm back at work. Although, I already did several _clean_ installs due to package upgrades...

[phlexib]

same problem here.
updating typescript to the latest version fixed it.
"typescript": "^3.6.3"

[Trancever]

It doesn't work for me neither. Knobs panel shows up but nothing happens when I change the value, no error is thrown.

I use following versions:

    "@storybook/addon-info": "5.2.1",
    "@storybook/addon-knobs": "5.2.1",
    "@storybook/html": "5.2.1",
    "@storybook/react": "5.2.1",
    "typescript": "3.6.3",

and I define stories with following syntax (it doesn't work with storiesOf().add() syntax either):

import React from 'react'
import { withKnobs, text } from '@storybook/addon-knobs/react'

import PlayerMeta from '..'

export default { title: 'Components|Player meta', decorators: [withKnobs] }

export const basic = () => (
  <div style={{ backgroundColor: 'black', padding: 50 }}>
    <PlayerMeta
      club={text('Club', 'Chicago')}
      position={text('Position', 'Mid')}
      jerseyNumber={text('Jersey number', '31')}
    />
  </div>
)

[ndelangen]

If someone could give me a reproduction repository, I'll take a look ASAP!

[fabiradi]

@fabiradi did you try cleaning out node_modules, clear lockfiles, etc?

🚫 Cleaning node_modules does not help. Deleting yarn.lock has no effect either. I will try v5.3.0-alpha.1 next... --> No, I can't get it to work at all.

[shilman]

@fabiradi 5.3.0-alpha.1 was a bad release. re-releasing with a fix now.

[ndelangen]

Need help on this @shilman ?

[fabiradi]

I have a minimal "fresh" project: https://github.com/fabiradi/sb-knobs-5.2-test

• Without docs, it works without any errors.
• With addon-docs: it works as well.

🚫 I could NOT reproduce the issue with this setup (npm list --depth=0):

├── @babel/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── [email protected]
├── [email protected]
└── [email protected]

[ndelangen]

it works with any errors.

with? or without?! 😕

[fabiradi]

it works with any errors.

with? or without?! 😕

Sorry, withOUT errors (changed it already).

[CKeogh]

Having the same issue here 😕. Are there any disadvantages to dropping back to knobs 5.1 for the time being?

[fabiradi]

Are there any disadvantages to dropping back to knobs 5.1 for the time being?

addon-docs (with CSF and MDX) needs 5.2: I have migrated all my stories to CSF and created some MDX stories as well. I cannot go back.

Workaround: Create your own "knobs" using useState and simple form fields like<input type="text" ... or <input type="range" .... It works if you really have to show interactivity, but it is a lot less comfortable. However, it also works in docs view.

BTW: I use Lerna which might be the cause of this problem.

[sebinsua]

I had this issue at some point, but it disappeared once I ensured there were no duplicate packages in my yarn.lock file. I suspect that there is some kind of global shared state within Storybooks and there needs to be only one version of a package in the output for it to work, however I've not checked whether this is the case.

[shilman]

This might be fixed in #8287 which I'll publish today

[jackmellis]

I'm still having this issue (after upgrading from 5.1.x to 5.2.4). Weirdly the first time I change a knob it works, then every subsequent knob change is ignored

[shilman]

@jackmellis can you share a repro repository?

[jackmellis]

I will if/when I get the time! In the meantime, moving back to 5.1 got it working again.

[emilio-martinez]

@jackmellis what knobs are you finding don't change? Can you share specific knob use cases?

[shilman]

@jackmellis This didn't get patched into 5.2.x yet. Mind testing on 5.3.0-alpha?

[fabiradi]

👏 It works in 5.2.5 for me!

Knobs are back! 🚀

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!