Storybook: [Addon: Knobs] Updating text fields is laggy and frequently overwrites keys.

[kristremblay]

Describe the bug
Editing text fields in knobs seemingly lags behind key presses, and deletes any characters after one of such instances. It's like the state is updating in a convoluted manner, and previously entered characters are overwritten. For example, quickly typing "Kris Tremblay" at the same speed I'd normally type yielded "Krisblay".

To Reproduce
Steps to reproduce the behavior:

1. Open any component with a text knob
2. Change the text knob to a string that is more than a couple characters long (maybe write your name)

Expected behavior
The field should act as a normal input, and changes should be reflected in the component.

Code snippets
The following is my test story for an ActionButton component.
````
import { storiesOf } from '@storybook/vue';
import { withKnobs, text, select, boolean} from '@storybook/addon-knobs';

import ActionButton from '../src/components/ActionButton.vue';

const actionButtonStories = storiesOf('Action Buttons', module);
actionButtonStories.addDecorator(withKnobs);

const actionButtonClasses = {
Attention: 'action__button--attention',
No: 'action__button--no',
Ok: 'action__button--ok',
Primary: 'action__button--primary'
};

actionButtonStories.add('with added Sexy', () => ({
components: { ActionButton },
props: {
className: {
default: select('Class', actionButtonClasses, 'action__button--primary')
},
disabled: {
default: boolean('Disabled', false)
},
text: {
default: text('Text', 'Action Button')
}
},
template: <div> <ActionButton :class="className" :disabled="disabled">{{ text }}</ActionButton> </div>
}));
````

System:

• OS: Windows 10
• Device: Beefy PC
• Browser: Replicated in Chrome and Edge
• Framework: VueJS
• Addons: Knobs
• Version: 5.0.1

[kristremblay]

Is it possible it has something to do with the debounce in KnobStore?

[shilman]

@CodeByAlex mind taking a look at this? I suspect it's related to https://github.com/storybooks/storybook/pull/5811

[CodeByAlex]

@kristremblay, do you know if this was introduced in 5.0.1 or was it present in 5.0.0

[kristremblay]

@CodeByAlex I just started using Storyboard today so I actually don't know.

[CodeByAlex]

@kristremblay, welcome to the community! Would you mind reverting your version of addon/knobs to 5.0 and check. A piece of code that debounces other than what you mentioned above was added to fix the symptoms you are seeing. It would be great if we could pinpoint whether the change had an unintended impact or if the issue was already present.

On a separate note, I’m wondering what if the need for the 50ms Debounce in the store is still needed.

[kristremblay]

Thanks! This is a great product you guys have made and it's certainly making my life easier :)

It looks like it is working properly in 5.0.0. I saw the debounce and assumed that had something to do with it.

[CodeByAlex]

That’s good to know. @shilman I’ll take a look into this further.

[shilman]

@CodeByAlex @ndelangen How about posting the knob change when the user hits enter or focus leaves the text field, rather than on every key press?

[kylepeeler]

I have the exact same issue. Was happening in 5.0 and upgraded to 5.0.1 and the issue seemed to be fixed slightly but I still have to type slower than usual without characters being dropped. I think posting the knob update on blur of the knob would be better IMO

[CodeByAlex]

@shilman it looks like the Debounce that was added to reduce lag on the Angular side caused the choppy text entry/dropping of characters that @kristremblay was mentioning in Vue. We will have to back that out and put in a different solution. The frameworks seem to react differently to this knobs rendering logic in general.

[kylepeeler]

I can provide links to anyone who picks up this issue with examples that we are experiencing this on both 5.0.0 and 5.0.1 so I'm not so sure its a direct result of the 5.0.1 changes, I just can't share the links publically since its a proprietary storybook. If you DM me (shared them with @shilman on discord as well) I can send you links of the issue happening on both versions.

[CodeByAlex]

@shilman @kylepeeler @kristremblay
Heres what Im thinking

const debouncedOnKnobChanged = debounce(change => {
  knobStore.markAllUnused();
  forceReRender();
}, 400);

function knobChanged(change) {
  var name = change.name,
  value = change.value; // Update the related knob and it's value.
  var knobOptions = knobStore.get(name);
  knobOptions.value = value;
  debouncedOnKnobChanged(change);
}

