[Bug]: `storybook@next init --skip-install` fails on svelte(-kit) project

manuel3108 commented 1 week ago

Describe the bug

Looks like this is only happening on the beta build @8.2.0-beta.0. The cli fails with an unexpected error:

Cannot find @storybook\svelte\package.json, Error: Cannot find module '@storybook\svelte\package.json'

Relates #27096 Relates https://github.com/svelte-add/svelte-add/issues/475

Reproduction link

https://github.com/manuel3108/storybook-missing-packages-repro (Reused from related issue)

Reproduction steps

Checkout this repo https://github.com/manuel3108/storybook-missing-packages-repr
switch to branch test-2
run npx storybook@next init --skip-install

And you will get this error:

Exception

``` Error: Cannot find @storybook\svelte\package.json, Error: Cannot find module '@storybook\svelte\package.json' Require stack: - C:\Users\manue\AppData\Local\npm-cache\_npx\eb8bf615e50a412a\node_modules\storybook\dist\generate.cjs - C:\Users\manue\AppData\Local\npm-cache\_npx\eb8bf615e50a412a\node_modules\storybook\bin\index.cjs at Module._resolveFilename (node:internal/modules/cjs/loader:1048:15) at Function.resolve (node:internal/modules/helpers:136:19) at getRendererDir (C:\Users\manue\AppData\Local\npm-cache\_npx\eb8bf615e50a412a\node_modules\storybook\dist\generate.cjs:60:11624) at templatePath (C:\Users\manue\AppData\Local\npm-cache\_npx\eb8bf615e50a412a\node_modules\storybook\dist\generate.cjs:62:2146) at copyTemplateFiles (C:\Users\manue\AppData\Local\npm-cache\_npx\eb8bf615e50a412a\node_modules\storybook\dist\generate.cjs:62:3340) at async baseGenerator (C:\Users\manue\AppData\Local\npm-cache\_npx\eb8bf615e50a412a\node_modules\storybook\dist\generate.cjs:108:782) at async generator15 (C:\Users\manue\AppData\Local\npm-cache\_npx\eb8bf615e50a412a\node_modules\storybook\dist\generate.cjs:133:3110) at async installStorybook (C:\Users\manue\AppData\Local\npm-cache\_npx\eb8bf615e50a412a\node_modules\storybook\dist\generate.cjs:145:4887) at async doInitiate (C:\Users\manue\AppData\Local\npm-cache\_npx\eb8bf615e50a412a\node_modules\storybook\dist\generate.cjs:155:894) at async withTelemetry (C:\Users\manue\AppData\Local\npm-cache\_npx\eb8bf615e50a412a\node_modules\@storybook\core\dist\core-server\index.cjs:188662:12) TypeError: (0 , import_get_npm_tarball_url.default) is not a function at resolveUsingBranchInstall (C:\Users\manue\AppData\Local\npm-cache\_npx\eb8bf615e50a412a\node_modules\storybook\dist\generate.cjs:60:11070) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async getRendererDir (C:\Users\manue\AppData\Local\npm-cache\_npx\eb8bf615e50a412a\node_modules\storybook\dist\generate.cjs:60:11763) at async templatePath (C:\Users\manue\AppData\Local\npm-cache\_npx\eb8bf615e50a412a\node_modules\storybook\dist\generate.cjs:62:2140) at async copyTemplateFiles (C:\Users\manue\AppData\Local\npm-cache\_npx\eb8bf615e50a412a\node_modules\storybook\dist\generate.cjs:62:3334) at async baseGenerator (C:\Users\manue\AppData\Local\npm-cache\_npx\eb8bf615e50a412a\node_modules\storybook\dist\generate.cjs:108:782) at async generator15 (C:\Users\manue\AppData\Local\npm-cache\_npx\eb8bf615e50a412a\node_modules\storybook\dist\generate.cjs:133:3110) at async installStorybook (C:\Users\manue\AppData\Local\npm-cache\_npx\eb8bf615e50a412a\node_modules\storybook\dist\generate.cjs:145:4887) at async doInitiate (C:\Users\manue\AppData\Local\npm-cache\_npx\eb8bf615e50a412a\node_modules\storybook\dist\generate.cjs:155:894) at async withTelemetry (C:\Users\manue\AppData\Local\npm-cache\_npx\eb8bf615e50a412a\node_modules\@storybook\core\dist\core-server\index.cjs:188662:12) at getRendererDir (C:\Users\manue\AppData\Local\npm-cache\_npx\eb8bf615e50a412a\node_modules\storybook\dist\generate.cjs:60:11916) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async templatePath (C:\Users\manue\AppData\Local\npm-cache\_npx\eb8bf615e50a412a\node_modules\storybook\dist\generate.cjs:62:2140) at async copyTemplateFiles (C:\Users\manue\AppData\Local\npm-cache\_npx\eb8bf615e50a412a\node_modules\storybook\dist\generate.cjs:62:3334) at async baseGenerator (C:\Users\manue\AppData\Local\npm-cache\_npx\eb8bf615e50a412a\node_modules\storybook\dist\generate.cjs:108:782) at async generator15 (C:\Users\manue\AppData\Local\npm-cache\_npx\eb8bf615e50a412a\node_modules\storybook\dist\generate.cjs:133:3110) at async installStorybook (C:\Users\manue\AppData\Local\npm-cache\_npx\eb8bf615e50a412a\node_modules\storybook\dist\generate.cjs:145:4887) at async doInitiate (C:\Users\manue\AppData\Local\npm-cache\_npx\eb8bf615e50a412a\node_modules\storybook\dist\generate.cjs:155:894) at async withTelemetry (C:\Users\manue\AppData\Local\npm-cache\_npx\eb8bf615e50a412a\node_modules\@storybook\core\dist\core-server\index.cjs:188662:12) at async initiate (C:\Users\manue\AppData\Local\npm-cache\_npx\eb8bf615e50a412a\node_modules\storybook\dist\generate.cjs:180:214) ```

