Storybook: addon-knobs not working with vue from v4.0.8

[samit4me]

Upgraded from 4.0.4 to 4.0.12 and knobs were no longer visible or working. Tested each version and 4.0.7 works but 4.0.8 does not. I assume it's something to do with #4773.

Typical use of knobs looks something like this (if that helps):

template: '<simple-knob-example :age="age" />',
data: () => ({
  age: 40,
}),

I don't see any error messages or anything, but if there is anything else I can do to help please let us know.

[nickdandakis]

Upgraded from 3.4.0 to 4.0.12 and came across the same issue. I can get the knobs to show up with my 3.4.0 config (in my case they're added globally in .storybook/config.js), but changing the value of a knob doesn't update the component's props.

You can even see it being broken on the official Vue storybook example.

It looks like @y-nk's update in #4773 breaks the template string injection approach. As in, something like this no longer works:

  .add('All knobs', () => {
    const name = text('Name', 'Jane');
    const stock = number('Stock', 20, {
      range: true,
      min: 0,
      max: 30,
      step: 5,
    });
    const fruits = {
      Apple: 'apples',
      Banana: 'bananas',
      Cherry: 'cherries',
    };
    const fruit = select('Fruit', fruits, 'apples');
    const price = number('Price', 2.25);

    const colour = color('Border', 'deeppink');
    const today = date('Today', new Date('Jan 20 2017 GMT+0'));
    const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
    const nice = boolean('Nice', true);

    const stockMessage = stock
      ? `I have a stock of ${stock} ${fruit}, costing $${price} each.`
      : `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`;
    const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
    const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };

    button('Arbitrary action', action('You clicked it!'));

    return {
      template: `
          <div style="border:2px dotted ${colour}; padding: 8px 22px; border-radius: 8px">
            <h1>My name is ${name},</h1>
            <h3>today is ${new Date(today).toLocaleDateString('en-US', dateOptions)}</h3>
            <p>${stockMessage}</p>
            <p>Also, I have:</p>
            <ul>
              ${items.map(item => `<li key=${item}>${item}</li>`).join('')}
            </ul>
            <p>${salutation}</p>
          </div>
        `,
    };
  })

@y-nk, I understand that the story I linked to was a false-positive, but to have it up as an example that outright doesn't work anymore is very confusing. We're essentially supposed to map knobs to the story's props via the default value of the prop, and then use the props in the template string. I'm all for that, because template string injection always felt too hacky to me.

However, I have the same issue as @Laslo89, where I've defined a global decorator (in my case, it applies some global styling to make storybook consistent with the main web app) that breaks addon-knobs. Commenting out my global decorator fixes knob propagation to props. Is there any open issue I can track that fixes this global decorator issue with the latest addon-knobs?

I'll work on a PR that updates the addon-knobs example for vue-kitchen-sink in the meantime.

[mcarlucci]

Seeing the same issue.

[gapipro]

I don't agree with the props approach at all. Why would you need to specify props again if they are already specified in a component it self? It brings additional not needed complexity to the stories.

Before upgrade my solution that worked was like this:

.add('Choice with knobs', () => {
    return {
      components: { Choice },
      data() {
        return {
          value: boolean('Value', false),
          disabled: boolean('Disabled', false),
          text: text('Text', 'Are you awesome?')
        };
      },
      template: `
                  <Choice 
                    :text="text" 
                    :disabled="disabled" 
                    :value.sync="value" 
                  />`,
      methods: {}
    };
  });

It's clean, simple and story can be directly copied from storybook for reuse.

[luisjs]

Seeing the same issue with v4.0.8 and above. Knobs won't update the story when visible, and are only visible after a page refresh, meaning they disappear as soon as I navigate to another story.

[nickdandakis]

@gapipro I think the reasoning for deprecating template string injection and binding to data (your example) is to keep it consistent with React. Your example is mapping knobs to state, which isn't "correct". Knobs are UI that update props to your story, which then update the underlying component.

Your example then becomes:

.add('Choice with knobs', () => {
    return {
      components: { Choice },
      props: {
        value: {
          type: Boolean,
          default: boolean('Value', false)
        },
        disabled: {
          type: Boolean,
          default: boolean('Disabled', false)
        },
        text: {
          type: String,
          default: text('Text', 'Are you awesome?')
        }
      },
      template: `
        <Choice 
          :text="text" 
          :disabled="disabled" 
          :value.sync="value" 
        />
      `,
      methods: {}
    };
  });

The only thing I personally dislike is binding the knob to default. But other than that, it makes more sense (paradigm-wise) to bind knobs to props rather than state.

@luisjs if you've already refactored your usage of addon-knobs to map to props instead of data or template injection and it still doesn't work, try disabling any global decorators (decorators you apply in .storybook/config.js).

[luisjs]

@luisjs if you've already refactored your usage of addon-knobs to map to props instead of data or template injection and it still doesn't work, try disabling any global decorators (decorators you apply in .storybook/config.js).

@nickdandakis I've just ported my usage of the knobs, and it seems to be working wonderfully.

There was also a problem in the way I was generating the stories via my story factory, which caused the "knobs not showing up after navigating" issue. It's now fixed as well, and apologies for implying it was a Storybook issue.

---

Here is a snippet of my code now, for demo purposes. Don't know if it's the right way to declare a story, but in our project it seems to be working so far.

// utils/makeStoryGenerator.ts

export default function makeStoryGenerator(stories: any) {
    return (name: string, code: string, knobs?: () => object, options?: object) => {
        code = code.replace(/%%%/g, 'v-bind="$props"');
        const componentName = upperFirst(camelCase(name));
        const componentObject = (Vue as any).options.components[componentName];
        const componentOptions = componentObject && componentObject.options ? componentObject.options : {};
        stories.add(name, () => {
            const data = typeof knobs === 'function' ? knobs() : {};
            return {
                template: `<demo-story
                    name="${name}"
                    code="${escape(code)}"
                    :componentDocs="componentDocs"
                    :componentOptions="componentOptions"
                    :slotData="data"
                >${code}</demo-story>`,
                props: mapValues(data, (value: any, key: string) => {
                    const prop = componentOptions.props[key];
                    const type = prop ? prop.type : null;
                    return {
                        type: type || String,
                        default: value
                    };
                }),
                data: () => ({
                    componentOptions,
                    componentDocs: componentOptions ? componentOptions.__docs : null,
                    data
                })
            };
        }, options);
        return story;
    };
}

// stories/elements.js

const makeStory = makeStoryGenerator(storiesOf('Objects|Elements', module));

// ...

makeStory('el-badge', `<el-badge %%% />`, () => ({
    value: number('value', 12)
}));

The %%% is just a shortcut, so I and my team don't have to map every single prop by hand for every component example we create.

[Moustafa-WW]

Having the same issue as above.

Knobs don't work with any version above 4.0.2, tried with 4.0.7 and that didn't work for me either.

Remove All Global Decorators

I was only able to get it working by removing all global decorators including withKnobs. And only adding the knobs decorator to the story itself.

storiesOf('MyComponent', module)
  .addDecorator(withKnobs)
  .add('Simple', () => ({
    props: {
      name: {
        type: String,
        default: text('Name', 'John Doe'),
      },
    },
    template: `<div>I am {{ name }}</div>`,
  }))

Make sure your config.js doesn't include any global decorators

[andyhall]

I'm confused. Several comments in this thread seem to suggest that this is an intended change, and that Vue stories should be updated to move knobs onto the props object. But #4773 doesn't mention any breaking changes like this - to the contrary it seems to say that putting knobs in the template should still work (though it may cause stories to get destroyed and recreated every time a knob value updates).

Could @y-nk or @igor-dv clarify what's happening here - is this just a bug, or do all Vue knobs stories need to be ported to the new behavior?

[igor-dv]

@backbone87 , didn't you fix this ?

[backbone87]

Knobs need to be defined as props. I didnt change that, but fixed some Integration incompatibilities

Edit: knobs in templates do not work anymore, but this was also the case before my clean up PR

[samit4me]

Edit: knobs in templates do not work anymore, but this was also the case before my clean up PR

So I feel a little confused now 🤔, are you saying knobs are no longer supported with vue? They definitely worked in v4.0.7 but don't in v4.0.8.

Reading above it sounds like props are preferred over data, so I've tried to use props instead of data and the knobs show in storybook which is an improvement, but changing the values does not update the component :(

Does anyone have a working example on how to get knobs working with vue in v4.0.8 or later?

[backbone87]

The example from https://github.com/storybooks/storybook/issues/4947#issuecomment-448001928 should work. Also you should try the 4.2 alpha which contains https://github.com/storybooks/storybook/pull/5057 and fixes a lot of problems with knobs and vue

[zwaardje]

Edit: knobs in templates do not work anymore, but this was also the case before my clean up PR

