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

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.

[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]

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.