Addons panel not showing - but knobs are still working(?) #8383

goralight · 2019-10-11T08:33:55Z

Describe the bug
I am using the knobs addon for my StencilJs project and it is technically working (if i set the component prob within the story it is changing it, for example: look at the story file and then the component, you will see that it is setting it - and it does). but I cannot see the addons panel. I think have done all the set up correctly (addons.js, package.json, etc).

I have tried selecting the show addons option inside of the running storybook but nothing is displayed.

How i am running it is with npm run storybook

To Reproduce
Steps to reproduce the behavior:

Launch storybook
No addons panel is visible on the side or bottom

Expected behavior
I expect to see the addons panel if I have an addon installed to be used

Screenshots

Code snippets
Below is my .storybook/addons.js

import '@storybook/addon-a11y/register';
import '@storybook/addon-actions/register';
import '@storybook/addon-knobs/register';

Below is my package.json

"scripts": {
    "build": "stencil build",
    "start": "stencil build --dev --watch --serve",
    "stencil.dev": "stencil build --dev --watch --docs",
    "storybook.dev": "./node_modules/.bin/start-storybook -p 8008 -c .storybook -s ./dist",
    "storybook": "npm run build && ./node_modules/.bin/concurrently  \"npm run stencil.dev\" \"npm run storybook.dev\"",
    "test": "stencil test --spec --e2e",
    "test.watch": "stencil test --spec --e2e --watch",
    "generate": "stencil generate"
  },
  "dependencies": {
    "@ionic/core": "^4.9.1"
  },
  "devDependencies": {
    "@stencil/core": "^1.7.0",
    "@stencil/less": "^1.0.0",
    "@stencil/utils": "0.0.5",
    "@stencil/webpack": "0.0.6",
    "@storybook/addon-a11y": "5.2.3",
    "@storybook/addon-actions": "5.2.3",
    "@storybook/addon-knobs": "5.2.3",
    "@storybook/addon-storysource": "5.2.3",
    "@storybook/addon-viewport": "5.2.3",
    "@storybook/addons": "5.2.3",
    "@storybook/cli": "5.2.3",
    "@storybook/html": "5.2.3",
    "@storybook/polymer": "5.2.3",
    "babel-core": "6.26.3",
    "babel-loader": "7.1.5",
    "babel-preset-env": "1.7.0",
    "lit-html": "1.1.1",
    "polymer-webpack-loader": "2.0.3",
    "ts-loader": "^5.4.5",
    "concurrently": "^4.1.0"
  }

Below is my .storybook/config.js

import { addDecorator, addParameters, configure } from '@storybook/polymer';
import { withA11y } from '@storybook/addon-a11y';
import { withKnobs } from '@storybook/addon-knobs';
import 'sumai-frontend';

addParameters({
  options: {
    /**
     * name to display in the top left corner
     * @type {String}
     */
    name: 'Sumai Components',
    /**
     * URL for name in top left corner to link to
     * @type {String}
     */
    url: '#',
    /**
     * show story component as full screen
     * @type {Boolean}
     */
    isFullscreen: false,
    /**
     * display panel that shows a list of stories
     * @type {Boolean}
     */
    showNav: true,
    /**
     * display panel that shows addon configurations
     * @type {Boolean}
     */
    showPanel: true,
    /**
     * display floating search box to search through stories
     * @type {Boolean}
     */
    showSearchBox: false,
    /**
     * show addon panel as a vertical panel on the right
     * @type {string}
     */
    addonPanelInRight: true,
    /**
     * sorts stories
     * @type {Boolean}
     */
    sortStoriesByKind: false,
    /**
     * regex for finding the hierarchy separator
     * @example:
     *   null - turn off hierarchy
     *   /\// - split by `/`
     *   /\./ - split by `.`
     *   /\/|\./ - split by `/` or `.`
     * @type {Regex}
     */
    hierarchySeparator: null,
    /**
     * regex for finding the hierarchy root separator
     * @example:
     *   null - turn off multiple hierarchy roots
     *   /\|/ - split by `|`
     * @type {Regex}
     */
    hierarchyRootSeparator: null,
    /**
     * sidebar tree animations
     * @type {Boolean}
     */
    sidebarAnimations: true,
    /**
     * id to select an addon panel
     * @type {String}
     */
    selectedAddonPanel: undefined, // The order of addons in the "Addon panel" is the same as you import them in 'addons.js'. The first panel will be opened by default as you run Storybook
    /**
     * enable/disable shortcuts
     * @type {Boolean}
     */
    enableShortcuts: true // true by default
  }
});