So I feel a little confused now 🤔, are you saying knobs are no longer supported with vue? They definitely worked in v4.0.7 but don't in v4.0.8.

Reading above it sounds like props are preferred over data, so I've tried to use props instead of data and the knobs show in storybook which is an improvement, but changing the values does not update the component :(

Does anyone have a working example on how to get knobs working with vue in v4.0.8 or later?

I have the same problem. The example above does not work either.

[samit4me]

Awesome, thanks for the reply @backbone87.

So on v4.0.7 using data my stories work as expected. After trying the suggestions I am still having issues. Below is a list of what I've tried and there outcomes:

• Converted data over to props and this works on v4.0.7.
• Updated to latest stable version v4.1.4, things build and the knobs are visible but they do not work (e.g. changing a knob value does not update the component).
• Rolled back to v4.0.8 and same issue as v4.1.4, so something definitely changed in that version.
• After this I then updated to latest alpha v4.2.0-alpha.8 and got to following error.

Error: `template` or `render` must be on component options, but got undefined.
    at parseStoryComponent (http://localhost:9001/vendors~main.9b409e8ccb449a15afa6.bundle.js:83068:15)
    at http://localhost:9001/vendors~main.9b409e8ccb449a15afa6.bundle.js:84339:18
    at VueInfoAddon (http://localhost:9001/vendors~main.9b409e8ccb449a15afa6.bundle.js:84398:33)
    at http://localhost:9001/vendors~main.9b409e8ccb449a15afa6.bundle.js:21309:28
    at http://localhost:9001/vendors~main.9b409e8ccb449a15afa6.bundle.js:21310:17
    at wrapper (http://localhost:9001/vendors~main.9b409e8ccb449a15afa6.bundle.js:8808:12)
    at http://localhost:9001/vendors~main.9b409e8ccb449a15afa6.bundle.js:12649:16
    at http://localhost:9001/vendors~main.9b409e8ccb449a15afa6.bundle.js:12661:32
    at http://localhost:9001/vendors~main.9b409e8ccb449a15afa6.bundle.js:21309:28
    at http://localhost:9001/vendors~main.9b409e8ccb449a15afa6.bundle.js:21310:17

The story I have been testing is super basic and looks a little like the following:

...

storiesOf(__filenamespace, module)
  .addDecorator(VueInfoAddon)
  .addDecorator(withKnobs)
  .add('MyStoryName', () => ({
    components: { MyIconComponent },
    props: {
      animate: { type: Boolean, default: boolean('animate', true) },
      disabled: { type: Boolean, default: boolean('disabled', true) },
      color: { type: String, default: select('color', ['', 'red', 'green', 'blue']) },
    },
    template: `
      <MyIconComponent
        :animate="animate"
        :disabled="disabled"
        :color="color"
      />
    `,
    // data: () => ({
    //   animate: boolean('animate', true),
    //   disabled: boolean('disabled', true),
    //   color: select('color', ['', 'red', 'green', 'blue']),
    // }),
    propsDescription: {
      animate: 'Animate if true.',
      disabled: 'Show as disabled (grey).',
      color: 'Color of the icon.',
    },
  }));

If there is anything else I can do to help, please let me know, cheers 🍻

[backbone87]

could you try it without VueInfoAddon? Your story looks correct, but the way how storybook-vue creates wrapper components for stories and decorators changed. so some decorators may not get what they expect

[backbone87]

i checked VueInfoAddon and it does not work with 4.2 alpha. The problem is that in 4.2 alpha all story and decorator return values (string or component options) are turned into a VueConstructor (Vue.extend) before being passed to the next decorator. Before that a decorator could receive various stuff and now it is normalized (always VueConstructor). The change in VueInfoAddon is simple:
https://github.com/pocka/storybook-addon-vue-info/blob/master/src/withInfo/index.ts#L52

let story = storyFn();
if (story._isVue) {
  story = story.options;
}

(This is with backwards compatibility) If you dont need BC:

const story = storyFn().options;

Edit: i didnt test this, but it should work

[samit4me]

Oh nice, thanks @backbone87, after updating to 4.2.0-alpha.10 I remove VueInfoAddon from that story and it worked 🎉 .

I then modified the src of storybook-addon-vue-info in my node_modules with both of the variation mentioned above but it didn't appear to work.

So moving forward it kinda looks like storybook-addon-vue-info is the problem. What's your thoughts, should we close this issue?

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

[alexander-heimbuch]

This is still not working for me. I updated to exclusively use props instead of template interpolation all knobs are displayed correctly but on change the component doesn't rerender. I don't have storybook-addon-vue-info installed.

[HerrBertling]

FYI: For me, the props way worked after removing the only other addon I had globally registered in my config.js 🥁

it was addon-centered 🤷‍♂️

So a wild guess without looking further into it (and having no idea of how storybook addon registration works): Something seems to break when registering other addons globally? 🤔

EDIT: Apparently, I'm not the only one having discovered this :) https://github.com/storybooks/storybook/issues/5211

[alexander-heimbuch]

@HerrBertling After removing addon-centered it rerenders. Thanks for the hint!

[sirberus]

Knobs don't work with any version above 4.0.2, tried with 4.0.7 and that didn't work for me either.

Make sure your config.js doesn't include any global decorators

All of this was necessary for me to do what I intended. I tried 4.2.0, 4.0.7, 5.0.0-beta... still only 4.0.2 solved most of my issues and no global decorators solved the rest.

[b0g3r]

Why I should remove all of my global decorators for stable work of re-rendering with knobs changing?

I have a simple decorator like

addDecorator(() => ({
  template: '<v-app><story/></v-app>',
}));

for vuetify support, but it broke knobs re-render:

storiesOf('MyComponent', module)
  .addDecorator(withKnobs)
  .add('story as a component', () => {
    return {
      components: { MyComponent },  
      props: {
        text: {
          default: text('text', 'component text') 
        }
      },
      template: `<my-component
        :text="text"
      ></my-component>`,
    }
  });

I think this is not ok for a very popular library have incompatible with other decorators. And what should I do, if I want and the vuetify support and the knobs support?

[nickdandakis]

@b0g3r, you could try to use v4.2.0-alpha.6 or newer (as per #5048) to see if that fixes your global decorator issue.

[shilman]

@nickdandakis @b0g3r We're in 5.0 RC mode right now -- would love your feedback if it's working for you so we can get out a stable 5.0 ASAP. Thanks!

[Kailaash-Balachandran]

The problem seems to persist in 5.0.0-rc.3 and I don't have any global decorators or additional add ons
Issue: Changing knobs doesn't re render the component.

[b0g3r]

@nickdandakis v4.2.0-alpha.6 is working with decorators 🎉

@shilman v5.0.0.-rc.3 doesn't work and down with exceptions:

> start-storybook -p 9001 -c .storybook

info @storybook/vue v5.0.0-rc.3
info 
info => Loading presets
info => Loading presets
info => Loading custom addons config.
info => Loading custom webpack config (full-control mode).

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

(node:57387) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'compilation' of undefined
    at buildDevStandalone (/Users/boger/VSCProject/postpost-frontend/node_modules/@storybook/core/dist/server/build-dev.js:347:58)
    at process.internalTickCallback (internal/process/next_tick.js:77:7)
(node:57387) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:57387) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

[Kailaash-Balachandran]

@b0g3r To fix the build set up, follow the 5.0 migration step
https://github.com/storybooks/storybook/blob/next/MIGRATION.md#from-version-41x-to-50x

[shilman]

I'm adding this to the 5.0 milestone, meaning it will get priority as we iron out the 5.0 release over the next week.

@b0g3r please let me know what happens after you migrate your custom webpack config per @Kailaash-Balachandran 's note

[Jack-Barry]

I'm still having trouble with this on 5.0.0-rc.5.

• I don't have any global decorators
• props are updating as expected
• Cannot get attributes in data() to update the component

MyButton.vue

<template>
  <button :disabled="!enabled">{{ buttonText }}</button>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  props: {
    initialEnabled: { type: Boolean, default: true },
    buttonText: { type: String, default: 'Click Me' }
  },
  data() {
    return {
      enabled: this.initialEnabled,
    }
  }
})
</script>

MyButton.stories.ts

import { storiesOf, Story } from '@storybook/vue'
import { withKnobs, text, boolean } from '@storybook/addon-knobs'

import MyButton from './MyButton.vue'

const stories: Story = storiesOf('MyButton', module)

stories.addDecorator(<any>withKnobs)

stories.add('Default', () => ({
  components: { MyButton },
  props: {
    buttonText: {
      default: text('buttonText', 'Click Me NOW')
    }
  },
  data() {
    return {
      enabled: boolean('enabled', true)
    }
  },
  template: `<my-button :buttonText="buttonText" :enabled="enabled"></my-button>`
}))

I have tried setting the data attribute the following ways to no avail:

data() {
  return { enabled: { default: boolean(...) } }
}

data: {
  enabled: boolean(...)
}

data: {
  enabled: { default: boolean(...) }
}

If I set it as data() when I click the checkbox the field disappears without the intended result taking place. Have also tried setting enabled in the props. Not sure if I'm just trying to make Storybook do something it's not supposed to or completely missing the intended way to do it in the docs somewhere.

[nickdandakis]

Hey @Jack-Barry,

I'm a little confused as to why you're passing an enabled prop to MyButton when your prop is called initialEnabled.

Does this work for you?

import { storiesOf, Story } from '@storybook/vue'
import { withKnobs, text, boolean } from '@storybook/addon-knobs'

import MyButton from './MyButton.vue'

const stories: Story = storiesOf('MyButton', module)

stories.addDecorator(<any>withKnobs)

stories.add('Default', () => ({
  components: { MyButton },
  props: {
    buttonText: {
      default: text('buttonText', 'Click Me NOW')
    },
    initialEnabled: {
      default: boolean('initialEnabled', true)
    }
  },
  template: `<my-button :button-text="buttonText" :initial-enabled="initialEnabled"></my-button>`
}))

[Jack-Barry]

The initialEnabled is used so that the component can be initialized in an enabled or disabled state. In data(), enabled is pulling in initialEnabled for this reason, but the _state_ can change which is what the rest of my component uses to determine styling rules etc. This is to be consistent with Vue's docs.

I _could_ just set a prop to say enabled or disabled, but then my Jest setup throws a bunch of warnings at me to not manipulate props directly.

Using the initialEnabled as prop in Storybook doesn't do much for me because toggling it doesn't update the _state_ of enabled.

Maybe I have some confusion about how to actually use Storybook, but I thought that it would be possible to toggle different state parameters to see the change in the component that would result from state changes.

[nickdandakis]

Your idea of what Storybook and addon-knobs does is correct. However, I think you're confused about how props and state work in Vue, which is irrelevant to Storybook and this issue.

Consider only setting enabled as a prop, instead of deriving state from it (which is generally an anti-pattern), and look into the pattern of controlled vs uncontrolled components. You're mixing the two here, which can be done, but I think your implementation is a bit off.

Hopefully that helps, I'm trying to stay on-topic!

[Jack-Barry]

@nickdandakis No worries, thanks for the pointers! I'll rethink the approach.

[b0g3r]

@shilman
I started a migration to storybook 5.0, but saw some errors :(

First, I try to update only storybook:

// package.json
"@storybook/addon-knobs": "^4.1.12",
"@storybook/vue": "5.0.0-rc.7",
"@types/storybook__vue": "^3.3.2",

Then I rewrote webpack.config.js to new format and has error like this (in browser console, not on build stage):

Uncaught TypeError: Object(...) is not a function
    at Function.div (vendors~main.e8ffd6fee3d0ccf61f42.bundle.js:2944)
    at Object../node_modules/@storybook/components/dist/Badge/Badge.js (vendors~main.e8ffd6fee3d0ccf61f42.bundle.js:7323)
    at __webpack_require__ (runtime~main.7b4918090cfe19b7778a.bundle.js:79)
    at Object../node_modules/@storybook/components/dist/index.js (vendors~main.e8ffd6fee3d0ccf61f42.bundle.js:8826)
    at __webpack_require__ (runtime~main.7b4918090cfe19b7778a.bundle.js:79)
    at Object../node_modules/@storybook/addon-knobs/dist/components/Panel.js (vendors~main.e8ffd6fee3d0ccf61f42.bundle.js:4410)
    at __webpack_require__ (runtime~main.7b4918090cfe19b7778a.bundle.js:79)
    at Object../node_modules/@storybook/addon-knobs/dist/register.js (vendors~main.e8ffd6fee3d0ccf61f42.bundle.js:6600)
    at __webpack_require__ (runtime~main.7b4918090cfe19b7778a.bundle.js:79)
    at Object../node_modules/@storybook/addon-knobs/register.js (vendors~main.e8ffd6fee3d0ccf61f42.bundle.js:6631)

After updating @storybook/addon-knobs also to 5.0, I got an error on build stage:

:see_no_evil:

info @storybook/vue v5.0.0-rc.7
info 
info => Loading presets
WARN   Failed to load preset: "/Users/boger/VSCProject/postpost-frontend/node_modules/@storybook/core/dist/server/manager/manager-preset.js"
ERR! Error: Cannot find module '@emotion/styled/package.json'
ERR!     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)
ERR!     at Function.resolve (internal/modules/cjs/helpers.js:30:19)
ERR!     at Object.<anonymous> (/Users/boger/VSCProject/postpost-frontend/node_modules/@storybook/ui/paths.js:7:38)
ERR!     at Module._compile (internal/modules/cjs/loader.js:721:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:620:32)
ERR!     at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:552:3)
ERR!     at Module.require (internal/modules/cjs/loader.js:657:17)
ERR!     at require (internal/modules/cjs/helpers.js:22:18)
ERR!     at Object.<anonymous> (/Users/boger/VSCProject/postpost-frontend/node_modules/@storybook/core/dist/server/manager/manager-webpack.config.js:18:37)
ERR!     at Module._compile (internal/modules/cjs/loader.js:721:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:620:32)
ERR!     at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:552:3)
ERR!  { Error: Cannot find module '@emotion/styled/package.json'
ERR!     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)
ERR!     at Function.resolve (internal/modules/cjs/helpers.js:30:19)
ERR!     at Object.<anonymous> (/Users/boger/VSCProject/postpost-frontend/node_modules/@storybook/ui/paths.js:7:38)
ERR!     at Module._compile (internal/modules/cjs/loader.js:721:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:620:32)
ERR!     at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:552:3)
ERR!     at Module.require (internal/modules/cjs/loader.js:657:17)
ERR!     at require (internal/modules/cjs/helpers.js:22:18)
ERR!     at Object.<anonymous> (/Users/boger/VSCProject/postpost-frontend/node_modules/@storybook/core/dist/server/manager/manager-webpack.config.js:18:37)
ERR!     at Module._compile (internal/modules/cjs/loader.js:721:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:620:32)
ERR!     at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:552:3)
ERR!   stack:
ERR!    "Error: Cannot find module '@emotion/styled/package.json'\n    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)\n    at Function.resolve (internal/modules/cjs/helpers.js:30:19)\n    at Object.<anonymous> (/Users/boger/VSCProject/postpost-frontend/node_modules/@storybook/ui/paths.js:7:38)\n    at Module._compile (internal/modules/cjs/loader.js:721:30)\n    at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)\n    at Module.load (internal/modules/cjs/loader.js:620:32)\n    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)\n    at Function.Module._load (internal/modules/cjs/loader.js:552:3)\n    at Module.require (internal/modules/cjs/loader.js:657:17)\n    at require (internal/modules/cjs/helpers.js:22:18)\n    at Object.<anonymous> (/Users/boger/VSCProject/postpost-frontend/node_modules/@storybook/core/dist/server/manager/manager-webpack.config.js:18:37)\n    at Module._compile (internal/modules/cjs/loader.js:721:30)\n    at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)\n    at Module.load (internal/modules/cjs/loader.js:620:32)\n    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)\n    at Function.Module._load (internal/modules/cjs/loader.js:552:3)",
ERR!   code: 'MODULE_NOT_FOUND' }
info => Loading presets
info => Loading custom webpack config (full-control mode).
Starting type checking service...
Using 1 worker with 2048MB memory limit
 10% building 2/4 modules 2 active ...ook/core/dist/server/preview/globals.js




