Storybook: Errors logged by `official-storybook`

[tmeasday]

@ndelangen I'm creating an issue recording what I find here.

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

This is due to switching certain UI components from classes to SFCs. The actually use of the ref comes on this line of react-komposer:

https://github.com/storybooks/react-komposer/blob/975fa67f07ca75f889ae2161b047b4d7037fa013/src/compose.js#L126-L128

I'm not sure if that ref is ever used (perhaps @Hypnosphi remembers something) but if I pass { withRef: false } as a second argument to compose() here and here the error goes away (and the UI still appears to work).

Warning: Unsafe lifecycle methods were found within a strict-mode tree

This issue: https://github.com/emotion-js/emotion/issues/644

Plus similar problems with react-split-pane (our issue and react-modal (https://github.com/reactjs/react-modal/issues/649), et al (Velocity also)

[merlinpatt]

I'm getting the bug: Stateless function components cannot be given refs. Attempts to access this ref will fail. as well. This happened after I decided to upgrade to the v4 alpha

It further says to check the following spots

• Check the render method of Container(Layout).
• Check the render method of Container(AddonPanel)

So far, everything seems to be working despite the bug.

[ndelangen]

"Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail." is being fixed right now on the theming branch

[igor-dv]

BTW, It happens on every app, because of the manager.

[stale[bot]]

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!

[marvinhagemeister]

Comment to keep this issue open. We just ran into it with v4.0.0-alpha10.

[gnomeontherun]

It happens with using Angular at 4.0-alpha10 as well

[shiftsave]

seeing this issue still trying to incorporate an emotion theme decorator:

import React from 'react';
import { storiesOf } from '@storybook/react';
import { Button } from './Button';
import { ThemeProvider } from 'emotion-theming';
import { theme } from '../../constants/theme';


const Theme = storyFn => (
    <ThemeProvider theme={theme}>{storyFn()}</ThemeProvider>
);

storiesOf('Components/Button', module)
    .addDecorator(Theme)
    .addWithJSX('primary', () => (
    <Button>I am a Button</Button>
));

[igor-dv]

It's not happening anymore.

[shiftsave]

thanks!