const req = require.context('../src/components', true, /story.tsx$/);
function loadStories() {
  req.keys().forEach(filename => req(filename));
}
configure(loadStories, module);
addDecorator(withA11y);
addDecorator(withKnobs);

// HMR interface
if (module.hot) {
  // Capture hot update
  module.hot.accept('sumai-frontend', () => {
    document.location.reload();
  });
}

below is my story.tsx

import { storiesOf } from "@storybook/polymer";
import { text } from "@storybook/addon-knobs";

storiesOf("Basic Components", module)
  .add("Modal", () => {
    const el = document.createElement("sumai-full-width-image");
    el.name = text('Name', 'Namey');
    return el;
  });

System:

System:
    OS: Linux 5.0 Ubuntu 19.04 (Disco Dingo)
    CPU: (4) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
  Binaries:
    Node: 10.15.3 - /usr/local/bin/node
    Yarn: 1.16.0 - /bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 75.0.3770.80
    Firefox: 69.0.2
  npmPackages:
    @storybook/addon-a11y: 5.2.3 => 5.2.3 
    @storybook/addon-actions: 5.2.3 => 5.2.3 
    @storybook/addon-knobs: 5.2.3 => 5.2.3 
    @storybook/addon-storysource: 5.2.3 => 5.2.3 
    @storybook/addon-viewport: 5.2.3 => 5.2.3 
    @storybook/addons: 5.2.3 => 5.2.3 
    @storybook/cli: 5.2.3 => 5.2.3 
    @storybook/html: 5.2.3 => 5.2.3 
    @storybook/polymer: 5.2.3 => 5.2.3

Additional context

The text was updated successfully, but these errors were encountered:

shilman · 2019-10-14T08:57:13Z

Sometimes the UI gets into a funny state where the addon panel is hidden based on local storage. In that case, running localStorage.clear() in the browser console and hard-reloading the page should fix it.

goralight · 2019-10-14T14:50:32Z

Yeah I did that and it worked, sorry for the redundant issue, thank you for your help!

shilman · 2019-10-14T15:36:38Z

Sorry for the bug! Glad you got it working!

josephdicdican · 2020-04-24T05:49:48Z

Sometimes the UI gets into a funny state where the addon panel is hidden based on local storage. In that case, running localStorage.clear() in the browser console and hard-reloading the page should fix it.

this saved my day, tvm @shilman

bradennapier · 2020-04-25T22:00:20Z

Not sure this should be closed - is this not fixable ? This happens quite often

shilman · 2020-04-26T04:01:38Z

Re-opening. We should figure out how to fix this bug.

Mazuh · 2020-04-29T14:43:39Z

thanks for for the hint on fixing it. Looking forward to a permanent fix

ekilah · 2020-05-02T09:30:42Z

If it helps, I just ran into this bug immediately after adding the knobs package. All I did to get the panel to be visible was to go to the ... menu and change the orientation of the (invisible) panel. It magically appeared in the vertical orientation, and I was able to rotate it back afterwards.

Maybe that'll help, maybe not!

jessicarobins · 2020-05-02T17:07:55Z

I am also running into this issue, except that clearing local storage/opening an incognito window doesn't work. I can find the panel in the Elements console and force it to be visible, and the knobs work just fine.

Update: it started working after I switched from
panelPosition: 'bottom'
to
addonPanelInRight: true

in the config. And then when I changed it back to panelPosition: 'bottom', it continued to work but did not work in an incognito window. Not sure if this is helpful info

tomasztunik · 2020-05-29T09:44:18Z

Had the same issue, changing orientation helped but it keeps disappearing whenever I select another story. I believe it might be related to the 3:2 ratio screen (Surface Book) and maybe it's not treating it as a desktop because of that?

ruicarest · 2020-06-17T15:34:41Z

Had the same issue on a desktop, chrome. Again, changing orientation helped but it keeps disappearing whenever I select another story.

nhunt3 · 2020-07-23T15:52:38Z

Glad I came across this page. I encountered this frustrating bug today and localStorage.clear() fixes it. Looking forward to a permanent fix as well.

milenaNeumann · 2020-08-17T07:47:13Z

Hey, I just ran into this bug on Storybook 6.0.10, but I found a fix for it by changing the config:
I had the showPanel and panelPosition configured in my preview.js like this:

// preview.js
addParameters({
  options: {
    showPanel: true,
    panelPosition: "bottom",
  },
});

Moving these into the manager.js solved the issue for me:

// manager.js
addons.setConfig({
  showPanel: true,
  panelPosition: "bottom",
});

Maybe this helps you find the underlying issue or other people looking for a workaround ;)

MrSunshyne · 2020-09-09T16:32:45Z

Came across this in Storybook 6.x, the localStorage.clear() solution fixed it.

valgaze · 2020-09-16T16:43:04Z

+1 on localStorage.clear() as a quick fix (^6.0.18)

And also @milenaNeumann 🙌 🙌

When in this state the following will not resolve:

Pressing "a" (keyboard shortcut)
Refresh, reload, kill all browser instances, etc

Quick and dirty fixes:

Localstorage.clear()
Jump into a different browser like Firefox

Long-term fix (this seems to resolve in all cases, props to @milenaNeumann):

npm i @storybook/addons

.storybook/manager.js:

import { addons } from "@storybook/addons";

addons.setConfig({
  showPanel: true,
  panelPosition: "bottom",
});

cybervaldez · 2020-10-06T18:24:56Z

Same. Been following through the guide and i'm having the same issue, nothing here fixes it for me. I can go to the Docs tab and set my args there however.

Edit: Managed to make this work by updating all my packages with npm-check-updates.

surdu · 2020-10-13T15:35:24Z

Just to be sure: this should happen only for users that saw the Storybook before it had Knobs, right? Completely new visitors should not be affected.

CiprianaM · 2020-10-13T16:05:18Z

For me none of the above worked, but I managed to fix it by adding the controls addon in the main.js:

module.exports = {
  addons: ['@storybook/addon-knobs', '@storybook/addon-controls'],
  stories: ['./src/stories/*.stories.js'],
};

ahuggins · 2021-06-16T23:11:49Z

If it helps, I just ran into this bug immediately after adding the knobs package. All I did to get the panel to be visible was to go to the ... menu and change the orientation of the (invisible) panel. It magically appeared in the vertical orientation, and I was able to rotate it back afterwards.

Maybe that'll help, maybe not!

This did the trick for me!!!

surdu · 2021-06-24T11:21:15Z

In version 6.3.0 none of the above options seems to work anymore ... 😞

R-Bower · 2021-06-27T19:28:34Z

In version 6.3.0 none of the above options seems to work anymore ... 😞

I'm seeing the same on my end. Tried all of the above steps including clearing the localStorage and trying other browsers. Could it be because I'm only using MDX docs? Are addons even available in this case?

shilman · 2021-06-28T01:47:18Z

@surdu do you have a repro?

surdu · 2021-06-28T06:43:41Z

Could it be because I'm only using MDX docs?

Not using them, still have the issue

@surdu do you have a repro?

Unfortunately, no, it's a private repo :(

Gregorein · 2021-10-29T11:56:09Z

This continues to happen in v5.1.11, clearing localStorage fixes the issue

PeteJStewart · 2021-12-01T08:35:24Z

I'm still getting this issue on the latest version of storybook.
localStorage.clear() worked a treat, but I had spent quite a while trying to figure it out before coming across this bug issue!
I feel it would be good to have something about this on the documentation until the bug is resolved.
Many thanks for the solution!! ;-)

softdays · 2022-03-24T14:18:15Z

Reproduced using SB 6.4.19.
Using localStorage.clear() fix the issue.

shilman · 2022-03-28T10:55:33Z

Egads!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.0-alpha.50 containing PR #17714 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

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

Wouter125 · 2023-01-26T11:17:57Z

FYI, this issue is still present in 7.0.0-beta.19 when running firefox. Will try beta.34 later.

nuxcodes · 2023-04-04T19:58:23Z

@shilman Issue still present in 7.0.2. Thanks!

rosskevin · 2023-05-23T21:14:13Z

@shilman this issue is still present in 7.0.12. I had to workaround with localStorage.clear() because the addons panel unexpectedly disappeared. Perhaps it is a hot key sequence putting it in a bad state?

charlestbell · 2023-09-05T15:35:28Z

Two years old and bug is still present

itsmebasti · 2023-10-07T23:40:00Z

I am using the [a] [s] [d] keys to make it visible if missing, they are configured as layout shortcuts by default...

musjj · 2024-08-31T07:48:21Z

Just had this issue too. On Firefox, localStorage.clear() doesn't work and I had to go to Web Developer Tools -> Storage -> Session Storage and clear it.

goralight closed this as completed Oct 14, 2019

shilman added question / support ui labels Oct 14, 2019

phoenisx mentioned this issue Dec 29, 2019

