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

bhvngt commented 1 month ago

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/@storybook+sveltekit@8.3.1_@babel+core@7.25.2_@sveltejs+vite-plugin-svelte@4.0.0-next.7_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/vite@5.4.0/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/vite@5.4.0/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/vite@5.4.0/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/vitest@2.1.1_@vitest+browser@2.1.1/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/vitest@2.1.1_@vitest+browser@2.1.1/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/vitest@2.1.1_@vitest+browser@2.1.1/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/vitest@2.1.1_@vitest+browser@2.1.1/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/vitest@2.1.1_@vitest+browser@2.1.1/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

Click on the reproduction link
run pnpm install
run svelte-kit sync to generate .svelte-kit folder
run pnpm start - this should successfully run storybook
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 commented 1 month ago

Thanks for the report!

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

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?
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 commented 1 month ago

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.

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.
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/tsx@4.19.1/node_modules/tsx/dist/register-DvZgvjmQ.mjs:2:748)
    at Object.transformer [as .js] (file:///temp/.pnpm/tsx@4.19.1/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

benbender commented 3 weeks ago

I can confirm that issue and would love to see #29157 merged to get that resolved. Thx and love to all who are putting efforts into this! <3

A quickfix to solve this issue in the meantime can be achieved like this:

export const storybookSveltekitPlugin = () => {
    return [
        {
            name: "storybook:sveltekit-mock-stores",
            config: () => ({
                resolve: {
                    alias: {
                        "$app/forms": resolve(
                            ".",
                            "node_modules/@storybook/sveltekit/src/mocks/app/forms.ts",
                        ),
                        "$app/navigation": resolve(
                            ".",
                            "node_modules/@storybook/sveltekit/src/mocks/app/navigation.ts",
                        ),
                        "$app/stores": resolve(
                            ".",
                            "node_modules/@storybook/sveltekit/src/mocks/app/stores.ts",
                        ),
                    },
                },
            }),
        } satisfies Plugin,
    ];
};

svallory commented 2 weeks ago

I'm getting that in a different place. Why would a .mjs file try to use __dirname though?

ReferenceError: __dirname is not defined
    at config (file:///work/cva/code/packages/figma-sdk/node_modules/@storybook/sveltekit/dist/vite-plugin.mjs:4:135)
    at runConfigHook (file:///work/cva/code/packages/figma-sdk/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:66720:25)
    at async resolveConfig (file:///work/cva/code/packages/figma-sdk/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:66169:12)
    at async _createServer (file:///work/cva/code/packages/figma-sdk/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:62758:18)
    at async createViteServer (file:///work/cva/code/packages/figma-sdk/node_modules/vitest/dist/chunks/cli-api.CKrRYkw8.js:9811:18)
    at async initializeProject (file:///work/cva/code/packages/figma-sdk/node_modules/vitest/dist/chunks/cli-api.CKrRYkw8.js:9831:3)
    at async resolveWorkspace (file:///work/cva/code/packages/figma-sdk/node_modules/vitest/dist/chunks/cli-api.CKrRYkw8.js:10240:9)
    at async Vitest.setServer (file:///work/cva/code/packages/figma-sdk/node_modules/vitest/dist/chunks/cli-api.CKrRYkw8.js:10479:22)
    at async handler (file:///work/cva/code/packages/figma-sdk/node_modules/vitest/dist/chunks/cli-api.CKrRYkw8.js:11381:11)
    at async _createServer (file:///work/cva/code/packages/figma-sdk/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:63080:20)

storybookjs / storybook