Error while installing SB with PNPM on SvelteKit project

Describe the bug Storybook does not install correctly when using PNPM on a SvelteKit project. Receive “npm WARN old lockfile” and “npm ERR! code EINVALIDPACKAGENAME”

To Reproduce pnpm init svelte@next new_folder_name cd new_folder_name pnpm i Either pnpx sb init or pnpx sb@next init (sb 6.4.0-alpha.20)

System

✔ Install the following package: sb@next? (Y/n) · true
 WARN  sb: @storybook/cli@6.4.0-alpha.20 requires a peer of jest@* but none was installed.
Packages: +634
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Packages are hard linked from the content-addressable store to the virtual store.
  Content-addressable store is at: /Users/Ryan/.pnpm-store/v3
  Virtual store is at:             node_modules/.pnpm
Progress: resolved 632, reused 627, downloaded 5, added 634, done
node_modules/.pnpm/core-js@3.15.2/node_modules/core-js: Running postinstall script, done in 65ms

/Users/Ryan/.pnpm-store/v3/tmp/_npx/36418/5:
+ sb 6.4.0-alpha.20

 sb init - the simplest way to add a Storybook to your project.

 • Detecting project type. ✓
info Configuring preprocessor from 'svelte.config.js'
 • Adding Storybook support to your "Svelte" app⸨⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⸩ ⠇ reify: timing arborist
npm WARN old lockfile
npm WARN old lockfile The package-lock.json file was created with an old version of npm,
npm WARN old lockfile so supplemental metadata must be fetched from the registry.
npm WARN old lockfile
npm WARN old lockfile This is a one-time fix-up, please be patient...
npm WARN old lockfile
npm ERR! code EINVALIDPACKAGENAME
npm ERR! Invalid package name ".pnpm": name cannot start with a period

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/Ryan/.npm/_logs/2021-07-24T21_52_38_033Z-debug.log
An error occurred while installing dependencies.

Additional context The debug log:

