Addon-docs: Invalid hook call

[kevinkuebler]

We just updated to Storybook 5.2.5. I updated all of our stories to CSF format, and everything is good so far. The next step I wanted to take was to get the new addon-docs wired up. I haven't added any docgen comments yet or written any mdx, just trying to get the OOTB DocsPage running.

Our component library was written against a pre-hooks version of React (16.2). So obviously we did not have any hooks in our code, nor in our stories. So as part of getting addon-docs up and running I updated to React 16.10.2. This was the version of React that Storybook was given when I installed 5.2.5. Running npm ls react and npm ls react-dom confirms that I only have version 16.10.2 of both packages in the project.

Our code and stories are all written in TypeScript, so we have Storybook setup with a custom webpack config using awesome-typescript-loader. Our component source is in a src directory, and the stories are all in a stories directory, so config.js has:
configure(require.context('../stories/', true, /\.tsx/), module);

When I run Storybook, the Docs tab shows up on the stories but gets this error when navigating to it:
Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

I've tried following the manual configuration instructions, since my understanding is the preset doesn't work if we don't follow the convention of having *.stories.tsx files next to the components. So I added the configuration shown in the instructions to config.js and addons.js. I also added this rule to the webpack config, based on what's in the instructions but tweaked to indicate where our stories are located.

config.module.rules.push({
  test: /\.tsx$/,
  include: [/stories/],
  exclude: [/node_modules/],
  loader: require.resolve('@storybook/source-loader'),
  enforce: 'pre',
})

Apologies if I'm doing something obviously wrong here. I'm assuming this probably isn't a bug but I can't figure out what I have wrong in my configuration. Let me know if there is any other info that will help in understanding the problem. Thanks!

[shilman]

@kevinkuebler Docs specifically has a dependency on a more recent version of react, whereas the rest of Storybook doesn't... We probably need to highlight that better in the documentation & package.json.

[kevinkuebler]

@shilman More recent than 16.10? I think I had 16.11 installed at one point too, which is the latest, but was experiencing the same thing.

[shilman]

@kevinkuebler Sorry I misread your issue: not a react version issue. Did you also disable w/ sourceLoaderOptions: null in the preset options since you're manually adding it in the webpack config?

[kevinkuebler]

@shilman Well, based on those manual configuration instructions I removed the presets.js file entirely. In it's place I added this to addons.js:

import '@storybook/addon-docs/register';

And this to config.js:

addParameters({
  docs: {
    container: DocsContainer,
    page: DocsPage
  }
});

And then the webpack config that I showed in the original post. Based on your comment, just now I tried removing the addons.js and config.js entries, left the webpack config as is, and added a presets.js with:

module.exports = [
  {
    name: '@storybook/addon-docs/react/preset',
    options: {
      sourceLoaderOptions: null,
    },
  },
];

But this led to the same result. Apologies if I'm fundamentally misunderstanding something about how to set this up. 😄 Any other thoughts on what could be wrong? I've tried googling this, assuming somebody else had surely encountered this scenario, but so far I've come up empty.

[kevinkuebler]

As a sanity check just now, I wrote a test story using hooks just to make sure I could do that. This story works fine:

export const test = () => {
  const [count, setCount] = React.useState(0);

  return <>
    <Button onClick={() => setCount(count + 1)}>Test</Button>
    <h2>{count}</h2>
  </>
}

But the Docs page still gives the "Invalid hook call" error.

[shilman]

Can you create a minimal repro repo? I can take a look.

[kevinkuebler]

@shilman Well, of course when I tried to create a repro, I couldn't. 🙄 So I figured there must be something about the configuration in my main project causing an issue. I went back and forth between my repro, which worked, and my project which didn't. I made sure everything matched, including updating some of the other dependencies to the latest versions (like babel-loader, webpack, etc.) Nothing was making a difference.

So then I tried deleting node_modules and running npm i to get a clean install of everything. Still no luck. Finally I decided to uninstall react/react-dom and all of the storybook packages individually, and then reinstall them one-by-one. After I did that, much to my surprise, Docs started working. That obviously makes no sense and I have to idea what happened, but I'm happy that it's working now. 😄 So I guess this can be closed since I can't repro it and nobody else seems to have experienced it.

One little thing I noticed when going through this is that the storybook/addon-docs package appears to not be tagged correctly on npm. The @latest tag is pointing to the 5.3 alpha instead of 5.2.5. All of the other storybook packages seem to have @latest set to 5.2.5. Not a big deal but it does cause an error (not the same one I was getting) if you have docs on the 5.3 alpha and storybook on 5.2.

[shilman]

@kevinkuebler that's not what i'm seeing?

Anyway, I'm glad you figured it out!!! Happy documenting!!! 🚀

[kevinkuebler]

@shilman Thanks again, and my apologies for the mixup with the latest tag. I just discovered the problem. I forgot that our company uses a product (ProGet) which basically proxies npm (it's used to host our own private packages, but also acts as a proxy/local cache for npm packages). It appears to have cached the tags incorrectly for that package. And now it's got me wondering if it was ultimately the cause of my original problem, because it makes no sense why it suddenly started working for me after I manually uninstalled/reinstalled the react and storybook packages.

[shilman]

🤔no worries, that sounds like a reasonable explanation to me!

[avegancafe]

For anyone that gets this problem as well, I blew away my yarn.lock file and reinstalled node_modules, and this issue went away. I think there's some weird version mismatching issue going on.

[cato]

Blowing away my yarn.lock and reinstalling node_modules file also worked for me.

[jjoselv]

Maybe the solution given here can help
#8177 (comment)