Storybook: Knobs without groupId do not show up when knobs with groupId are present

[rapheld]

Describe the bug
Knobs without groupId's will not render in the knobs tab when one or more knobs with groupIds are present. In my specific case, I have a RTL knob in my default config of storybook which does not have a groupId.

To Reproduce
Steps to reproduce the behavior:

1. Add two or more knobs to a story
2. Verify that they render when the story is loaded
3. Add a groupId to at least one of the knobs
4. Verify that only the knob(s) with groupIds render

Expected behavior
I expect knobs with and without groupIds to render together in the "ALL" tab.

System:

• OS: MacOS
• Device: Macbook Pro 2018
• Browser: Chrome
• Framework: React
• Addons: knobs: 4.2.0-alpha.1
• Version: storybook: 4.2.0-alpha.1

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

[rapheld]

bump

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

[shilman]

@rapheld Mind giving the latest 5.0-rc on @next a try?

[rapheld]

Sure. Should I bump @storybook/addon-knobs only, or @storybook/react as well?

[shilman]

@rapheld All the @storybook/* packages should use the same version always if you want to be safe

[rapheld]

I'm running into a issue trying to fire up storybook.

package.js

    "@storybook/addon-actions": "v5.0.0-rc.10@next",
    "@storybook/addon-console": "1.1.0",
    "@storybook/addon-info": "v5.0.0-rc.10@next",
    "@storybook/addon-knobs": "v5.0.0-rc.10@next",
    "@storybook/addon-notes": "v5.0.0-rc.10@next",
    "@storybook/addon-options": "v5.0.0-rc.10@next",
    "@storybook/react": "v5.0.0-rc.10@next",

$ start-storybook --port 9001 --config-dir config/storybook --static-dir config/storybook --quiet
info @storybook/react v5.0.0-rc.10
info
info => Loading static files from: /Users/nathan/Code/zendesk/zendesk_console/lotus_react/config/storybook .
info => Loading presets
info => Loading presets
info => Loading custom addons config.
info => Using base config because react-scripts is not installed.
info => Loading custom webpack config (full-control mode).

WARN Broken build, fix the error below.
WARN You may need to refresh the browser.

ERR! TypeError: Cannot destructure property `publicPath` of 'undefined' or 'null'.
ERR!     at options.ignorePreview.then.previewConfig (/Users/nathan/Code/zendesk/zendesk_console/lotus_react/node_modules/@storybook/core/dist/server/dev-server.js:95:23)
ERR!     at <anonymous>
ERR!  { TypeError: Cannot destructure property `publicPath` of 'undefined' or 'null'.
ERR!     at options.ignorePreview.then.previewConfig (/Users/nathan/Code/zendesk/zendesk_console/lotus_react/node_modules/@storybook/core/dist/server/dev-server.js:95:23)
ERR!     at <anonymous>
ERR!   stack: 'TypeError: Cannot destructure property `publicPath` of \'undefined\' or \'null\'.\n    at options.ignorePreview.then.previewConfig (/Users/nathan/Code/zendesk/zendesk_console/lotus_react/node_modules/@storybook/core/dist/server/dev-server.js:95:23)\n    at <anonymous>' }


WARN Unable to close preview build!

[shilman]

I'm not familiar with those version idientifiers. Try something like this?

    "@storybook/addon-actions": "5.0.0-rc.10",
    ....

[rapheld]

Apologies, my paste above was incorrect. My package.js is actually:

    "@storybook/addon-actions": "v5.0.0-rc.10",
    "@storybook/addon-console": "1.1.0",
    "@storybook/addon-info": "v5.0.0-rc.10",
    "@storybook/addon-knobs": "v5.0.0-rc.10",
    "@storybook/addon-notes": "v5.0.0-rc.10",
    "@storybook/addon-options": "v5.0.0-rc.10",
    "@storybook/react": "v5.0.0-rc.10",

[mneumark]

I'm getting the same error regarding publicPath as well:

ERR! TypeError: Cannot destructure property `publicPath` of 'undefined' or 'null'.
ERR!     at options.ignorePreview.then.previewConfig (/Users/mneumark/source/foo/node_modules/@storybook/core/dist/server/dev-server.js:95:23)
ERR!     at processTicksAndRejections (internal/process/next_tick.js:81:5)
ERR!  { TypeError: Cannot destructure property `publicPath` of 'undefined' or 'null'.
ERR!     at options.ignorePreview.then.previewConfig (/Users/mneumark/source/foo/node_modules/@storybook/core/dist/server/dev-server.js:95:23)
ERR!     at processTicksAndRejections (internal/process/next_tick.js:81:5)
ERR!   stack:
ERR!    "TypeError: Cannot destructure property `publicPath` of 'undefined' or 'null'.\n    at options.ignorePreview.then.previewConfig (/Users/mneumark/source/foo/node_modules/@storybook/core/dist/server/dev-server.js:95:23)\n    at processTicksAndRejections (internal/process/next_tick.js:81:5)" }

[bmson]

Had the same issue but was able to resolve it.

We had Storybook in "Full Controll Mode" and the props have changed in the recent update, from (baseConfig, env, defaultConfig) => {} to ({ config, mode }) => {}

https://storybook.js.org/docs/configurations/custom-webpack-config/#full-control-mode

[shilman]

Thanks @bmson for more info see the MIGRATION docs: https://github.com/storybooks/storybook/blob/next/MIGRATION.md

[madhaze]

I'm seeing this as well on 5.0.3. The All tab looks to only show knobs without groupIds

[madhaze]

Makes sense. "Other" is better Title. Though I personally liked having a way to see "All" knobs in one place without searching through all the Tabs.

[shilman]

Yee-haw!! I just released https://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.15 containing PR #6232 that references this issue. Upgrade today to try it out!

Because it's a pre-release you can find it on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

Great Caesar's ghost!! I just released https://github.com/storybooks/storybook/releases/tag/v5.0.6 containing PR #6232 that references this issue. Upgrade today to try it out!