[WIP] [FEAT] Add Storybook to maintain Chapter's Design System freeCodeCamp/chapter#312

Closed

3 tasks

shilman reopened this Apr 26, 2020

shilman added bug todo and removed question / support labels Apr 26, 2020

vogtn mentioned this issue Nov 3, 2020

accessibility: localization & rtl microsoftgraph/microsoft-graph-toolkit#619

Merged

5 tasks

2stash mentioned this issue Dec 31, 2020

added storysource 5.3.18 atlassian/react-beautiful-dnd#2040

Merged

shilman closed this as completed Mar 28, 2022

HosseinAgha mentioned this issue Jul 25, 2022

@storybook/addon-actions@npm:6.5.0-alpha.64 causes configuration error #17996

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Addons panel not showing - but knobs are still working(?) #8383

Addons panel not showing - but knobs are still working(?) #8383

goralight commented Oct 11, 2019 •

edited

Loading

shilman commented Oct 14, 2019

goralight commented Oct 14, 2019

shilman commented Oct 14, 2019

josephdicdican commented Apr 24, 2020

bradennapier commented Apr 25, 2020

shilman commented Apr 26, 2020 •

edited

Loading

Mazuh commented Apr 29, 2020

ekilah commented May 2, 2020

jessicarobins commented May 2, 2020 •

edited

Loading

tomasztunik commented May 29, 2020

ruicarest commented Jun 17, 2020

nhunt3 commented Jul 23, 2020

milenaNeumann commented Aug 17, 2020

MrSunshyne commented Sep 9, 2020

valgaze commented Sep 16, 2020 •

edited

Loading

cybervaldez commented Oct 6, 2020 •

edited

Loading

surdu commented Oct 13, 2020

CiprianaM commented Oct 13, 2020

ahuggins commented Jun 16, 2021

surdu commented Jun 24, 2021

R-Bower commented Jun 27, 2021 •

edited

Loading

shilman commented Jun 28, 2021

surdu commented Jun 28, 2021

Gregorein commented Oct 29, 2021

PeteJStewart commented Dec 1, 2021

softdays commented Mar 24, 2022

shilman commented Mar 28, 2022

Wouter125 commented Jan 26, 2023

nuxcodes commented Apr 4, 2023

rosskevin commented May 23, 2023 •

edited

Loading

charlestbell commented Sep 5, 2023

itsmebasti commented Oct 7, 2023

musjj commented Aug 31, 2024

Addons panel not showing - but knobs are still working(?) #8383

Addons panel not showing - but knobs are still working(?) #8383

Comments

goralight commented Oct 11, 2019 • edited Loading

shilman commented Oct 14, 2019

goralight commented Oct 14, 2019

shilman commented Oct 14, 2019

josephdicdican commented Apr 24, 2020

bradennapier commented Apr 25, 2020

shilman commented Apr 26, 2020 • edited Loading

Mazuh commented Apr 29, 2020

ekilah commented May 2, 2020

jessicarobins commented May 2, 2020 • edited Loading

tomasztunik commented May 29, 2020

ruicarest commented Jun 17, 2020

nhunt3 commented Jul 23, 2020

milenaNeumann commented Aug 17, 2020

MrSunshyne commented Sep 9, 2020

valgaze commented Sep 16, 2020 • edited Loading

cybervaldez commented Oct 6, 2020 • edited Loading

surdu commented Oct 13, 2020

CiprianaM commented Oct 13, 2020

ahuggins commented Jun 16, 2021

surdu commented Jun 24, 2021

R-Bower commented Jun 27, 2021 • edited Loading

shilman commented Jun 28, 2021

surdu commented Jun 28, 2021

Gregorein commented Oct 29, 2021

PeteJStewart commented Dec 1, 2021

softdays commented Mar 24, 2022

shilman commented Mar 28, 2022

Wouter125 commented Jan 26, 2023

nuxcodes commented Apr 4, 2023

rosskevin commented May 23, 2023 • edited Loading

charlestbell commented Sep 5, 2023

itsmebasti commented Oct 7, 2023

musjj commented Aug 31, 2024

goralight commented Oct 11, 2019 •

edited

Loading

shilman commented Apr 26, 2020 •

edited

Loading

jessicarobins commented May 2, 2020 •

edited

Loading

valgaze commented Sep 16, 2020 •

edited

Loading

cybervaldez commented Oct 6, 2020 •

edited

Loading

R-Bower commented Jun 27, 2021 •

edited

Loading

rosskevin commented May 23, 2023 •

edited

Loading