Storybook: "Stateless function components cannot be given refs" warnings with React@next

Created on 28 Jul 2017  路  14Comments  路  Source: storybookjs/storybook

I am using the react@next branch with the initial fiber support.

Upon loading the storybook I get 2 warnings:

Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.

Check the render method of `Container(LeftPanel)`.
    in LeftPanel (created by Container(LeftPanel))
    in Container(LeftPanel) (created by Layout)

and 

Check the render method of `Container(ShortcutsHelp)`.
    in ShortcutsHelp (created by Container(ShortcutsHelp))
    in Container(ShortcutsHelp)

Things seem to work normally though.

bug compatibility with other tools dependencies inactive ui

Most helpful comment

This issue still persists. I am using the following versions

{
    "@storybook/addon-actions": "^4.0.0-alpha.8",
    "@storybook/addon-links": "^4.0.0-alpha.8",
    "@storybook/addon-notes": "^4.0.0-alpha.8",
    "@storybook/addon-options": "^3.4.6",
    "@storybook/addons": "^4.0.0-alpha.8",
    "@storybook/angular": "^4.0.0-alpha.8",
    "babel-core": "^6.26.3",
    "react": "^16.4.0",
    "react-dom": "^16.4.0"
}

I am getting the following errors:

Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.

Check the render method of `Container(Layout)`.
    in Layout (created by Container(Layout))
    in Container(Layout)
    in div

Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.

Check the render method of `Container(AddonPanel)`.
    in AddonPanel (created by Container(AddonPanel))
    in Container(AddonPanel) (created by addonPanel)
    in addonPanel (created by Layout)
    in div (created by Styled(div))
    in Styled(div) (created by Layout)
    in div (created by Pane)
    in Pane (created by SplitPane)
    in div (created by SplitPane)
    in SplitPane (created by Layout)
    in div (created by Pane)
    in Pane (created by SplitPane)
    in div (created by SplitPane)
    in SplitPane (created by Layout)
    in Layout (created by Layout)
    in div (created by Styled(div))
    in Styled(div) (created by Layout)
    in ThemeProvider (created by Layout)
    in Layout (created by Container(Layout))
    in Container(Layout)
    in div

All 14 comments

Anyone who wants to pick this one?

I feel it should be an easy one to get started contributing to storybook, so send me a message if you want to give this a go and want my help!

@ndelangen I think I'll try to pick this

Ok, so #1551 fixes the symptoms, but the origin of the problem is react-komposer adding refs to children just for tests. I will send them a PR, but unfortunately the repo looks abandoned, so we should probably switch to recompose.

@Hypnosphi That sounds like the best course of action indeed! Will switching to recompose be easy you think?

Well, I haven't really digged into it, we should check that it provides the needed features. It may turn out that transferring react-komposer will be a better option (if that's OK for @arunoda)

if somebody is going to connect with @arunoda please ask about https://github.com/arunoda/podda as well!

@ndelangen we can achieve the current behaviour using recompose's mapPropsStream and some lite-weight observable stream library (I'd suggest xstream).

React 16 should be fully supported now. Closing.

This issue is not about React 16 support
https://github.com/storybooks/storybook/issues/1539#issuecomment-321414193

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 60 days. Thanks!

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

This issue still persists. I am using the following versions

{
    "@storybook/addon-actions": "^4.0.0-alpha.8",
    "@storybook/addon-links": "^4.0.0-alpha.8",
    "@storybook/addon-notes": "^4.0.0-alpha.8",
    "@storybook/addon-options": "^3.4.6",
    "@storybook/addons": "^4.0.0-alpha.8",
    "@storybook/angular": "^4.0.0-alpha.8",
    "babel-core": "^6.26.3",
    "react": "^16.4.0",
    "react-dom": "^16.4.0"
}

I am getting the following errors:

Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.

Check the render method of `Container(Layout)`.
    in Layout (created by Container(Layout))
    in Container(Layout)
    in div

Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.

Check the render method of `Container(AddonPanel)`.
    in AddonPanel (created by Container(AddonPanel))
    in Container(AddonPanel) (created by addonPanel)
    in addonPanel (created by Layout)
    in div (created by Styled(div))
    in Styled(div) (created by Layout)
    in div (created by Pane)
    in Pane (created by SplitPane)
    in div (created by SplitPane)
    in SplitPane (created by Layout)
    in div (created by Pane)
    in Pane (created by SplitPane)
    in div (created by SplitPane)
    in SplitPane (created by Layout)
    in Layout (created by Layout)
    in div (created by Styled(div))
    in Styled(div) (created by Layout)
    in ThemeProvider (created by Layout)
    in Layout (created by Container(Layout))
    in Container(Layout)
    in div

@ndelangen fixes this as part of #3628

@Hypnosphi Hoping it can get merged soon.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

shilman picture shilman  路  3Comments

arunoda picture arunoda  路  3Comments

sakulstra picture sakulstra  路  3Comments

tirli picture tirli  路  3Comments

ZigGreen picture ZigGreen  路  3Comments