EntryModuleNotFoundError: Entry module not found: Error: Can't resolve './src' in '/Users/boger/VSCProject/postpost-frontend'
    at moduleFactory.create (/Users/boger/VSCProject/postpost-frontend/node_modules/@storybook/core/node_modules/webpack/lib/Compilation.js:980:31)
    at factory (/Users/boger/VSCProject/postpost-frontend/node_modules/@storybook/core/node_modules/webpack/lib/NormalModuleFactory.js:397:22)
    at resolver (/Users/boger/VSCProject/postpost-frontend/node_modules/@storybook/core/node_modules/webpack/lib/NormalModuleFactory.js:130:21)
    at asyncLib.parallel (/Users/boger/VSCProject/postpost-frontend/node_modules/@storybook/core/node_modules/webpack/lib/NormalModuleFactory.js:224:22)
    at /Users/boger/VSCProject/postpost-frontend/node_modules/neo-async/async.js:2825:7
    at /Users/boger/VSCProject/postpost-frontend/node_modules/neo-async/async.js:6886:13
    at normalResolver.resolve (/Users/boger/VSCProject/postpost-frontend/node_modules/@storybook/core/node_modules/webpack/lib/NormalModuleFactory.js:214:25)
    at doResolve (/Users/boger/VSCProject/postpost-frontend/node_modules/enhanced-resolve/lib/Resolver.js:184:12)
    at hook.callAsync (/Users/boger/VSCProject/postpost-frontend/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/Users/boger/VSCProject/postpost-frontend/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:15:1)
    at resolver.doResolve (/Users/boger/VSCProject/postpost-frontend/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:37:5)
    at hook.callAsync (/Users/boger/VSCProject/postpost-frontend/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/Users/boger/VSCProject/postpost-frontend/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:15:1)
    at hook.callAsync (/Users/boger/VSCProject/postpost-frontend/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/Users/boger/VSCProject/postpost-frontend/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:12:1)
    at resolver.doResolve (/Users/boger/VSCProject/postpost-frontend/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:42:38)
