StorybookでSvelteプロジェクト向けのUIデザイン開発環境を構築する

            - React
- Vue
- Angular
- Umber
- Svelte
- Preact
- Solid
- Qwik

        

            $ node --version
v20.10.0
$ npm --version
10.2.3
$ yarn --version
1.22.19

        

            #👇空のpackage.jsonを用意しておく
$ yarn init
#👇Storybook v8がインストールされる
$ npx storybook@latest init

        

            $ npx storybook@7 init

        

            $ storybook dev -p 5384
@storybook/cli v7.6.20

SB_CORE-SERVER_0002 (CriticalPresetLoadError): Storybook failed to load the following preset: @storybook/svelte-vite/preset.

Please check whether your setup is correct, the Storybook dependencies (and their peer dependencies) are installed correctly and there are no package version clashes.

If you believe this is a bug, please open an issue on Github.

Error: Cannot find module 'svelte/compiler'
Require stack:
- ./node_modules/@storybook/svelte-vite/dist/preset.js
- ./node_modules/@storybook/core-common/dist/index.js
- ./node_modules/@storybook/telemetry/dist/index.js
- ./node_modules/@storybook/cli/dist/generate.js
- ./node_modules/@storybook/cli/bin/index.js
- ./node_modules/storybook/index.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1144:15)
    at Module._load (node:internal/modules/cjs/loader:985:27)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at require (node:internal/modules/helpers:176:18)
    at Object.<anonymous> (./node_modules/@storybook/svelte-vite/dist/preset.js:9:265)
    at Module._compile (node:internal/modules/cjs/loader:1376:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Object.newLoader (./node_modules/esbuild-register/dist/node.js:2262:9)
    at extensions..js (./node_modules/esbuild-register/dist/node.js:4838:24)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at loadPreset (./node_modules/@storybook/core-common/dist/index.js:15:82)

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

        

            {
  //...省略
  "devDependencies": {
    "@storybook/addon-essentials": "^7.6.20",
    "@storybook/addon-interactions": "^7.6.20",
    "@storybook/addon-links": "^7.6.20",
    "@storybook/blocks": "^7.6.20",
    "@storybook/svelte": "^7.6.20",
    "@storybook/svelte-vite": "^7.6.20",
    "@storybook/test": "^7.6.20",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "storybook": "^7.6.20"
  }
}

        

            $ yarn add -D svelte
#👇Viteのバージョンに注意！
$ yarn add -D vite@^4.0.0

        

            #...
/***/node_modules/wide-align/align.js:2
var stringWidth = require('string-width')
                  ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /***/node_modules/string-width/index.js from /***/node_modules/wide-align/align.js not supported.
Instead change the require of index.js in /Users/phil/Projects/FPV/nextmission/node_modules/wide-align/align.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/***/node_modules/wide-align/align.js:2:19)
    at Object.<anonymous> (/***/node_modules/gauge/render-template.js:2:13)
    at Object.<anonymous> (/***/node_modules/gauge/plumbing.js:3:22)
    at Object.<anonymous> (/***/node_modules/gauge/index.js:2:16)
    at Object.<anonymous> (/***/node_modules/npmlog/log.js:3:13)
    at Object.<anonymous> (/***/node_modules/@storybook/node-logger/dist/index.js:1:1141)
    at Object.<anonymous> (/***/node_modules/@storybook/cli/dist/generate.js:1:1014)
    at Object.<anonymous> (/***/node_modules/@storybook/cli/bin/index.js:9:1)
    at Object.<anonymous> (/***/node_modules/storybook/index.js:3:1) {
  code: 'ERR_REQUIRE_ESM'
}

        

            {
    //...中略
    "resolutions": {
        "jackspeak": "2.1.1"
    }
}

        

            $ rm -rf yarn.lock node_modules
$ yarn install