Not one example does not work render for me with typescript. I use vite or create-react-app . Storybook v 7.0.4 Help is needed.

[fr0ntsmaverick]

Not one example does not work render for me with typescript. I use vite or create-react-app . Storybook v 7.0.4 Help is needed.

export const Basic: Story = {
  render: () => <Button label="Hello" onClick={action('clicked')} />,
};

export const CustomFooter: Story = {
  render: (args) => (
    <Page {...args}>
      <footer>{args.footer}</footer>
    </Page>
  ),
  args: {
    footer: 'Built with Storybook',
  },
};

ERROR in src/stories/Page.stories.ts:33:3
TS2322: Type '(args: {}) => boolean' is not assignable to type 'ArgsStoryFn<ReactRenderer, {}>'.
Type 'boolean' is not assignable to type 'StoryFnReactReturnType'.
31 |
32 | export const CustomFooter: Story = {
33 | render: (args) => (
| ^^^^^^
34 | <Page {...args}>
35 |

{args.footer}
36 |

ERROR in src/stories/Page.stories.ts:34:5
TS2365: Operator '<' cannot be applied to types 'boolean' and 'RegExp'.
32 | export const CustomFooter: Story = {
33 | render: (args) => (
34 | <Page {...args}>
| ^^^^^^^^^^^^^^^^
35 |

{args.footer}
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
36 |
37 | ),
38 | args: {

ERROR in src/stories/Page.stories.ts:34:5
TS2365: Operator '<' cannot be applied to types 'boolean' and 'RegExp'.
32 | export const CustomFooter: Story = {
33 | render: (args) => (
34 | <Page {...args}>
| ^^^^^^^^^^^^^^^^
35 |

{args.footer}
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
36 |
| ^^^^^^^^^^^^
37 | ),
38 | args: {
39 | footer: 'Built with Storybook',

[fr0ntsmaverick]

I was able to figure out what was the reason for me. The file extension needed was ***.stories.tsx. And add import React from 'react'; to the ***.stories.tsx file. And then everything works. Perhaps this will help.