resolve './src' in '/Users/boger/VSCProject/postpost-frontend'
  using description file: /Users/boger/VSCProject/postpost-frontend/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /Users/boger/VSCProject/postpost-frontend/package.json (relative path: ./src)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Users/boger/VSCProject/postpost-frontend/src is not a file
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        /Users/boger/VSCProject/postpost-frontend/src.wasm doesn't exist
      .mjs
        Field 'browser' doesn't contain a valid alias configuration
        /Users/boger/VSCProject/postpost-frontend/src.mjs doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /Users/boger/VSCProject/postpost-frontend/src.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /Users/boger/VSCProject/postpost-frontend/src.json doesn't exist
      as directory
        existing directory
          using path: /Users/boger/VSCProject/postpost-frontend/src/index
            using description file: /Users/boger/VSCProject/postpost-frontend/package.json (relative path: ./src/index)
              no extension
                Field 'browser' doesn't contain a valid alias configuration
                /Users/boger/VSCProject/postpost-frontend/src/index doesn't exist
              .wasm
                Field 'browser' doesn't contain a valid alias configuration
                /Users/boger/VSCProject/postpost-frontend/src/index.wasm doesn't exist
              .mjs
                Field 'browser' doesn't contain a valid alias configuration
                /Users/boger/VSCProject/postpost-frontend/src/index.mjs doesn't exist
              .js
                Field 'browser' doesn't contain a valid alias configuration
                /Users/boger/VSCProject/postpost-frontend/src/index.js doesn't exist
              .json
                Field 'browser' doesn't contain a valid alias configuration
                /Users/boger/VSCProject/postpost-frontend/src/index.json doesn't exist
