Storybook 4 migration addon-knobs is not working

[amittkSharma]

Hi Team

After migration to Storybook 4, I am facing an issue with addon-knobs, the panel appears but with "No Knobs" string, where almost every story contains knobs to change the properties of the component.

Before the migration, these were working.

Small Info about the current project structure setup:

1. addon.js contains the following:

import '@storybook/addon-knobs/register'

2. config.js contains the following code:

import { withKnobs } from '@storybook/addon-knobs'

const req = require.context('../stories', false, /\-story\.tsx$/)

function loadStories() {
  req.keys().forEach(filename => req(filename))
}

addDecorator(withNotes)
addDecorator(withKnobs)

3. small-story.tsx looking like below:

import * as React from 'react'
import { MemoryRouter } from 'react-router'
import { object } from '@storybook/addon-knobs'
import { getStory, StoryInfo, addChapter } from './common'
import { Component } from './imports'

const storyInfo: StoryInfo = { label: 'Component ', readMeKey: 'ComponentReadme' }
const defaultValue = [
  { _id: 'newId_1', label: 'Test 101' },
  { _id: 'newId_2', label: Test 102' },
]

const ComponentStory = getStory(storyInfo).addDecorator((story: any) => (
  <MemoryRouter initialEntries={['/']}>{story()}</MemoryRouter>
))

addChapter(
  ComponentStory ,
  {
    name: 'introduction',
    information: `Displaying the naviagtion path to the current node`,
    note: `To Display bread crumbs in order to show path`,
  },
  <Component prop={object('prop', defaultValue)} />,
)

If you need more information from my side, please let me know.

Any pointers or hints will be useful.

Thanks and regards Amit

[mbellary-chwy]

Hey @amittkSharma - What is the exact version of addon-knobs you are using ?

[amittkSharma]

Hi @MansoorBashaBellary - Below are the packages I am using for the storybook:

 "@storybook/addon-actions": "4.0.8",
    "@storybook/addon-console": "1.1.0",
    "@storybook/addon-info": "4.0.8",
    "@storybook/addon-knobs": "4.0.8",
    "@storybook/addon-notes": "4.0.8",
    "@storybook/addon-options": "4.0.8",
    "@storybook/react": "4.0.8",

[mbellary-chwy]

@amittkSharma - I had this problem earlier, when I upgraded all the @storybook dependencies to latest. It fixed my issue. Please try using the latest of addon-knobs

"@storybook/addon-knobs": "4.0.9"

[amittkSharma]

@MansoorBashaBellary - Thanks for the quick response I got the knobs in the panel but I still have some queries:

1. Are knobs from all stories are displayed together at the same time?
2. Still not able to update the component on changing the knobs.
3. On Changing the stories, knobs panel show "No knobs" again after the initial loading of the storybook.

Please let me know if something is missing.

Thanks and regards Amit

[mbellary-chwy]

Try using

addDecorator( withKnobs({ escapeHTML: false }) );

Knobs are specific to stories. On selecting a story that has KNOBS will display knobs and then changing the selection to stories that doesnot have knobs will show NO KNOBS.

[amittkSharma]

@MansoorBashaBellary I found the problem but not able to identify the real reason behind it, I created a generic function to add chapters to a story

export function addChapter(story: Story, chapterInfo: ChapterInfo, component: JSX.Element): Story {
  return story.add(chapterInfo.name, () => component, {
    notes: chapterInfo.note
      ? chapterInfo.note
      : `No Notes are available in the chapter ${chapterInfo.name}`,
    info: chapterInfo.information
      ? chapterInfo.information
      : `No Information is available in the chapter ${chapterInfo.name}`,
  })
}

Do you have a real information on it?

Thanks and regards Amit

[KudMath]

@MansoorBashaBellary - Thanks for the quick response I got the knobs in the panel but I still have some queries:

1. Are knobs from all stories are displayed together at the same time?
2. Still not able to update the component on changing the knobs.
3. On Changing the stories, knobs panel show "No knobs" again after the initial loading of the storybook.

Please let me know if something is missing.

Thanks and regards Amit

I have the exact same issues! (v 4.0.9)

[mbellary-chwy]

Oh. I am using 4.0.9, I don't have this issue. Is there any JS error.

[KudMath]

@MansoorBashaBellary nope

[amittkSharma]

@KudMath Can you please provide how you are adding the stories? As things are working with the updated version.

[mbellary-chwy]

@amittkSharma and @KudMath.

package.json dependencies

"@storybook/addon-a11y": "4.0.9",
"@storybook/addon-knobs": "4.0.9",
"@storybook/addon-links": "4.0.9",
"@storybook/addon-options": "4.0.8",
"@storybook/addon-storyshots": "4.0.9",
"@storybook/addon-storysource": "4.0.9",
"@storybook/addon-viewport": "4.0.9",
"@storybook/addons": "4.0.9"

Note: I did not add withKnobs decorator globally, I added it to respective components which have KNOBS like below:

storiesOf('Vue.Carousel', module) .addDecorator( withKnobs({ escapeHTML: false }) ) .addParameters({ options: { selectedAddonPanel: 'storybooks/storybook-addon-knobs' } }) .add('Playground', () => ({ ... }));

withKnobsOptions is deprecated in Storybooks 4.0

[gapipro]

I have same issue with:

"@storybook/addon-actions": "^4.0.11",
"@storybook/addon-console": "^1.1.0",
"@storybook/addon-info": "^4.0.11",
"@storybook/addon-knobs": "^4.0.11",
"@storybook/addon-links": "^4.0.11",
"@storybook/addon-notes": "^4.0.11",
"@storybook/addon-storysource": "^4.0.11",
"@storybook/addon-viewport": "^4.0.11",
"@storybook/addons": "^4.0.11",
"@storybook/vue": "^4.0.11",

[amittkSharma]

@MansoorBashaBellary: The knobs are working for me now, even as global decorators. I think the problem is not the addon itself but how you create the object of the story and add chapters to it.

Thanks -A

[mbellary-chwy]

Hi @amittkSharma - Could you please share me an example of how you fixed this issue. Now I am facing this issue

[amittkSharma]

@MansoorBashaBellary: Please take a look at this repo:. If you have any problems please let me know.

Thanks Amit

[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!

[tjenkinson]

This solved it for me: https://stackoverflow.com/a/57067253/1048589