[Bug]: __dirname is not defined error while running vitest with storybook 8.3 integrated with sveltekit and vitest addon

[bhvngt]

Describe the bug

While running vitest with storybook 8.3 integrated with sveltekit, addon-svelte-csf and experiemental-vitest-addon, following error is thrown

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Startup Error ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
ReferenceError: __dirname is not defined
    at config (file:///home/projects/sveltejs-kit-template-default-bxesk4/node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_postc_h7dedyfd7hpqjnyna5zmolvjda/node_modules/@storybook/sveltekit/dist/vite-plugin.mjs:19:145)
    at runConfigHook (file:///home/projects/sveltejs-kit-template-default-bxesk4/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-NjL7WTE1.js:66643:25)
    at async resolveConfig (file:///home/projects/sveltejs-kit-template-default-bxesk4/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-NjL7WTE1.js:66092:12)
    at async _createServer (file:///home/projects/sveltejs-kit-template-default-bxesk4/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-NjL7WTE1.js:62676:18)
    at async createViteServer (file:///home/projects/sveltejs-kit-template-default-bxesk4/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vitest/dist/chunks/cli-api.BKkmK21J.js:9074:18)
    at async createVitest (file:///home/projects/sveltejs-kit-template-default-bxesk4/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vitest/dist/chunks/cli-api.BKkmK21J.js:10875:18)
    at async prepareVitest (file:///home/projects/sveltejs-kit-template-default-bxesk4/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vitest/dist/chunks/cli-api.BKkmK21J.js:11289:15)
    at async startVitest (file:///home/projects/sveltejs-kit-template-default-bxesk4/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vitest/dist/chunks/cli-api.BKkmK21J.js:11215:15)
    at async start (file:///home/projects/sveltejs-kit-template-default-bxesk4/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vitest/dist/chunks/cac.BVmpoFAv.js:1522:17)

This appears to be due to commonjs and esm inter-operatability.

Reproduction link

https://stackblitz.com/edit/sveltejs-kit-template-default-9enxbt?file=.storybook%2Fmain.js

Reproduction steps

1. Click on the reproduction link
2. run pnpm install
3. run svelte-kit sync to generate .svelte-kit folder
4. run pnpm start - this should successfully run storybook
5. run vitest - this should throw the error

System

System:
    OS: macOS 14.6.1
    CPU: (10) arm64 Apple M1 Pro
    Shell: 3.7.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 22.8.0 - ~/Library/pnpm/node
    npm: 10.1.0 - /opt/homebrew/bin/npm
    pnpm: 9.10.0 - ~/Library/pnpm/pnpm <----- active
  Browsers:
    Chrome: 128.0.6613.138
    Safari: 17.6
  npmPackages:
    @storybook/addon-essentials: ^8.3.1 => 8.3.1
    @storybook/addon-interactions: ^8.3.1 => 8.3.1
    @storybook/addon-links: ^8.3.1 => 8.3.1
    @storybook/addon-svelte-csf: next => 5.0.0-next.3
    @storybook/blocks: ^8.3.1 => 8.3.1
    @storybook/experimental-addon-test: ^8.3.1 => 8.3.1
    @storybook/svelte: ^8.3.1 => 8.3.1
    @storybook/sveltekit: ^8.3.1 => 8.3.1
    @storybook/test: ^8.3.1 => 8.3.1
    storybook: ^8.3.1 => 8.3.1

Additional context

Since this is the first time I am trying this new experimental setup. I may have missed required steps. I have taken help from the official docs for this setup.

[JReinhold]

Thanks for the report!

After investigating it, @valentinpalkovic and I have a few pointers:

1. The reproduction is a bit borked, it's both missing a main.ts and preview.ts file, and some imports are pointing to the wrong directories. Could you try to update it so it at least runs Storybook without failure?

2. We didn't get the __dirname error that you described, but instead a similar thing like cannot use import outside of a module, which was caused by tsx. tsx is a transitive dependency of unocss, and indeed removing that plugin from the Vite config solved that issue. It looks like the dependency chain is unocss > unconfig > importx > tsx, and importx is globally registrering tsx as a loader, so tsx will try to handle the main.ts import, which it can't because it treats it as CJS for some reason. I don't know if @antfu has anything to add here.

We then ran into a bunch of general Vitest Browser Mode - SvelteKit - Svelte 5 issues that seems to be unrelated to Storybook but more a general issue with their integration. This is a bit strange because we have this working in our CI, but I can't get a regular Vitest Browser + SvelteKit + Svelte 5 setup working at all, I'll have to investigate that further.

As a side-note, @storybook/addon-svelte-csf doesn't support the experimental Vitest addon yet, you can add a feature request for that on the addon repo. That is not the cause of any of this however.

[bhvngt]

The reproduction is a bit borked, it's both missing a main.ts and preview.ts file, and some imports are pointing to the wrong directories. Could you try to update it so it at least runs Storybook without failure?

My bad. Not sure why that got missed out. Here's the revised link where it should reproduce the __dirname error. Let me know if this works at your end.

1. I disabled unocss from the vite plugin chain. In spite of that, the __dirname error occurs. It appears to be stemming from storybookSveltekitPlugin. If I disable that then vitest appears to be running.

2. In my local machine, when I disable storybookSveltekitPlugin and keep storybookTest plugin, it gives me following error. I am unable to reproduce this in stackblitz. Interestingly, If I disable this plugin then I am able to run vitest successfully on non svelte-native csf stories (i.e. ts based stories).

SyntaxError: Unexpected token '{'
    at compileSourceTextModule (node:internal/modules/esm/utils:337:16)
    at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:310:18)
    at loadESMFromCJS (node:internal/modules/cjs/loader:1381:24)
    at Module._compile (node:internal/modules/cjs/loader:1503:5)
    at Module._extensions..js (node:internal/modules/cjs/loader:1691:10)
    at transformer (file:///temp/.pnpm/[email protected]/node_modules/tsx/dist/register-DvZgvjmQ.mjs:2:748)
    at Object.transformer [as .js] (file:///temp/.pnpm/[email protected]/node_modules/tsx/dist/register-DvZgvjmQ.mjs:2:748)
    at Module.load (node:internal/modules/cjs/loader:1317:32)
    at Module._load (node:internal/modules/cjs/loader:1127:12)
    at TracingChannel.traceSync (node:diagnostics_channel:315:14)

As a side-note, @storybook/addon-svelte-csf doesn't support the experimental Vitest addon yet, you can add a feature request for that on the addon repo. That is not the cause of any of this however

Got it. I have filed the feature request on the @storybook/addon-svelte-csf repo