errors when setting up storybook in a library project

[fel1x-developer]

(project directory)/vite.config.ts:8:76
Error: The 'import.meta' meta-property is not allowed in files which will build into CommonJS output. 
const dirname =
        typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));

Current tsconfig.json

{
	"extends": "./.svelte-kit/tsconfig.json",
	"compilerOptions": {
		"allowJs": true,
		"checkJs": true,
		"esModuleInterop": true,
		"forceConsistentCasingInFileNames": true,
		"resolveJsonModule": true,
		"skipLibCheck": true,
		"sourceMap": true,
		"strict": true,
		"module": "NodeNext",
		"moduleResolution": "NodeNext"
	}
}

Updated tsconfig.json. Error is resolved.

{
	"extends": "./.svelte-kit/tsconfig.json",
	"compilerOptions": {
		"allowJs": true,
		"checkJs": true,
		"esModuleInterop": true,
		"forceConsistentCasingInFileNames": true,
		"resolveJsonModule": true,
		"skipLibCheck": true,
		"sourceMap": true,
		"strict": true,
		"module": "ESNext",
		"moduleResolution": "bundler"
	}
}

[hyunbinseo]

I believe NodeNext is only used in the Svelte library template, since it is meant to be packaged and distributed as a package.

[benmccann]

not allowed in files which will build into CommonJS output.

You generally shouldn't be compiling to CommonJS. The whole Svelte ecosystem is ESM-only

[fel1x-developer]

Sorry my tsconfig.json was modified by some script. After copying new tsconfig.json to the working directory, everything works fine. I apologize for causing confusion.

[fel1x-developer]

Reopen as reproduction is found. This is caused when sv create with Svelte library option.

~
➜ bunx sv create d
┌  Welcome to the Svelte CLI! (v0.7.0)
│
◇  Which template would you like?
│  Svelte library
│
◇  Add type checking with TypeScript?
│  Yes, using TypeScript syntax
│
◆  Project created
│
◇  What would you like to add to your project? (use arrow keys / space bar)
│  none
│
◇  Which package manager do you want to install dependencies with?
│  bun
│
◆  Successfully installed dependencies
│
◇  Project next steps ─────────────────────────────────────────────────────╮
│                                                                          │
│  1: cd d                                                                 │
│  2: git init && git add -A && git commit -m "Initial commit" (optional)  │
│  3: bun run dev --open                                                   │
│                                                                          │
│  To close the dev server, hit Ctrl-C                                     │
│                                                                          │
│  Stuck? Visit us at https://svelte.dev/chat                              │
│                                                                          │
├──────────────────────────────────────────────────────────────────────────╯
│
└  You're all set!

tsconfig/json

{
        "extends": "./.svelte-kit/tsconfig.json",
        "compilerOptions": {
                "allowJs": true,
                "checkJs": true,
                "esModuleInterop": true,
                "forceConsistentCasingInFileNames": true,
                "resolveJsonModule": true,
                "skipLibCheck": true,
                "sourceMap": true,
                "strict": true,
                "module": "NodeNext",
                "moduleResolution": "NodeNext"
        }
}

[fel1x-developer]

~
➜ npx sv create foo
┌  Welcome to the Svelte CLI! (v0.7.0)
│
◇  Which template would you like?
│  Svelte library
│
◇  Add type checking with TypeScript?
│  Yes, using TypeScript syntax
│
◆  Project created
│
◇  What would you like to add to your project? (use arrow keys / space bar)
│  vitest, storybook
│
◇  storybook: Running external command (npx storybook@latest init --skip-install --no-dev)
╭──────────────────────────────────────────────────────╮
│                                                      │
│   Adding Storybook version 8.6.8 to your project..   │
│                                                      │
╰──────────────────────────────────────────────────────╯
✔ What do you want to use Storybook for? › Documentation: MDX, auto-generated component docs, Testing: Fast browser-based component tests, watch mode
 • Detecting project type. ✓
WARN An issue occurred while trying to find dependencies metadata using npm.
WARN An issue occurred while trying to find dependencies metadata using npm.
 • Adding Storybook support to your "SvelteKit" appWARN An issue occurred while trying to find dependencies metadata using npm.

  ✅ Getting the correct version of 8 packages
  ✅ Installing Storybook dependencies
WARN An issue occurred while trying to find dependencies metadata using npm.
. ✓

attention => Storybook now collects completely anonymous telemetry regarding usage.
This information is used to shape Storybook's roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://storybook.js.org/telemetry

