Invalid hook call error when using addon Knobs "text" knob

[Sniffing]

Describe the bug
Related to:

• [v6.0.0-beta.13] Invalid hook call with Ref's Forwarded Hooked Component storybook#10895
• [v6.0.0-beta.28] Storybook with Docs breaks when using components that export HOCs or Styled Components storybook#11176

When using addon knobs, any use of the text knob with causes the above error. Removing knobs of this type while keeping other types do not cause the error

To Reproduce
"@storybook/addon-knobs": "^6.0.21",

Company source code, so cannot link.

1. Create a normal story for a component
2. use withKnobs decorator
3. add a knob control of type text
4. run storybook

Expected behavior
Story for component loads with knob

Code snippets

Default.args = {
    options,
    disabled: boolean('disabled', false),
    platform: select('platform', ['P1','P2'], 'P1'),
    text1: text('text1', ''),
};

....or ....
<MyComponent
    options={options}
    disabled={boolean('disabled', false)}
    platform={select('platform', ['P1','P2'], 'P1')}
    text1={text('text1', '')}
/>

System:

Environment Info:
System:
OS: macOS 10.15.6
CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
Binaries:
Node: 12.6.0 - ~/.nvm/versions/node/v12.6.0/bin/node
Yarn: 1.22.4 - ~/.yarn/bin/yarn
npm: 6.13.7 - ~/.nvm/versions/node/v12.6.0/bin/npm
Browsers:
Chrome: 85.0.4183.83
Safari: 13.1.2
npmPackages:
@storybook/addon-actions: ^6.0.21 => 6.0.21
@storybook/addon-console: ^1.2.1 => 1.2.1
@storybook/addon-docs: ^6.0.21 => 6.0.21
@storybook/addon-info: ^5.3.21 => 5.3.21
@storybook/addon-jest: ^6.0.21 => 6.0.21
@storybook/addon-knobs: ^6.0.21 => 6.0.21
@storybook/addon-links: ^6.0.21 => 6.0.21
@storybook/addon-options: ^5.3.21 => 5.3.21
@storybook/addon-storyshots: ^6.0.21 => 6.0.21
@storybook/addon-storysource: ^6.0.21 => 6.0.21
@storybook/addon-viewport: ^6.0.21 => 6.0.21
@storybook/addons: 6.0.21 => 6.0.21
@storybook/channels: 6.0.21 => 6.0.21
@storybook/preset-create-react-app: ^3.1.4 => 3.1.4
@storybook/preset-typescript: ^3.0.0 => 3.0.0
@storybook/react: 6.0.21 => 6.0.21
@storybook/source-loader: ^6.0.21 => 6.0.21
@storybook/storybook-deployer: ^2.8.6 => 2.8.6

[shilman]

FYI, we’ve released addon-controls in Storybook 6.0. Controls are portable, auto-generated knobs that are intended to replace addon-knobs long term.

• Controls documentation
• Migration instructions

Please upgrade and try them out today!

[Sniffing]

@shilman Noted! I didn't realise they were intended to replace addon-knobs long term, I shall check them out, thanks

[shilman]

@Sniffing even short term for many! 😉 controls is still missing a couple features from knobs, but it also adds a few big ones and is already better in many ways (simpler, probably more stable, maintained).

[Sniffing]

@shilman

Pulled it down, gave it a try, most of the controls seem good, I still seem to be having the issue above when using argTypes and supplying text

export default {
    argTypes: {
        text: {
            control: {
                type: 'text',
            },
        },
    },
    title: 'Icon With Text',
};

const template = (args) => <Icon {...args} />;

export const Default = template.bind({});
Default.storyName = 'Default';
Default.args = {
    text: 'Some text',
};

[AsaAyers]

I'm getting the same error as the comment above when attempting to use Default.args = { text: 'Some Text' }. It seems like webpack://storybook_ui_dll//Users/shilman/projects/baseline/storybook/node_modules/react-textarea-autosize/dist/react-textarea-autosize.browser.esm.js? is getting a different instance of React.

I edited node_modules/react/index.js to include module.exports.__asa = 1 at the end of the file and confirmed in one of my stories that React.__asa === 1.

Then with the debugger I can see react__WEBPACK_IMPORTED_MODULE_2__.__asa is undefined and running npm ls react confirms I only have 1 react and the rest are dedeuped.

I haven't used webpack DLLs before. Is that DLL packaging its own copy of React that doesn't show up in my node_modules? I don't know how to figure out where that code is coming from, the path listed is not from my machine.

[AsaAyers]

I think my problem was that I had several @storybook/components that couldn't be deduped. I had to remove @sambego/storybook-state because it uses @storybook/[email protected], which I think is what prevented all my @storybook/[email protected] from being deduped. There may be a better way to do this next step, but I just uninstalled and reinstalled all @storybook/* packages at the same time and that deduped all my @storybook/components.

npm uninstall @storybook/react @storybook/addons @storybook/addon-links @storybook/addon-knobs @storybook/addon-essentials @storybook/addon-centered @storybook/addon-actions
npm install -D @storybook/react @storybook/addons @storybook/addon-links @storybook/addon-knobs @storybook/addon-essentials @storybook/addon-centered @storybook/addon-actions
npm ls @storybook/components

[shilman]

Yeah, we have a problem when third party addons have not upgraded their dependencies across breaking changes (5.3.x => 6.0.x)

@ndelangen @tmeasday any thoughts on how we can make this easier for users?
@jonniebigodes any ideas about how we might document this? troubleshooting page?

[jonniebigodes]

@shilman we don't have exactly a good place for this. As a short term solution we could use the FAQ page (workflows/faq.md) and add a new section addressing this issue. As this issue is addressed we can then move it to a better place.

Let me know if you're ok with it and we'll move from there.

[shilman]

@jonniebigodes that sounds like a great place. 💯

[stevethatcodes]

Ran into this today when bumping from 6.0.21 to 6.0.22.

I experimented with forking @sambego/storybook-state to update the Storybook versions, which then only showed 6.0.22 when running npm ls @storybook/components, however that did not fix the invalid hook issue when running Storybook.

We've got extensive uses of the text control from @storybook/addon-knobs, as well as a whole lot of @sambego/storybook-state, so either migrating to addon-controls or removing @sambego/storybook-state aren't low-effort options for us. Are there any other ways in which we can resolve this?

Are there expected changes with future versions of Storybook that might make it less sensitive to version mismatches? If so, I might pin our version for a while and wait for those updates.

[shilman]

@stevethatcodes Storybook uses webpack DLLS for performance and this causes lots of version issues, possibly including this one. We're planning on getting rid of them in 6.1: storybookjs/storybook#12637

[stevethatcodes]

@shilman Aha, thank you for that info, I think we'll pin to 6.0.21 in the mean time then and await 6.1 before upgrading further.

[jonniebigodes]

Sorry for not addressing this change sooner. I had to shift my attention to other documentation. I'm going to make a pull request addressing this. To give a bit more context when using third party addons with the Storybook 6.0. Regarding your issue @Sniffing this is something that might need a bit more context and information. Sorry for not providing a better response but we're in a bit of a pickle as it's a company code. Once the pull request is created i'll link this issue.

Sorry for not providing a better answer for you.

Stay safe.

[stale]

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!