storybook: [Bug]: Hot reload broken in Storybook 7 with Vite

Describe the bug

Hello, can you help me understand why Storybook may not reload (HRM) after making changes to a component that is used in the stories?

In the stories, if I make changes, it picks them up.

I repeat, the problem is that if you make changes in the component, not in the .stories.tsx

After creating a project from scratch, I already have a problem that I encountered.

Does anyone have any ideas why this might be happening?

To Reproduce

To reproduce, you only need two lines:

yarn create vite (choose preact + typescript) npx storybook init --builder=vite

System

Environment Info:

  System:
    OS: macOS 13.3.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 16.15.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.5.5 - /usr/local/bin/npm
  npmPackages:
    @storybook/addon-essentials: ^7.0.11 => 7.0.11 
    @storybook/addon-interactions: ^7.0.11 => 7.0.11 
    @storybook/addon-links: ^7.0.11 => 7.0.11 
    @storybook/blocks: ^7.0.11 => 7.0.11 
    @storybook/preact: ^7.0.11 => 7.0.11 
    @storybook/preact-vite: ^7.0.11 => 7.0.11 
    @storybook/testing-library: ^0.0.14-next.2 => 0.0.14-next.2

Additional context

package.json

{
  "name": "storybookbug",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },
  "dependencies": {
    "preact": "^10.13.1"
  },
  "devDependencies": {
    "@preact/preset-vite": "^2.5.0",
    "@storybook/addon-essentials": "^7.0.11",
    "@storybook/addon-interactions": "^7.0.11",
    "@storybook/addon-links": "^7.0.11",
    "@storybook/blocks": "^7.0.11",
    "@storybook/preact": "^7.0.11",
    "@storybook/preact-vite": "^7.0.11",
    "@storybook/testing-library": "^0.0.14-next.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "storybook": "^7.0.11",
    "typescript": "^5.0.2",
    "vite": "^4.3.2"
  }
}

vite.config.ts

import { defineConfig } from 'vite'
import preact from '@preact/preset-vite'

export default defineConfig({
  plugins: [preact()],
})

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    "esModuleInterop": true,
    /* Bundler mode */
    "moduleResolution": "node",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "jsxImportSource": "preact",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "exclude": ["node_modules"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

.storybook/main.ts

import type { StorybookConfig } from "@storybook/preact-vite";
const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  core: {
    builder: "@storybook/builder-vite",
  },
  framework: {
    name: "@storybook/preact-vite",
    options: {},
  },
  viteFinal: (config, { configType }) => {
    config.resolve.alias['react'] = 'preact/compat';
    config.resolve.alias['react-dom'] = 'preact/compat';
    return config;
  },
};
export default config;

.storybook/preview.ts

import type { Preview } from "@storybook/preact";

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
};

export default preview;