> npx [email protected] add @storybook/[email protected]
Verifying @storybook/experimental-addon-test
The version of @storybook/experimental-addon-test (8.6.8) you are installing is not the same as the version of Storybook you are using (undefined). This may lead to unexpected behavior.
Installing @storybook/experimental-addon-test@^8.6.8
Adding '@storybook/[email protected]' to the "addons" field in .storybook/main.ts                              Running postinstall script for @storybook/experimental-addon-test

╭ 👋 Howdy! ─────────────────────────────────────────────────────────────────╮
│                                                                            │
│   I'm the installation helper for @storybook/experimental-addon-test       │
│                                                                            │
│   Hold on for a moment while I look at your project and get it set up...   │
│                                                                            │
╰────────────────────────────────────────────────────────────────────────────╯

╭ 🙈 Let me cover this for you ───────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                         │
│   You don't seem to have a coverage reporter installed. Vitest needs either V8 or Istanbul to generate coverage         │
│   reports.                                                                                                              ││                                                                                                                         │
│   Adding @vitest/coverage-v8 to enable coverage reporting.                                                              │
│   Read more about Vitest coverage providers at https://vitest.dev/guide/coverage.html#coverage-providers                │
│                                                                                                                         │
╰─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
› Installing dependencies:
  @vitest/[email protected], playwright, @vitest/[email protected]

› Configuring Playwright with Chromium (this might take some time):
  npx playwright install chromium --with-deps

› Creating a Vitest setup file for Storybook:
  /Users/minsoochoo/foo/.storybook/vitest.setup.ts

› Updating your Vite config file:
  /Users/minsoochoo/foo/vite.config.ts

╭ 🎉 All done! ─────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                   │
│   The Storybook Test addon is now configured and you're ready to run your tests!                  │
│                                                                                                   │
│   Here are a couple of tips to get you started:                                                   │
│   • You can run tests with npx vitest --project=storybook                                         │
│   • When using the Vitest extension in your editor, all of your stories will be shown as tests!   │
│                                                                                                   │
│   Check the documentation for more information about its features and options at:                 │
│   https://storybook.js.org/docs/writing-tests/test-addon                                          │
│                                                                                                   │
╰───────────────────────────────────────────────────────────────────────────────────────────────────╯

╭──────────────────────────────────────────────────────────────────────────────╮
│                                                                              │
│   Storybook was successfully installed in your project! 🎉                   │
│   Additional features: Documentation, Testing                                │
│                                                                              │
│   To run Storybook manually, run npm run storybook. CTRL+C to stop.          │
│                                                                              │
│   Wanna know more about Storybook? Check out https://storybook.js.org/       │
│   Having trouble or want to chat? Join us at https://discord.gg/storybook/   │
│                                                                              │
╰──────────────────────────────────────────────────────────────────────────────╯
│
◆  Successfully setup add-ons
│
◇  Which package manager do you want to install dependencies with?
│  npm
│
◆  Successfully installed dependencies
│
◇  Project next steps ─────────────────────────────────────────────────────╮
│                                                                          │
│  1: cd foo                                                               │
│  2: git init && git add -A && git commit -m "Initial commit" (optional)  │
│  3: npm run dev -- --open                                                │
│                                                                          │
│  To close the dev server, hit Ctrl-C                                     │
│                                                                          │
│  Stuck? Visit us at https://svelte.dev/chat                              │
│                                                                          │
├──────────────────────────────────────────────────────────────────────────╯
│
└  You're all set!


~ took 26.4s
➜ cd foo

~/foo is 📦 0.0.1 via ⬢ v22.14.0
➜ npm run check

> [email protected] check
> svelte-kit sync && svelte-check --tsconfig ./tsconfig.json


====================================
Loading svelte-check in workspace: /Users/minsoochoo/foo
Getting Svelte diagnostics...

/Users/minsoochoo/foo/vite.config.ts:4:18
Error: Cannot find module 'node:path' or its corresponding type declarations.
import { defineConfig } from 'vite';
import path from 'node:path';
import { fileURLToPath } from 'node:url';


/Users/minsoochoo/foo/vite.config.ts:5:31
Error: Cannot find module 'node:url' or its corresponding type declarations.
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';


/Users/minsoochoo/foo/vite.config.ts:7:24                                                                                  Error: Cannot find name '__dirname'. Did you mean 'dirname'?
import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';
const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));