WARN force closed preview build
WARN FATAL broken build!, will close the process,
WARN Fix the error below and restart storybook.

[b0g3r]

Okay, I just add @emotion/styled to dependencies and it solved my problem 🎉

Why @emotion/styled was not in my dependency? Maybe it implicit dependency on some addon?

[b0g3r]

I think this issue is done. The solution is upgrading to 4.2 or 5.0, but both currently aren't released.

[shilman]

@b0g3r Glad to hear you got it working!

Re: @emotion/styled I suspect it's a yarn issue and if you'd deleted node_modules and possibly yarn.lock you wouldn't have had to add it as a dependency (It's a direct dep of @storybook/theming which is a dep of @storybook/ui)

Re: release: 4.2 won't be released (we went directly to 5). We're targeting Monday for the 5.0 release.

[kengogo]

The problem is still being? I tried with 5.1.0-alpha.2, 5.0.1 and 5.0.0, but knobs don't work reactively 😢 so I'm stopping at 4.0.7 even for now.

[backbone87]

@kengogo It is working fine for me, if you still have problems, open a new issue with all the relevant information for your use case (including code samples/reproduction repo)

[kengogo]

@backbone87 Great to know! I'd try to take a look more deeply (hesitated for a while after I saw this issue). Thanks for the info ✨

