Storybook not compatible with React hooks

Describe the bug Attempting to render a react component that uses hooks into a storybook staging environment throws an error Hooks can only be called inside the body of a function component.

To Reproduce Steps to reproduce the behavior:

1. Create a react component that uses hooks
2. Import & render the component in storybook

Expected behavior Storybook should be able to display React components that use hooks.

Code snippets

Component code

import React, { useState } from "react";

export default function ColorChanger() {
  const [color, setColor] = useState("#000");
  const randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16);
  return (
    <div style={{ color }} onClick={() => setColor(randomColor)}>
      Color is: {color} (click to change)
    </div>
  );
}

Note, this code is working on codesandbox: https://codesandbox.io/s/n5rmo77jx0

System:

• Browser: Firefox
• Framework: React
• Version: 4.0.2

[phaistonian]

Try:

import { setConfig } from 'react-hot-loader';
setConfig({ pureSFC: true });

in your .config file.

This should do the trick - for now.

[Syynth]

So I ran into this issue using CRA 2.1.1 with typescript on the 4.1.0-alpha.8 version of @storybook/react and hooks and it ended up coming down to the fact that the package includes it’s own local copy of React so when the hook is called it can’t find the ReactSharedInternals.ReactCurrentOwner.currentDispatcher instance. As silly as it felt, I just updated my npm scripts to the following:

"storybook": "rm -rf ./node_modules/@storybook/react/node_modules/react && rm -rf ./node_modules/@storybook/react/node_modules/react-dom && start-storybook -p 9009",

And everything seemed to work. Maybe react/react-dom need to be peer-dependencies of @storybook/react instead of regular deps?

I tried the react-hot-loader setConfig thing only to find that react-hot-loader wasn’t installed in the first place. Maybe this is a change with the 4.1 alpha but I’m new to storybook in general so I wouldn’t know.