So as of the 5.0.1 update, the logic in the debounce function consisted of:

  var name = change.name,
  value = change.value; // Update the related knob and it's value.
  var knobOptions = knobStore.get(name);
  knobOptions.value = value;
  knobStore.markAllUnused();
  forceReRender();

After adding the following back in the onchanged function before the debounce, the issue in vue is resolved:

  var name = change.name,
  value = change.value; // Update the related knob and it's value.
  var knobOptions = knobStore.get(name);
  knobOptions.value = value;

To better handle the debouncing and force rendering, instead of waiting for a user to click out of the field, we should wait for a longer pause before rendering. In the 5.0.1 version, its waiting 150ms which is a little faster than the average typing speed. I suggest we wait closer to 400ms and then just have it render when the user has completed their thought. What do you guys think?

[kristremblay]

I think that's a good solution. Let's see how it works in the next commit :)

[CodeByAlex]

PR for this change can be found here: https://github.com/storybooks/storybook/pull/6022

[shilman]

Crikey!! I just released https://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.5 containing PR #6022 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.

[kristremblay]

@shilman Perhaps I'm doing something wrong, but running npm install @storybook/knobs@next and installing 5.1.0-alpha.5 causes a problem where clicking on the Knobs tab kills the application. White screen with the following console dump:

````
vendors~main.c2014981fb34776cf713.bundle.js:129299 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
in Unknown (created by Context.Consumer)
in Styled(Component) (created by KnobPanel)
in KnobPanel
in div (created by Context.Consumer)
in Styled(div)
in div (created by Context.Consumer)
in Styled(div)
in Unknown
in Unknown
in Unknown
in Unknown (created by Context.Consumer)
in _default (created by Layout)
in div (created by Context.Consumer)
in Styled(div) (created by Panel)
in Panel (created by Layout)
in div (created by Context.Consumer)
in Styled(div) (created by Main)
in div (created by Context.Consumer)
in Styled(div) (created by Main)
in Main (created by Layout)
in Layout (created by Context.Consumer)
in WithTheme(Layout) (created by ResizeDetector)
in ResizeDetector
in div (created by Context.Consumer)
in Styled(div)
in Unknown
in Unknown (created by ResizeDetector)
in ResizeDetector
in Unknown
in Unknown (created by Manager)
in ThemeProvider (created by Manager)
in Manager (created by Context.Consumer)
in Location (created by QueryLocation)
in QueryLocation (created by Root)
in LocationProvider (created by Root)
in HelmetProvider (created by Root)
in Root
warningWithoutStack @ vendors~main.c2014981fb34776cf713.bundle.js:129299
warning @ vendors~main.c2014981fb34776cf713.bundle.js:129714
createElementWithValidation @ vendors~main.c2014981fb34776cf713.bundle.js:130841
(anonymous) @ vendors~main.c2014981fb34776cf713.bundle.js:4666
renderWithHooks @ vendors~main.c2014981fb34776cf713.bundle.js:97120
mountIndeterminateComponent @ vendors~main.c2014981fb34776cf713.bundle.js:99202
beginWork @ vendors~main.c2014981fb34776cf713.bundle.js:99807
performUnitOfWork @ vendors~main.c2014981fb34776cf713.bundle.js:103494
workLoop @ vendors~main.c2014981fb34776cf713.bundle.js:103534
renderRoot @ vendors~main.c2014981fb34776cf713.bundle.js:103617
performWorkOnRoot @ vendors~main.c2014981fb34776cf713.bundle.js:104524
performWork @ vendors~main.c2014981fb34776cf713.bundle.js:104436
performSyncWork @ vendors~main.c2014981fb34776cf713.bundle.js:104410
interactiveUpdates$1 @ vendors~main.c2014981fb34776cf713.bundle.js:104677
interactiveUpdates @ vendors~main.c2014981fb34776cf713.bundle.js:86398
dispatchInteractiveEvent @ vendors~main.c2014981fb34776cf713.bundle.js:89110
vendors~main.c2014981fb34776cf713.bundle.js:129299 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
in Unknown (created by Context.Consumer)
in Styled(Component) (created by KnobPanel)
in KnobPanel
in div (created by Context.Consumer)
in Styled(div)
in div (created by Context.Consumer)
in Styled(div)
in Unknown
in Unknown
in Unknown
in Unknown (created by Context.Consumer)
in _default (created by Layout)
in div (created by Context.Consumer)
in Styled(div) (created by Panel)
in Panel (created by Layout)
in div (created by Context.Consumer)
in Styled(div) (created by Main)
in div (created by Context.Consumer)
in Styled(div) (created by Main)
in Main (created by Layout)
in Layout (created by Context.Consumer)
in WithTheme(Layout) (created by ResizeDetector)
in ResizeDetector
in div (created by Context.Consumer)
in Styled(div)
in Unknown
in Unknown (created by ResizeDetector)
in ResizeDetector
in Unknown
in Unknown (created by Manager)
in ThemeProvider (created by Manager)
in Manager (created by Context.Consumer)
in Location (created by QueryLocation)
in QueryLocation (created by Root)
in LocationProvider (created by Root)
in HelmetProvider (created by Root)
in Root
warningWithoutStack @ vendors~main.c2014981fb34776cf713.bundle.js:129299
warning @ vendors~main.c2014981fb34776cf713.bundle.js:129714
createElementWithValidation @ vendors~main.c2014981fb34776cf713.bundle.js:130841
(anonymous) @ vendors~main.c2014981fb34776cf713.bundle.js:4666
renderWithHooks @ vendors~main.c2014981fb34776cf713.bundle.js:97120
mountIndeterminateComponent @ vendors~main.c2014981fb34776cf713.bundle.js:99202
beginWork @ vendors~main.c2014981fb34776cf713.bundle.js:99807
performUnitOfWork @ vendors~main.c2014981fb34776cf713.bundle.js:103494
workLoop @ vendors~main.c2014981fb34776cf713.bundle.js:103534
callCallback @ vendors~main.c2014981fb34776cf713.bundle.js:84377
invokeGuardedCallbackDev @ vendors~main.c2014981fb34776cf713.bundle.js:84427
invokeGuardedCallback @ vendors~main.c2014981fb34776cf713.bundle.js:84484
replayUnitOfWork @ vendors~main.c2014981fb34776cf713.bundle.js:102760
renderRoot @ vendors~main.c2014981fb34776cf713.bundle.js:103650
performWorkOnRoot @ vendors~main.c2014981fb34776cf713.bundle.js:104524
performWork @ vendors~main.c2014981fb34776cf713.bundle.js:104436
performSyncWork @ vendors~main.c2014981fb34776cf713.bundle.js:104410
interactiveUpdates$1 @ vendors~main.c2014981fb34776cf713.bundle.js:104677
interactiveUpdates @ vendors~main.c2014981fb34776cf713.bundle.js:86398
dispatchInteractiveEvent @ vendors~main.c2014981fb34776cf713.bundle.js:89110
vendors~main.c2014981fb34776cf713.bundle.js:84283 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
at invariant (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:84283:15)
at createFiberFromTypeAndProps (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:94420:11)
at createFiberFromElement (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:94441:15)
at reconcileSingleElement (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:96713:23)
at reconcileChildFibers (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:96770:35)
at reconcileChildren (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:98584:28)
at mountIndeterminateComponent (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:99246:5)
at beginWork (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:99807:16)
at performUnitOfWork (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:103494:12)
at workLoop (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:103534:24)
invariant @ vendors~main.c2014981fb34776cf713.bundle.js:84283
createFiberFromTypeAndProps @ vendors~main.c2014981fb34776cf713.bundle.js:94420
createFiberFromElement @ vendors~main.c2014981fb34776cf713.bundle.js:94441
reconcileSingleElement @ vendors~main.c2014981fb34776cf713.bundle.js:96713
reconcileChildFibers @ vendors~main.c2014981fb34776cf713.bundle.js:96770
reconcileChildren @ vendors~main.c2014981fb34776cf713.bundle.js:98584
mountIndeterminateComponent @ vendors~main.c2014981fb34776cf713.bundle.js:99246
beginWork @ vendors~main.c2014981fb34776cf713.bundle.js:99807
performUnitOfWork @ vendors~main.c2014981fb34776cf713.bundle.js:103494
workLoop @ vendors~main.c2014981fb34776cf713.bundle.js:103534
callCallback @ vendors~main.c2014981fb34776cf713.bundle.js:84377
invokeGuardedCallbackDev @ vendors~main.c2014981fb34776cf713.bundle.js:84427
invokeGuardedCallback @ vendors~main.c2014981fb34776cf713.bundle.js:84484
replayUnitOfWork @ vendors~main.c2014981fb34776cf713.bundle.js:102760
renderRoot @ vendors~main.c2014981fb34776cf713.bundle.js:103650
performWorkOnRoot @ vendors~main.c2014981fb34776cf713.bundle.js:104524
performWork @ vendors~main.c2014981fb34776cf713.bundle.js:104436
performSyncWork @ vendors~main.c2014981fb34776cf713.bundle.js:104410
interactiveUpdates$1 @ vendors~main.c2014981fb34776cf713.bundle.js:104677
interactiveUpdates @ vendors~main.c2014981fb34776cf713.bundle.js:86398
dispatchInteractiveEvent @ vendors~main.c2014981fb34776cf713.bundle.js:89110
vendors~main.c2014981fb34776cf713.bundle.js:101299 The above error occurred in one of your React components:
in Unknown (created by Context.Consumer)
in Styled(Component) (created by KnobPanel)
in KnobPanel
in div (created by Context.Consumer)
in Styled(div)
in div (created by Context.Consumer)
in Styled(div)
in Unknown
in Unknown
in Unknown
in Unknown (created by Context.Consumer)
in _default (created by Layout)
in div (created by Context.Consumer)
in Styled(div) (created by Panel)
in Panel (created by Layout)
in div (created by Context.Consumer)
in Styled(div) (created by Main)
in div (created by Context.Consumer)
in Styled(div) (created by Main)
in Main (created by Layout)
in Layout (created by Context.Consumer)
in WithTheme(Layout) (created by ResizeDetector)
in ResizeDetector
in div (created by Context.Consumer)
in Styled(div)
in Unknown
in Unknown (created by ResizeDetector)
in ResizeDetector
in Unknown
in Unknown (created by Manager)
in ThemeProvider (created by Manager)
in Manager (created by Context.Consumer)
in Location (created by QueryLocation)
in QueryLocation (created by Root)
in LocationProvider (created by Root)
in HelmetProvider (created by Root)
in Root

React will try to recreate this component tree from scratch using the error boundary you provided, LocationProvider.
logCapturedError @ vendors~main.c2014981fb34776cf713.bundle.js:101299
logError @ vendors~main.c2014981fb34776cf713.bundle.js:101335
callback @ vendors~main.c2014981fb34776cf713.bundle.js:102276
callCallback @ vendors~main.c2014981fb34776cf713.bundle.js:100615
commitUpdateEffects @ vendors~main.c2014981fb34776cf713.bundle.js:100654
commitUpdateQueue @ vendors~main.c2014981fb34776cf713.bundle.js:100645
commitLifeCycles @ vendors~main.c2014981fb34776cf713.bundle.js:101546
commitAllLifeCycles @ vendors~main.c2014981fb34776cf713.bundle.js:102918
callCallback @ vendors~main.c2014981fb34776cf713.bundle.js:84377
invokeGuardedCallbackDev @ vendors~main.c2014981fb34776cf713.bundle.js:84427
invokeGuardedCallback @ vendors~main.c2014981fb34776cf713.bundle.js:84484
commitRoot @ vendors~main.c2014981fb34776cf713.bundle.js:103130
(anonymous) @ vendors~main.c2014981fb34776cf713.bundle.js:104600
unstable_runWithPriority @ vendors~main.c2014981fb34776cf713.bundle.js:135906
completeRoot @ vendors~main.c2014981fb34776cf713.bundle.js:104599
performWorkOnRoot @ vendors~main.c2014981fb34776cf713.bundle.js:104528
performWork @ vendors~main.c2014981fb34776cf713.bundle.js:104436
performSyncWork @ vendors~main.c2014981fb34776cf713.bundle.js:104410
interactiveUpdates$1 @ vendors~main.c2014981fb34776cf713.bundle.js:104677
interactiveUpdates @ vendors~main.c2014981fb34776cf713.bundle.js:86398
dispatchInteractiveEvent @ vendors~main.c2014981fb34776cf713.bundle.js:89110
vendors~main.c2014981fb34776cf713.bundle.js:84283 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
at invariant (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:84283:15)
at createFiberFromTypeAndProps (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:94420:11)
at createFiberFromElement (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:94441:15)
at reconcileSingleElement (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:96713:23)
at reconcileChildFibers (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:96770:35)
at reconcileChildren (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:98584:28)
at mountIndeterminateComponent (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:99246:5)
at beginWork (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:99807:16)
at performUnitOfWork (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:103494:12)
at workLoop (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:103534:24)
invariant @ vendors~main.c2014981fb34776cf713.bundle.js:84283
createFiberFromTypeAndProps @ vendors~main.c2014981fb34776cf713.bundle.js:94420
createFiberFromElement @ vendors~main.c2014981fb34776cf713.bundle.js:94441
reconcileSingleElement @ vendors~main.c2014981fb34776cf713.bundle.js:96713
reconcileChildFibers @ vendors~main.c2014981fb34776cf713.bundle.js:96770
reconcileChildren @ vendors~main.c2014981fb34776cf713.bundle.js:98584
mountIndeterminateComponent @ vendors~main.c2014981fb34776cf713.bundle.js:99246
beginWork @ vendors~main.c2014981fb34776cf713.bundle.js:99807
performUnitOfWork @ vendors~main.c2014981fb34776cf713.bundle.js:103494
workLoop @ vendors~main.c2014981fb34776cf713.bundle.js:103534
renderRoot @ vendors~main.c2014981fb34776cf713.bundle.js:103617
performWorkOnRoot @ vendors~main.c2014981fb34776cf713.bundle.js:104524
performWork @ vendors~main.c2014981fb34776cf713.bundle.js:104436
performSyncWork @ vendors~main.c2014981fb34776cf713.bundle.js:104410
interactiveUpdates$1 @ vendors~main.c2014981fb34776cf713.bundle.js:104677
interactiveUpdates @ vendors~main.c2014981fb34776cf713.bundle.js:86398
dispatchInteractiveEvent @ vendors~main.c2014981fb34776cf713.bundle.js:89110
vendors~main.c2014981fb34776cf713.bundle.js:101299 The above error occurred in the component:
in LocationProvider (created by Root)
in HelmetProvider (created by Root)
in Root

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
logCapturedError @ vendors~main.c2014981fb34776cf713.bundle.js:101299
logError @ vendors~main.c2014981fb34776cf713.bundle.js:101335
update.callback @ vendors~main.c2014981fb34776cf713.bundle.js:102247
callCallback @ vendors~main.c2014981fb34776cf713.bundle.js:100615
commitUpdateEffects @ vendors~main.c2014981fb34776cf713.bundle.js:100654
commitUpdateQueue @ vendors~main.c2014981fb34776cf713.bundle.js:100642
commitLifeCycles @ vendors~main.c2014981fb34776cf713.bundle.js:101565
commitAllLifeCycles @ vendors~main.c2014981fb34776cf713.bundle.js:102918
callCallback @ vendors~main.c2014981fb34776cf713.bundle.js:84377
invokeGuardedCallbackDev @ vendors~main.c2014981fb34776cf713.bundle.js:84427
invokeGuardedCallback @ vendors~main.c2014981fb34776cf713.bundle.js:84484
commitRoot @ vendors~main.c2014981fb34776cf713.bundle.js:103130
(anonymous) @ vendors~main.c2014981fb34776cf713.bundle.js:104600
unstable_runWithPriority @ vendors~main.c2014981fb34776cf713.bundle.js:135906
completeRoot @ vendors~main.c2014981fb34776cf713.bundle.js:104599
performWorkOnRoot @ vendors~main.c2014981fb34776cf713.bundle.js:104528
performWork @ vendors~main.c2014981fb34776cf713.bundle.js:104436
performSyncWork @ vendors~main.c2014981fb34776cf713.bundle.js:104410
interactiveUpdates$1 @ vendors~main.c2014981fb34776cf713.bundle.js:104677
interactiveUpdates @ vendors~main.c2014981fb34776cf713.bundle.js:86398
dispatchInteractiveEvent @ vendors~main.c2014981fb34776cf713.bundle.js:89110
vendors~main.c2014981fb34776cf713.bundle.js:84283 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
at invariant (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:84283:15)
at createFiberFromTypeAndProps (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:94420:11)
at createFiberFromElement (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:94441:15)
at reconcileSingleElement (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:96713:23)
at reconcileChildFibers (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:96770:35)
at reconcileChildren (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:98584:28)
at mountIndeterminateComponent (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:99246:5)
at beginWork (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:99807:16)
at performUnitOfWork (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:103494:12)
at workLoop (http://localhost:6006/vendors~main.c2014981fb34776cf713.bundle.js:103534:24)
invariant @ vendors~main.c2014981fb34776cf713.bundle.js:84283
createFiberFromTypeAndProps @ vendors~main.c2014981fb34776cf713.bundle.js:94420
createFiberFromElement @ vendors~main.c2014981fb34776cf713.bundle.js:94441
reconcileSingleElement @ vendors~main.c2014981fb34776cf713.bundle.js:96713
reconcileChildFibers @ vendors~main.c2014981fb34776cf713.bundle.js:96770
reconcileChildren @ vendors~main.c2014981fb34776cf713.bundle.js:98584
mountIndeterminateComponent @ vendors~main.c2014981fb34776cf713.bundle.js:99246
beginWork @ vendors~main.c2014981fb34776cf713.bundle.js:99807
performUnitOfWork @ vendors~main.c2014981fb34776cf713.bundle.js:103494
workLoop @ vendors~main.c2014981fb34776cf713.bundle.js:103534
renderRoot @ vendors~main.c2014981fb34776cf713.bundle.js:103617
performWorkOnRoot @ vendors~main.c2014981fb34776cf713.bundle.js:104524
performWork @ vendors~main.c2014981fb34776cf713.bundle.js:104436
performSyncWork @ vendors~main.c2014981fb34776cf713.bundle.js:104410
interactiveUpdates$1 @ vendors~main.c2014981fb34776cf713.bundle.js:104677
interactiveUpdates @ vendors~main.c2014981fb34776cf713.bundle.js:86398
dispatchInteractiveEvent @ vendors~main.c2014981fb34776cf713.bundle.js:89110

[shilman]

@kristremblay Hmm try clearing out node_modules and reinstalling?

[kristremblay]

@shilman No luck, same errors.

[CodeByAlex]

Have you tried deleting your package.lock file?
On Tue, Mar 12, 2019 at 8:38 PM Kris Tremblay [e-mail]
wrote:

@shilman https://github.com/shilman No luck, same errors.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/storybooks/storybook/issues/6005#issuecomment-472234504,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AcYoBiAfAV30ulIrrAmzekbJ5X8EfScMks5vWEhsgaJpZM4bnfUw
.

[kristremblay]

Yup, still busted.

[kristremblay]

I'm going to go try it on my mbp and see if it's having the same issue.

[kristremblay]

@CodeByAlex @shilman Nope, same thing on both machines, went through deleting node_modules and package-lock.json.

[shilman]

Hmm not sure what to say. It's working fine in our demo Vue storybook and I can't think of any changes in 5.1 that would cause this error and nothing about your story above jumps out at me.

Here are some things I'd try:

• Delete all the knobs from the story, does it still crash?
• If not, add them back to see which one is causing it?
• If you revert back to 5.0.x does it stop crashing?
• Etc. etc

Thanks for your patience on this!

[kristremblay]

I’ll have to double check when I get home in a few hours.

Reverting to 5.0.x works (with 5.0.0 being the best one as far as the debounce issue is concerned).

I really appreciate the responsiveness, I just wanna see it work :D

[Nejik]

Same error after upgrade to alpha5. Vue project created with vue cli and vue cli storybook

folder node_modules was deleted.
package_lock was deleted
story without knobs working fine, crashing only on story with knobs.

In package.json:
"@storybook/vue": "^v5.1.0-alpha.5",
"@storybook/addons": "^v5.1.0-alpha.5",
"@storybook/addon-actions": "^v5.1.0-alpha.5",
"@storybook/addon-cssresources": "^v5.1.0-alpha.5",
"@storybook/addon-knobs": "v5.1.0-alpha.5",
"@storybook/addon-links": "^v5.1.0-alpha.5",
"@storybook/addon-notes": "^v5.1.0-alpha.5",
"@storybook/addon-storysource": "^v5.1.0-alpha.5",

Reverting to 5.0.0 works. 5.0.1 was bad update to knobs)

[kristremblay]

@shilman
@Nejik beat me to it. This is what I’m experiencing.

[shilman]

Jeepers creepers!! I just released https://github.com/storybooks/storybook/releases/tag/v5.0.2 containing PR #6022 that references this issue. Upgrade today to try it out!

[backbone87]

since the 4.2 alpha introduced my changes to the storybook vue, debouncing the knobs should not be necessary at all for vue, since we properly change the props of the components in a reactive "vue way".

[rdm]

General note:

Debounce can be necessary on systems with poorly functioning keyboards (not that macbooks have ever had anything other than perfect keyboards).

However, debounce should, by default, only take effect for quickly repeated instances of the same character.