最新のStorybook8をSvelte5＆Vite5で動作確認してみた

            
            + storybook: v7 --> v8
+ svelte:    v4 --> v5
+ vite:      v4 --> v5
        

            
            $ npx storybook@latest upgrade
        

            
            $ npx storybook automigrate --config-dir <.storybookのパス>
        

            
            $ yarn add [-S/-D] <アップグレードしたいパッケージ>@latest
        

            
            $ npx storybook --version
8.4.2

$ npx vite --version
vite/5.4.10 linux-x64 node-v20.16.0

$ yarn list | grep -i svelte@
│  ├─ @storybook/svelte@8.4.2
├─ @storybook/svelte@8.4.2
├─ @sveltejs/vite-plugin-svelte@4.0.0
├─ @tsconfig/svelte@5.0.4
├─ htmlparser2-svelte@4.1.0
├─ svelte@5.1.10
│  └─ htmlparser2-svelte@4.1.0
        

            
            The CJS build of Vite's Node API is deprecated. See https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
SB_CORE-SERVER_0007 (MainFileEvaluationError): Storybook couldn't evaluate your .storybook/main.js file.

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in /node_modules/@sveltejs/vite-plugin-svelte/package.json
    at exportsNotFound (node:internal/modules/esm/resolve:304:10)
    at packageExportsResolve (node:internal/modules/esm/resolve:594:13)
    at resolveExports (node:internal/modules/cjs/loader:592:36)
    at Module._findPath (node:internal/modules/cjs/loader:669:31)
    at Module._resolveFilename (node:internal/modules/cjs/loader:1131:27)
    at Module._load (node:internal/modules/cjs/loader:986:27)
    at Module.require (node:internal/modules/cjs/loader:1233:19)
    at require (node:internal/modules/helpers:179:18)
    at Object.<anonymous> (/.storybook/main.js:2:24)
    at Module._compile (node:internal/modules/cjs/loader:1358:14)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
        

            
            import {StorybookConfig} from '@storybook/svelte-vite';

const config: StorybookConfig = {
  stories: [
    "../stories/components/**/*.stories.@(js|ts|svelte)",
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  core: {
    builder: {
        name: '@storybook/builder-vite',
        options: {
          viteConfigPath: './customVite.config.js',
        },
    },
  },
  framework: "@storybook/svelte-vite",
  docs: {
    autodocs: "tag",
  },
  async viteFinal(config) {
        return config;
  }
};
export default config;
        

            
            import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import tsconfigPaths from 'vite-tsconfig-paths';

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

            
            $ storybook dev -p [ポート番号]
👇
$ storybook dev -p [ポート番号] --no-open
        

            
            $ yarn add -D svelte-preprocess
        

            
            import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
    plugins: [
        //👇利用するPreprocessを有効にする
        svelte({
            preprocess: [sveltePreprocess({ typescript: true, scss: true })]
        }),
        tsconfigPaths()
    ]
})
        

            
            <script lang="ts">
    import PageHeader from './PageHeader.svelte';

    //...中略
</script>

...

<PageHeader />

...
        

            
            <script>
    import PageHeader from './PageHeader.svelte';

    //...中略
</script>

...

<PageHeader />

...