[shilman]

@kengogo SB5 is out -- please give it a try today!

[wbern]

I can confirm that the issue is actually a regression in versions higher than 5.1.9.

Using the default property under props in a story worked like a charm in 5.1.9, but broke after that. I tested removing the ^ in the version specifier and used 5.1.9 directly, then it worked.

Feel free to use my story below. We use vue-custom-element so the vue component rendered below is not an actual vue component, but it should work either way in my opinion.

import Vue from 'vue';
import { storiesOf } from '@storybook/vue';
import { withKnobs, text, boolean } from '@storybook/addon-knobs';
import { addScriptTagToDocumentForStory } from '@org/storybook-browser-utils';

import vueCustomElement from 'vue-custom-element';

Vue.use(vueCustomElement);

require.context('../dist/@org', true, /\.autoregister\./);
addScriptTagToDocumentForStory('org-arrow-button.autoregister');

const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1);
const toKebabCase = text =>
    text
        // make sure first character is in lower case (in case of PascalCasing)
        .replace(/^./, firstLetter => firstLetter.toLowerCase())
        // convert camelCase to kebab-case
        .replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2')
        .toLowerCase();
const mapPropsToKebabCaseAttributes = props => {
    let kebabCaseAttributes = {};

    Object.keys(props).forEach(propName => {
        kebabCaseAttributes[toKebabCase(propName)] = props[propName];
    });

    return kebabCaseAttributes;
};
const kebabCaseToPascalCase = str =>
    str
        .replace(/^./, firstLetter => firstLetter.toUpperCase())
        .replace(/([-_][a-z])/g, group =>
            group.toUpperCase().replace('-', ' '),
        );
