Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"Stateless function components cannot be given refs" warnings with React@next #1539

Closed
jrmyio opened this issue Jul 28, 2017 · 14 comments
Closed

Comments

@jrmyio
Copy link

jrmyio commented Jul 28, 2017

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.

@ndelangen
Copy link
Member

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!

@oriSomething
Copy link
Contributor

@ndelangen I think I'll try to pick this

oriSomething added a commit to oriSomething/storybook that referenced this issue Jul 31, 2017
oriSomething added a commit to oriSomething/storybook that referenced this issue Jul 31, 2017
oriSomething added a commit to oriSomething/storybook that referenced this issue Jul 31, 2017
oriSomething added a commit to oriSomething/storybook that referenced this issue Jul 31, 2017
oriSomething added a commit to oriSomething/storybook that referenced this issue Jul 31, 2017
oriSomething added a commit to oriSomething/storybook that referenced this issue Jul 31, 2017
oriSomething added a commit to oriSomething/storybook that referenced this issue Aug 2, 2017
oriSomething added a commit to oriSomething/storybook that referenced this issue Aug 2, 2017
oriSomething added a commit to oriSomething/storybook that referenced this issue Aug 3, 2017
oriSomething added a commit to oriSomething/storybook that referenced this issue Aug 3, 2017
oriSomething added a commit to oriSomething/storybook that referenced this issue Aug 3, 2017
oriSomething added a commit to oriSomething/storybook that referenced this issue Aug 3, 2017
Hypnosphi pushed a commit that referenced this issue Aug 10, 2017
…mponents (#1551)

* converting LeftPanel to a React.Component to resolve issue with React Fiber (#1539)

* converting Shortcuts to a React.Component to resolve issue with React Fiber (#1539)

* ShortcutsHelp should be a class, not Shourtcuts
@Hypnosphi
Copy link
Member

Hypnosphi commented Aug 10, 2017

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.

@ndelangen
Copy link
Member

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

@Hypnosphi
Copy link
Member

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)

@usulpro
Copy link
Member

usulpro commented Aug 13, 2017

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

@Hypnosphi
Copy link
Member

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

@danielduan
Copy link
Member

React 16 should be fully supported now. Closing.

@Hypnosphi
Copy link
Member

This issue is not about React 16 support
#1539 (comment)

@Hypnosphi Hypnosphi reopened this Nov 14, 2017
@stale
Copy link

stale bot commented Dec 29, 2017

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!

@stale
Copy link

stale bot commented Jan 13, 2018

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!

@stale stale bot closed this as completed Jan 13, 2018
@geocine
Copy link

geocine commented Jun 8, 2018

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

@Hypnosphi
Copy link
Member

@ndelangen fixes this as part of #3628

@tysonmatanich
Copy link

@Hypnosphi Hoping it can get merged soon.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

8 participants