Even easier is to have a look at the following cli output: https://github.com/manuel3108/storybook-missing-packages-repro/actions/runs/9825368257/job/27125437719

System

(From CI Job above)

Storybook Environment Info:
  System:
    OS: Linux 6.5 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (4) x64 AMD EPYC 7763 64-Core Processor
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.15.0 - /opt/hostedtoolcache/node/20.15.0/x64/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 10.7.0 - /opt/hostedtoolcache/node/20.15.0/x64/bin/npm <----- active
    pnpm: 9.4.0 - /opt/hostedtoolcache/node/20.15.0/x64/bin/pnpm
  Browsers:
    Chrome: 126.0.6478.126



### Additional context

Does not happen on `@latest`, although `@latest` has other unrelated issues (https://github.com/svelte-add/svelte-add/pull/393)

`v8.2.x` already includes multiple bug fixes for the cli, especially when using `--skip-install`, that's why I have decided to not report unrelated errors for `v8.1.x` as of now.

greptile-apps[bot] commented 1 week ago

To resolve the issue with storybook@next init --skip-install failing on SvelteKit projects, follow these steps:

Update installStorybook function in initiate.ts: Ensure that the SvelteKit generator is correctly referenced and handles the --skip-install option properly.

case ProjectType.SVELTEKIT:
 return svelteKitGenerator(packageManager, npmOptions, generatorOptions).then(
   commandLog('Adding Storybook support to your "SvelteKit" app')
 );

Check getRendererDir function in generate.cjs: Ensure that the function correctly resolves the path to @storybook/svelte/package.json.

const getRendererDir = async (renderer) => {
 try {
   const packageJsonPath = require.resolve(`${renderer}/package.json`);
   return path.dirname(packageJsonPath);
 } catch (err) {
   throw new Error(`Cannot find ${renderer}/package.json, ${err.message}`);
 }
};

Verify templatePath and copyTemplateFiles functions in generate.cjs: Ensure these functions handle the SvelteKit templates correctly and do not assume the presence of installed packages when --skip-install is used.

These changes should address the issue and allow storybook@next init --skip-install to work correctly with SvelteKit projects.

References

/code/lib/cli/src/initiate.ts /code/lib/cli/bin /code/lib/cli/src/automigrate/index.test.ts

#### About Greptile

This response provides a starting point for your research, not a precise solution. Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant. [Ask Greptile](https://app.greptile.com/chat/github/storybookjs/storybook/next) · [Edit Issue Bot Settings](https://app.greptile.com/apps/github)

valentinpalkovic commented 1 week ago

This should be fixed in 8.2.0. Can you please try it out?

manuel3108 commented 1 week ago

This is resolved.

storybookjs / storybook