const extractCategory = () =>
    capitalize(
        __dirname.replace(
            /(^.*micro-frontends\/)(.*\/org-arrow-button).*/,
            '$2',
        ),
    );

Vue.config.ignoredElements = ['org-arrow-button'];

storiesOf(extractCategory(), module)
    .addDecorator(withKnobs)
    .add('Default', () => {
        let component = {
            methods: {
                onLoad(e) {
                    // sender = e.detail.sender;
                },
            },
            components: {},
            props: {
                arrowDown: {
                    type: Boolean,
                    default: () => boolean('arrowDown', true),
                },
                arrowUpLabel: {
                    type: String,
                    default: () => text('arrowUpLabel', 'Collapse'),
                },
                arrowDownLabel: {
                    type: String,
                    default: () => text('arrowDownLabel', 'Expand'),
                },
            },
            mounted() {
                window.storyComponent = this;
            },
            computed: {
                propsAsKebabCase() {
                    return mapPropsToKebabCaseAttributes(this.$props);
                },
            },
            watch: {},
            template: `
                <div
                    class="story-component-page"
                    @org-arrow-button:loaded="onLoad"
                >
                    <h1 class="heading-mega">${kebabCaseToPascalCase(
                        'org-arrow-button',
                    )}</h1>
                    <div>
                        <p>
                            This is a super simple button
                        </p>
                    </div>
                    <org-arrow-button v-bind="propsAsKebabCase"></org-arrow-button>
                </div>
            `,
        };

        return component;
    });
// .add('With something else', () => {
//     return { template: wrapper };
// });

[moltar]

Can confirm what @wbern said.

After downgrading to 5.1.9 the knobs start to work for me as well.

[wbern]

UPDATE: THE NEW EXPORT SYNTAX MAKES KNOBS WORK.

Did some additional testing now:

It did stop working since after 5.1.9, because I tested 5.2.0 just now and it doesn't work.

EDIT: HOWEVER, I just found out that 5.2.1 works perfectly fine with the new export syntax, I just didn't realize it because I had made a mistake in my component. So basically, you broke support for knobs in the old syntax, but the new one is working fine..

This is the story I used, which IS WORKING with 5.2.1. Much more simplified this time around (with defaults from the sb cli basically), but the downside is that the old syntax is not supported for knobs anymore...

import { withKnobs, number } from '@storybook/addon-knobs'
import { addDecorator } from '@storybook/vue'
import { linkTo } from '@storybook/addon-links'

import HelloWorld from '../src/components/HelloWorld'

export default {
    title: 'HelloWorld',
}

addDecorator(withKnobs)

export const toStorybook = () => ({
    components: { HelloWorld },
    props: {
        initialFloors: {
            type: Number,
            default: () => number('initialFloors', 0),
        },
    },
    template: '<HelloWorld v-bind="$props" />',
    methods: { action: linkTo('Button') },
})

toStorybook.story = {
    name: 'to Storybook',
}

[shilman]

@wbern Can you show me the equivalent in the old format? It doesn't make sense that it would work in one and not the other. (The new syntax gets translated to the old syntax under the hood, so I think something else is going on.) Thanks!

[wbern]

@shilman please see the code snippet in comment further up, that's the old format which didn't work for me in the version described in that post. https://github.com/storybookjs/storybook/issues/4947#issuecomment-532616346

[wbern]

Oh I see what you mean now.. I'll have to come back and test later..

[f3ltron]

The issue still exist update the first time and after no more update on change

[shilman]

Closing this. Please open a a fresh issue if this is affecting you.