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 storybook@8.6.8 add @storybook/experimental-addon-test@8.6.8
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/experimental-addon-test@8.6.8' 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/browser@3.0.9, playwright, @vitest/coverage-v8@3.0.9

› 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

> foo@0.0.1 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