Storybook: Knobs not working with v5.2.0-beta.30

[hsz]

Describe the bug
When enabling the Knobs in the project, I get following error:

Storybook preview hooks can only be called inside decorators and story functions.

To Reproduce

Install and enable Knobs in v5.2.0-beta.30:

addons.js:

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

config.js:

addDecorator(withKnobs);

Expected behavior
Stories should be rendered correctly.

Screenshots

System:

Environment Info:

  System:
    OS: Linux 5.1 Ubuntu 19.04 (Disco Dingo)
    CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
  Binaries:
    Node: 12.3.1 - ~/.nvm/versions/node/v12.3.1/bin/node
    npm: 6.9.0 - ~/.nvm/versions/node/v12.3.1/bin/npm
  Browsers:
    Chrome: 74.0.3729.108
    Firefox: 68.0.1
  npmPackages:
    @storybook/addon-actions: ^5.2.0-beta.30 => 5.2.0-beta.30 
    @storybook/addon-info: ^5.2.0-beta.30 => 5.2.0-beta.30 
    @storybook/addon-knobs: ^5.2.0-beta.30 => 5.2.0-beta.30 
    @storybook/addon-options: ^5.2.0-beta.30 => 5.2.0-beta.30 
    @storybook/addon-viewport: ^5.2.0-beta.30 => 5.2.0-beta.30 
    @storybook/react: ^5.2.0-beta.30 => 5.2.0-beta.30 

[shilman]

Cc @hypnosphi

[Hypnosphi]

Can you please create a GitHub repo with minimal reproduction of your issue?

[steel]

Seeing the same issue

[steel]

Actually, after a clean install this error went away.

[hsz]

After upgrading to 5.2.0-beta.33, everything works fine. Can't say if it was just a matter of reinstall.

[matyasfodor]

I am pretty sure it was caused by the wrong import:

import { useEffect } from '@storybook/addons';

instead of

import React, { useEffect } from 'react';

[daniloprates]

I'm having this issue with v5.1.11.

[DantonGodoy]

I was having the same issue in an Angular project that just recently added the @storybook/addon-knobs module to its package.json file.
Considering that the node_modules was outdated, the problem was fixed by running 'npm install' again. Hope it helps anybody who stumbles across this matter. Cheers.

[Hypnosphi]

@matyasfodor we have to work with different frameworks, so we've reimplemented hooks in a framework-independent way

@daniloprates @bencmbrook @ashoksudani @loicbourg @vernonk can you please try version 5.2.4?

[Amirh24]

I just got this error when using knobs on a react native project, wrote the following in the react-native channel on the storybook discord:

import { withKnobs, text } from '@storybook/addon-knobs';

storiesOf('Swipeable Feed', module)
    .addDecorator(withKnobs)
    .add('Description for this component"', () => {

        const title = text('Title', 'Example title');
        const buttonTitle = text('Button title', "Example button title");

        <SwipeableFeed
            title={title}
            buttonTitle={buttonTitle}
        />
    })

using:
"@storybook/react-native": "^5.1.11",
"@storybook/addon-knobs": "^5.2.5",

EDIT: tried with ^5.2.4 as well

[kostyaostapuk]

Hi guys! For me, this problem is solved by installing the package "@storybook/addon-knobs" the corresponding version with "@storybook/html" and also the rest packages versions related to "@storybook".

[Amirh24]

I tried to upgrade to 5.3.0-alpha v5.3.0-alpha.42 and it still doesn't work. Tried adding @storybook/html according to the comment above but nothing, This is getting frustrating as I believe this is just an issue with typescript

[Amirh24]

Update: upgrading both @storybook/addon-knobs and @storybook/react-native to ^5.3.0-alpha.42 fixed it for me (reminding I am using storybook client only in react-native)

[an-parubets]

I was have same error with v5.1.9.
In my case it was fixed with upgrading all storybook packages to v5.3.8.

[dcsw]

Removing all yarn/npm storybook packages and then re-adding them worked for me.
Many thanks for the tip @an-parubets.

[groundmuffin]

In my case caused by blind insert
import { useState } from '@storybook/addons'
instead of
import { useState } from 'react'