Repository: storybook
Issue: [Bug]: Hot reload broken in Storybook 7 with Vite
Labels: bug,help wanted,preact,builder-vite,sev:S3

### 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

```shell
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
```javascript
{
  "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
```javascript
import { defineConfig } from 'vite'
import preact from '@preact/preset-vite'

export default defineConfig({
  plugins: [preact()],
})
```

tsconfig.json
```javascript
{
  "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
```javascript
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
```javascript
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;
```