Storybook 4 migration addon-knobs is not working

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'

1. 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)

1. 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]

@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

[tjenkinson]

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