/Users/minsoochoo/foo/vite.config.ts:7:52
Error: Cannot find name '__dirname'. Did you mean 'dirname'?
import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';
const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));



====================================
svelte-check found 4 errors and 0 warnings in 1 file

tsconfig.json

{
        "extends": "./.svelte-kit/tsconfig.json",
        "compilerOptions": {
                "allowJs": true,
                "checkJs": true,
                "esModuleInterop": true,
                "forceConsistentCasingInFileNames": true,
                "resolveJsonModule": true,
                "skipLibCheck": true,
                "sourceMap": true,
                "strict": true,
                "module": "NodeNext",
                "moduleResolution": "NodeNext"
        }
}

[benmccann]

This is expected. It's best practice to use Mode next for libraries so that they can be consumed everywhere and bundler for apps so that they can consume all types of libraries

[benmccann]

Although we should fix whatever errors are occuring

[manuel3108]

Created #509, as the issue with the types was also created in another unrelated issue #484.
Therefore closing this.

[manuel3108]

@JReinhold Do you have any clue why this is happening? We are currently assuming it's missing @types/node, at least that would make sense for me. But sadly, i'm unable to reproduce this behavior at all.

[fel1x-developer]

@JReinhold Do you have any clue why this is happening? We are currently assuming it's missing @types/node, at least that would make sense for me. But sadly, i'm unable to reproduce this behavior at all.

It doesn't happen anymore

[JReinhold]

@manuel3108 I looked into this, and indeed you are right, it is because of the missing @types/node. When Storybook generates/modifies the Vitest config, it adds the following imports:

import path from 'node:path';
import { fileURLToPath } from 'node:url';

It first tries to modify vite.config.ts directly, but if that is too complex because of existing test configuration or similar, it will instead create a new vitest.workspace.ts file.

Previously it could modify vite.config.ts (based on the logs in this issue), but something must have changed with the template recently, that is now causing Storybook to fallback to vitest.workspace.ts. This is why "it doesn't happen anymore", because .svelte-kit/tsconfig.json does not include vitest.workspace.ts so it isn't type-checked, only vite.config.ts is. (that should probably be fixed on your end?)

If you manually add "include": ["vitest.workspace.ts"] to /tsconfig.json it will start throwing the error again.

And yes, adding @types/node does fix the issue. This is because both vite and vitest has an optional peer dependency on @types/node, which isn't installed:

npm ls -a
[email protected] /Users/jeppe/dev/temp/sv-497
...
├─┬ [email protected]
│ ├── UNMET OPTIONAL DEPENDENCY @types/node@^18.0.0 || ^20.0.0 || >=22.0.0
└─┬ [email protected]
  ├── UNMET OPTIONAL DEPENDENCY @types/node@^18.0.0 || ^20.0.0 || >=22.0.0

When you add it explicitly, it's added to node_modules/@types/node which TS picks up. And because vite/vitest peer depends on it, if you remove it again, it actually stays there, which is why this is true: #484 (comment)

We could add @types/node as an optional peer dep in Storybook similar to Vite and Vitest, but as we see now it wouldn't actually fix the issue. Adding it as a real peer dep would be too heavy and incorrect. We could potentially add it as a dependency to the user's project when we generate those imports and detect, I'll have a chat with the team about that, not sure if it's the right solution.

---

Side note:

It looks like Storybook's Vitest config modification is broken with sv now, because it generates a vitest.workspace.ts file, but Vitest ignores that when there is already an inline test.workspace property in vite.config.ts, so running npm run test --project storybook fails. We'll have to fix that on our end.

The problem here is actually, that in sv, the Storybook addon runs first, then Vitest. If there is no Vitest workspace configuration in the Vite config (which there isn't because Vitest hasn't been configured yet), Storybook will default to add a separate vitest.workspace.ts.
However when sv then later configures Vitest with an inline workspace configuration, that will mean that Vitest will now ignore the separate config that Storybook generated.

There are a few solutions to this:

1. sv runs Storybook after the other add-ons, so that it can see the inline workspace config and modify that. I've test that this works today by running sv create with Vitest only, and then manually initing Storybook afterwards. This will also improve the interoperability with ESLint, because when Storybook detects ESLint, it will prompt the user to install the Storybook ESLint plugin too.
2. sv gets smarter in detecting an existing vitest.workspace.ts when configuring Vitest, and modifies that instead of vite.config.ts. This will solve the case of someone running sv add vitest after having created a project with Storybook - however that is probably a very edgy edge case.