posts/storybook-vite/

[utterances-bot]

Using Vite for Bandler in Storybook | miyauci.me

It shows you how to develop Storybook with Vite. Explains in detail the points where you can get stuck in a preact project. It also shows how to make the Storybook configuration file type-safe.

https://miyauchi.dev/posts/storybook-vite/?utterances=0ed620ab32fc7d46b69260567f%2BJ3AOl53aec80snXzOt4MCPOUhS5E8OP2HLUxi2ic5Ou2Pal5pfv8A8gtemSU66B2IDdMeAVklQcgmhQBKHQ%2B5YUg0LRI2c1LK4VS2ci0LvNxCsS0caAX4UJ8%3D

[richardguerre]

Awesome article, particularly the section on "Working with mdx files in Preact". It helped me debug my issue. Though I ended up fixing it a bit differently as I actually require adding import { h } from 'preact'; to all my components (reason: I'm not using Vite as the main bundler for my Preact application, only using it within Storybook).

Here's my main.js config file for reference:

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  core: {
    builder: 'storybook-builder-vite',
  },
  viteFinal: (config) => {
    config.esbuild = {
      ...config.esbuild,
      jsxFactory: 'h',
      jsxFragment: 'Fragment',
    };
    return config;
  },
};

[TomokiMiyauci]

I'm glad you found this article useful.

Your method is correct.
@preact/preset-vite actually configures the vite config in the same way.
https://github.com/preactjs/preset-vite/blob/main/src/index.ts#L19-L21