Storybook Preact story rendering breaks when using hooks to declare state in stories

[KrofDrakula]

Describe the bug
Using preact/hooks inside of story functions breaks Storybook for Preact story rendering.

To Reproduce

The following story errors out:

import { h } from 'preact';
import { useState } from 'preact/hooks';

export default {
  title: 'Sample story'
};

export const Bug = () => {
  const [state, setState] = useState(false);
  return (
    <button onClick={() => setState(!state)}>{state ? 'true' : 'false'}</button>
  );
}

If you declare state in another function as a functional component, the story works:

import { h } from 'preact';
import { useState } from 'preact/hooks';

export default {
  title: 'Sample story'
};

const Template = () => {
  const [state, setState] = useState(false);
  return (
    <button onClick={() => setState(!state)}>{state ? 'true' : 'false'}</button>
  );
}

export const NoBug = () => <Template/>

Expected behavior
There's no clear indication in the documentation that that might not be allowed. It might be worth mentioning that somewhere in Writing Stories sections.

Screenshots
N/A

Code snippets
See above.

System
The npx sb@next info command fails because of integrity checks, but I am using Storybook 6.1.17.

"@storybook/addon-actions": "6.1.17",
"@storybook/addon-essentials": "6.1.17",
"@storybook/addon-links": "6.1.17",
"@storybook/preact": "6.1.17",
"storybook-addon-designs": "5.4.3",
"storybook-addon-themes": "6.0.1",

Additional context
None.

[marvinhagemeister]

By design hooks have to rely on singletons to work. We've seen some setups where webpack was bundling multiple versions of Preact for some reason. Just a wild guess, but may be worth to check.

[shilman]

@marvinhagemeister in @storybook/react we had a similar issue where we were calling storyFn() in the render function and hooks were breaking. we changed it to <Story /> (React.createElement) and it fixed the hooks issue (and introduced some other issues with decorators). Do we need to do something similar for preact?

[marvinhagemeister]

@shilman yup, that would fix it. The component constructor needs to be called and instanciated by Preact so that it sets up the necessary pointers for hooks to work.

[KrofDrakula]

It looks like there's a problem in the preact kitchen sink app. In package.json, we have:

  "devDependencies": {
    "preact": "^10.5.9"
  },
  "peerDependencies": {
    "@babel/core": "*",
    "preact": "^8.0.0||^10.0.0"
  },

This installs preact as a dev dependency when bootstrapping, so when client/preview/render.tsx imports the preact package, it would always import preact^10.5.9. If the app uses 8.x, the mismatch between VNode types in 8.x and 10.x would explain why the kitchen sink app doesn't work in development, since it uses 8.x. Upgrading preact to 10.x on the kitchen sink app would make it work.

After fixing this problem, the next step will be solving the original hooks problem mentioned in this issue.

[shilman]

Ermahgerd!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.3.0-alpha.1 containing PR #14473 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

[KrofDrakula]

Sweet! Thanks.