0 verbose cli [
0 verbose cli   '/Users/Ryan/pnpm-global/5/node_modules/.pnpm/node@16.3.0/node_modules/node/pnpm-global/5/node_modules/.pnpm/node@16.5.0/node_modules/node/bin/node',
0 verbose cli   '/Users/Ryan/pnpm-global/5/node_modules/.pnpm/node@16.3.0/node_modules/node/pnpm-global/5/node_modules/npm/bin/npm-cli.js',
0 verbose cli   'install',
0 verbose cli   '--legacy-peer-deps',
0 verbose cli   '-D',
0 verbose cli   '@storybook/svelte@^6.4.0-alpha.20',
0 verbose cli   '@storybook/addon-links@^6.4.0-alpha.20',
0 verbose cli   '@storybook/addon-essentials@^6.4.0-alpha.20',
0 verbose cli   '@storybook/addon-actions@^6.4.0-alpha.20',
0 verbose cli   'svelte@^3.40.2',
0 verbose cli   'svelte-loader@^3.1.2',
0 verbose cli   '@storybook/addon-svelte-csf@^1.1.0',
0 verbose cli   '@babel/core@^7.14.8',
0 verbose cli   'babel-loader@^8.2.2'
0 verbose cli ]
1 info using npm@7.20.1
2 info using node@v16.5.0
3 timing npm:load:whichnode Completed in 0ms
4 timing config:load:defaults Completed in 1ms
5 timing config:load:file:/Users/Ryan/pnpm-global/5/node_modules/.pnpm/node@16.3.0/node_modules/node/pnpm-global/5/node_modules/.pnpm/npm@7.20.1/node_modules/npm/npmrc Completed in 1ms
6 timing config:load:builtin Completed in 1ms
7 timing config:load:cli Completed in 2ms
8 timing config:load:env Completed in 1ms
9 timing config:load:file:/Users/Ryan/Apps/test-sb-6/.npmrc Completed in 1ms
10 timing config:load:project Completed in 1ms
11 timing config:load:file:/Users/Ryan/.npmrc Completed in 0ms
12 timing config:load:user Completed in 0ms
13 timing config:load:file:/Users/Ryan/pnpm-global/5/node_modules/.pnpm/node@16.3.0/node_modules/node/pnpm-global/5/node_modules/.pnpm/node@16.5.0/node_modules/node/etc/npmrc Completed in 0ms
14 timing config:load:global Completed in 0ms
15 timing config:load:validate Completed in 0ms
16 timing config:load:credentials Completed in 1ms
17 timing config:load:setEnvs Completed in 1ms
18 timing config:load Completed in 9ms
19 timing npm:load:configload Completed in 9ms
20 timing npm:load:setTitle Completed in 17ms
21 timing npm:load:setupLog Completed in 1ms
22 timing config:load:flatten Completed in 2ms
23 timing npm:load:cleanupLog Completed in 2ms
24 timing npm:load:configScope Completed in 0ms
25 timing npm:load:projectScope Completed in 0ms
26 timing npm:load Completed in 32ms
27 timing arborist:ctor Completed in 0ms
28 timing arborist:ctor Completed in 0ms
29 timing idealTree:init Completed in 579ms
30 warn old lockfile The package-lock.json file was created with an old version of npm,
30 warn old lockfile so supplemental metadata must be fetched from the registry.
30 warn old lockfile
30 warn old lockfile This is a one-time fix-up, please be patient...
31 silly inflate node_modules/eslint
32 silly inflate node_modules/.pnpm/eslint@7.31.0/node_modules/eslint
33 silly inflate node_modules/eslint-config-prettier
34 silly inflate node_modules/.pnpm/eslint-config-prettier@8.3.0_eslint@7.31.0/node_modules/eslint-config-prettier
35 silly inflate node_modules/eslint-scope
36 silly inflate node_modules/.pnpm/eslint-scope@5.1.1/node_modules/eslint-scope
37 silly inflate node_modules/eslint-plugin-svelte3
38 silly inflate node_modules/.pnpm/eslint-plugin-svelte3@3.2.0_eslint@7.31.0+svelte@3.40.2/node_modules/eslint-plugin-svelte3
39 silly inflate node_modules/eslint-visitor-keys
40 silly inflate node_modules/.pnpm/eslint-visitor-keys@2.1.0/node_modules/eslint-visitor-keys
41 silly inflate node_modules/eslint-utils
42 silly inflate node_modules/.pnpm/eslint-utils@2.1.0/node_modules/eslint-utils
43 silly inflate node_modules/prettier-plugin-svelte
44 silly inflate node_modules/.pnpm/prettier-plugin-svelte@2.3.1_prettier@2.2.1+svelte@3.40.2/node_modules/prettier-plugin-svelte
45 silly inflate node_modules/svelte
46 silly inflate node_modules/.pnpm/svelte@3.40.2/node_modules/svelte
47 http fetch GET 200 https://registry.npmjs.org/eslint-utils 412ms (cache revalidated)
48 silly inflate node_modules/prettier
49 http fetch GET 200 https://registry.npmjs.org/prettier-plugin-svelte 409ms (cache revalidated)
50 silly inflate node_modules/.pnpm/prettier@2.2.1/node_modules/prettier
51 http fetch GET 200 https://registry.npmjs.org/eslint-visitor-keys 418ms (cache revalidated)
52 silly inflate node_modules/svelte-check
53 http fetch GET 200 https://registry.npmjs.org/eslint-config-prettier 433ms (cache revalidated)
54 silly inflate node_modules/.pnpm/svelte-check@2.2.3_svelte@3.40.2/node_modules/svelte-check
55 silly inflate node_modules/svelte-preprocess
56 silly inflate node_modules/.pnpm/svelte-preprocess@4.7.4_svelte@3.40.2+typescript@4.3.5/node_modules/svelte-preprocess
57 http fetch GET 200 https://registry.npmjs.org/eslint-plugin-svelte3 439ms (cache revalidated)
58 silly inflate node_modules/tslib
59 silly inflate node_modules/.pnpm/tslib@2.3.0/node_modules/tslib
60 silly inflate node_modules/typescript
61 silly inflate node_modules/.pnpm/typescript@4.3.5/node_modules/typescript
62 http fetch GET 200 https://registry.npmjs.org/eslint-scope 446ms (cache revalidated)
63 silly inflate node_modules/@eslint/eslintrc
64 http fetch GET 200 https://registry.npmjs.org/eslint 450ms (cache revalidated)
65 silly inflate node_modules/.pnpm/@eslint+eslintrc@0.4.3/node_modules/@eslint/eslintrc
66 silly inflate node_modules/@types/json-schema
67 silly inflate node_modules/.pnpm/@types+json-schema@7.0.8/node_modules/@types/json-schema
68 http fetch GET 200 https://registry.npmjs.org/svelte 447ms (cache revalidated)
69 silly inflate node_modules/@types/sass
70 silly inflate node_modules/.pnpm/@types+sass@1.16.1/node_modules/@types/sass
71 http fetch GET 200 https://registry.npmjs.org/prettier 132ms (cache revalidated)
72 silly inflate node_modules/@types/node
73 silly inflate node_modules/.pnpm/@types+node@16.4.2/node_modules/@types/node
74 http fetch GET 200 https://registry.npmjs.org/svelte-check 138ms (cache revalidated)
75 silly inflate node_modules/@types/pug
76 silly inflate node_modules/.pnpm/@types+pug@2.0.5/node_modules/@types/pug
77 http fetch GET 200 https://registry.npmjs.org/tslib 143ms (cache revalidated)
78 silly inflate node_modules/@typescript-eslint/eslint-plugin
79 silly inflate node_modules/.pnpm/@typescript-eslint+eslint-plugin@4.28.4_b1648df9f9ba40bdeef3710a5a5af353/node_modules/@typescript-eslint/eslint-plugin
80 http fetch GET 200 https://registry.npmjs.org/svelte-preprocess 156ms (cache revalidated)
81 silly inflate node_modules/@sveltejs/kit
82 silly inflate node_modules/.pnpm/@sveltejs+kit@1.0.0-next.137_svelte@3.40.2/node_modules/@sveltejs/kit
83 http fetch GET 200 https://registry.npmjs.org/typescript 164ms (cache revalidated)
84 silly inflate node_modules/@typescript-eslint/parser
85 silly inflate node_modules/.pnpm/@typescript-eslint+parser@4.28.4_eslint@7.31.0+typescript@4.3.5/node_modules/@typescript-eslint/parser
86 http fetch GET 200 https://registry.npmjs.org/@types%2fjson-schema 172ms (cache revalidated)
87 silly inflate node_modules/@typescript-eslint/experimental-utils
88 silly inflate node_modules/.pnpm/@typescript-eslint+experimental-utils@4.28.4_eslint@7.31.0+typescript@4.3.5/node_modules/@typescript-eslint/experimental-utils
89 http fetch GET 200 https://registry.npmjs.org/@eslint%2feslintrc 182ms (cache revalidated)
90 silly inflate node_modules/@typescript-eslint/types
91 silly inflate node_modules/.pnpm/@typescript-eslint+types@4.28.4/node_modules/@typescript-eslint/types
92 http fetch GET 200 https://registry.npmjs.org/@typescript-eslint%2fexperimental-utils 158ms (cache revalidated)
93 silly inflate node_modules/@typescript-eslint/visitor-keys
94 http fetch GET 200 https://registry.npmjs.org/@typescript-eslint%2feslint-plugin 231ms (cache revalidated)
95 silly inflate node_modules/.pnpm/@typescript-eslint+visitor-keys@4.28.4/node_modules/@typescript-eslint/visitor-keys
96 silly inflate node_modules/@typescript-eslint/typescript-estree
97 http fetch GET 200 https://registry.npmjs.org/@typescript-eslint%2fparser 207ms (cache revalidated)
98 silly inflate node_modules/.pnpm/@typescript-eslint+typescript-estree@4.28.4_typescript@4.3.5/node_modules/@typescript-eslint/typescript-estree
99 silly inflate node_modules/@typescript-eslint/scope-manager
100 silly inflate node_modules/.pnpm/@typescript-eslint+scope-manager@4.28.4/node_modules/@typescript-eslint/scope-manager
101 http fetch GET 200 https://registry.npmjs.org/@typescript-eslint%2ftypes 238ms (cache revalidated)
102 silly inflate node_modules/.pnpm
103 timing idealTree Completed in 1476ms
104 timing command:install Completed in 1493ms
105 verbose stack Error: Invalid package name ".pnpm": name cannot start with a period
105 verbose stack     at invalidPackageName (/Users/Ryan/pnpm-global/5/node_modules/.pnpm/node@16.3.0/node_modules/node/pnpm-global/5/node_modules/.pnpm/npm@7.20.1/node_modules/npm/node_modules/npm-package-arg/npa.js:84:15)
105 verbose stack     at Result.setName (/Users/Ryan/pnpm-global/5/node_modules/.pnpm/node@16.3.0/node_modules/node/pnpm-global/5/node_modules/.pnpm/npm@7.20.1/node_modules/npm/node_modules/npm-package-arg/npa.js:119:11)
105 verbose stack     at new Result (/Users/Ryan/pnpm-global/5/node_modules/.pnpm/node@16.3.0/node_modules/node/pnpm-global/5/node_modules/.pnpm/npm@7.20.1/node_modules/npm/node_modules/npm-package-arg/npa.js:110:10)
105 verbose stack     at Function.resolve (/Users/Ryan/pnpm-global/5/node_modules/.pnpm/node@16.3.0/node_modules/node/pnpm-global/5/node_modules/.pnpm/npm@7.20.1/node_modules/npm/node_modules/npm-package-arg/npa.js:54:15)
105 verbose stack     at Array.<anonymous> (/Users/Ryan/pnpm-global/5/node_modules/.pnpm/node@16.3.0/node_modules/node/pnpm-global/5/node_modules/.pnpm/npm@7.20.1/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:696:26)
105 verbose stack     at run (/Users/Ryan/pnpm-global/5/node_modules/.pnpm/node@16.3.0/node_modules/node/pnpm-global/5/node_modules/.pnpm/npm@7.20.1/node_modules/npm/node_modules/promise-call-limit/index.js:30:26)
105 verbose stack     at /Users/Ryan/pnpm-global/5/node_modules/.pnpm/node@16.3.0/node_modules/node/pnpm-global/5/node_modules/.pnpm/npm@7.20.1/node_modules/npm/node_modules/promise-call-limit/index.js:33:7
106 verbose cwd /Users/Ryan/Apps/test-sb-6
107 verbose Darwin 20.3.0
108 verbose argv "/Users/Ryan/pnpm-global/5/node_modules/.pnpm/node@16.3.0/node_modules/node/pnpm-global/5/node_modules/.pnpm/node@16.5.0/node_modules/node/bin/node" "/Users/Ryan/pnpm-global/5/node_modules/.pnpm/node@16.3.0/node_modules/node/pnpm-global/5/node_modules/npm/bin/npm-cli.js" "install" "--legacy-peer-deps" "-D" "@storybook/svelte@^6.4.0-alpha.20" "@storybook/addon-links@^6.4.0-alpha.20" "@storybook/addon-essentials@^6.4.0-alpha.20" "@storybook/addon-actions@^6.4.0-alpha.20" "svelte@^3.40.2" "svelte-loader@^3.1.2" "@storybook/addon-svelte-csf@^1.1.0" "@babel/core@^7.14.8" "babel-loader@^8.2.2"
109 verbose node v16.5.0
110 verbose npm  v7.20.1
111 error code EINVALIDPACKAGENAME
112 error Invalid package name ".pnpm": name cannot start with a period
113 verbose exit 1

[rcmcsweeney]

👍 Fixed and works perfectly thanks to @jesperp on #12995 (Fix for EINVALIDPACKAGENAME error on install) and @schindld on #11587 (Fix for ERR_REQUIRE_ESM error on run).

Install SB on top of your existing Svelte project:

pnpx sb init -s
pnpm i 
pnpm i -D @storybook/cli

Change the following before running SB:

I was able to get storybook running by adding .storybook/package.json containing

{
	"type": "commonjs"
}

and changing line 12 of .storybook/main.js from

"preprocess": require("../svelte.config.js").preprocess

to

"preprocess": import("../svelte.config.js").preprocess

Run SB:

pnpm storybook

🎉 🥳 🎉

[ht55ght55]

Can this workaround be put into the Storybook Svelte Docs? This is also the fix for my SvelteKit (no PNPM) project. SvelteKit is the new Svelte!