Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
bhvngt opened this issue Sep 19, 2024 · 4 comments · Fixed by #29157

Comments

@bhvngt
Copy link

bhvngt commented Sep 19, 2024

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
Copy link
Contributor

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
Copy link
Author

bhvngt commented Sep 19, 2024

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

@JReinhold JReinhold self-assigned this Sep 19, 2024
@benbender
Copy link
Contributor

benbender commented Oct 22, 2024

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
Copy link

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants