Unable to display stories for custom components

[SanguineTitan57]

Summary

For the past 2 days, I have been unable to render my stories, I just have many components and none of them work because of one error:

http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-E42WOUFD.js?v=8c8b8302:255:54

I have scoured all parts of the internet, but I cannot find a fix to the error. It's very frustrating.

Steps to reproduce, you can clone the repository, then simply run pnpm storybook on the development branch.

Find my main.ts, package.json, preview.ts files attached below:

main.ts

const config: StorybookConfig = {
  "stories": [
    "../src/**/*.mdx",
    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
  ],
  "addons": [
    "@chromatic-com/storybook",
    "@storybook/addon-vitest",
    "@storybook/addon-a11y",
    "@storybook/addon-docs",
    "@storybook/addon-onboarding"
  ],
  "framework": "@storybook/nextjs-vite",
  "staticDirs": [
    "..\\public"
  ]
};
export default config;

Package.json

  "name": "marvin",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "create-container": "docker-compose up -d",
    "down": "docker-compose down",
    "generate": "drizzle-kit generate",
    "lint": "eslint",
    "migrate": "drizzle-kit migrate",
    "start": "next start",
    "stop": "docker-compose stop",
    "studio": "drizzle-kit studio",
    "docker-up": "docker-compose up",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },
  "dependencies": {
    "@better-auth/passkey": "^1.4.6",
    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
    "@floating-ui/react": "^0.27.16",
    "@lexical/code": "^0.39.0",
    "@lexical/link": "^0.39.0",
    "@lexical/list": "^0.39.0",
    "@lexical/markdown": "^0.39.0",
    "@lexical/react": "^0.39.0",
    "@lexical/rich-text": "^0.39.0",
    "@neondatabase/serverless": "^1.0.2",
    "@radix-ui/react-avatar": "^1.1.11",
    "@radix-ui/react-collapsible": "^1.1.12",
    "@radix-ui/react-dialog": "^1.1.15",
    "@radix-ui/react-dropdown-menu": "^2.1.16",
    "@radix-ui/react-popover": "^1.1.15",
    "@radix-ui/react-separator": "^1.1.8",
    "@radix-ui/react-slot": "^1.2.4",
    "@radix-ui/react-tooltip": "^1.2.8",
    "@react-email/components": "^1.0.1",
    "@tabler/icons-react": "^3.35.0",
    "@uploadthing/react": "^7.3.3",
    "@upstash/redis": "^1.35.7",
    "axios": "^1.13.2",
    "bcryptjs": "^3.0.3",
    "better-auth": "^1.4.6",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "drizzle-orm": "^0.45.1",
    "jose": "^6.1.3",
    "lexical": "^0.39.0",
    "lodash.throttle": "^4.1.1",
    "lucide-react": "^0.560.0",
    "mammoth": "^1.11.0",
    "motion": "^12.23.26",
    "next": "16.0.10",
    "next-themes": "^0.4.6",
    "pdf-parse": "^2.4.5",
    "postgres": "^3.4.7",
    "prettier": "^3.7.4",
    "react": "19.2.1",
    "react-dom": "19.2.1",
    "react-hotkeys-hook": "^5.2.1",
    "resend": "^6.6.0",
    "server-only": "^0.0.1",
    "sonner": "^2.0.7",
    "tailwind-merge": "^3.4.0",
    "uploadthing": "^7.7.4",
    "ws": "^8.18.3",
    "zod": "^4.1.13"
  },
  "devDependencies": {
    "@chromatic-com/storybook": "^4.1.3",
    "@storybook/addon-a11y": "^10.1.7",
    "@storybook/addon-docs": "^10.1.7",
    "@storybook/addon-onboarding": "^10.1.7",
    "@storybook/addon-vitest": "^10.1.7",
    "@storybook/nextjs-vite": "^10.1.7",
    "@tailwindcss/postcss": "^4.1.18",
    "@types/lodash.throttle": "^4.1.9",
    "@types/node": "^25.0.0",
    "@types/pdf-parse": "^1.1.5",
    "@types/react": "^19.2.7",
    "@types/react-dom": "^19.2.3",
    "@types/ws": "^8.18.1",
    "@vitest/browser-playwright": "^4.0.15",
    "@vitest/coverage-v8": "^4.0.15",
    "babel-plugin-react-compiler": "1.0.0",
    "baseline-browser-mapping": "^2.9.6",
    "buffer": "^6.0.3",
    "drizzle-kit": "^0.31.8",
    "eslint": "^9.39.1",
    "eslint-config-next": "16.0.8",
    "eslint-plugin-storybook": "^10.1.7",
    "playwright": "^1.57.0",
    "react-email": "5.0.7",
    "sass": "^1.96.0",
    "storybook": "^10.1.7",
    "tailwindcss": "^4.1.18",
    "tw-animate-css": "^1.4.0",
    "typescript": "^5.9.3",
    "vite": "^7.2.7",
    "vite-plugin-node-polyfills": "^0.24.0",
    "vitest": "^4.0.15"
  }
}

preview.ts

import { Providers } from "../src/lib/providers"

const preview: Preview = {
  decorators: [(Story) => (
    <Providers>
      <Story />
    </Providers>
  )],
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },

    nextjs: {
      appDirectory: true,
    },

    a11y: {
      // 'todo' - show a11y violations in the test UI only
      // 'error' - fail CI on a11y violations
      // 'off' - skip a11y checks entirely
      test: "todo",
    },
  },
};

export default preview;

Looking forward to a response

Additional information

I'm using Storybook 10, I also have better-auth setup, I suspect that it will need module mocking

Create a reproduction

No response

[dosubot[bot]]

Hi @SanguineTitan57! I'm Dosu and I’m helping the storybook team.

This error is likely caused by a module resolution issue in Storybook 10 with Next.js and Vite, especially on Windows. Here’s what you can do:

• Make sure you’re using the latest version of vite-plugin-storybook-nextjs (at least v3.0.3), as this fixes Windows-specific resolution errors. Clear your lockfile and node_modules, then reinstall dependencies to ensure the fix is applied. Reference
• If you use @storybook/addon-vitest, the required Vite plugin is loaded automatically. If not, add storybookNextJsPlugin from @storybook/nextjs-vite/vite-plugin to your vite.config.ts plugins array. Reference
• If your components import server-only modules or Node.js APIs (like better-auth), Storybook’s Vite build will crash. Extract pure components for your stories, or mock those modules using sb.mock in preview.ts or a mocks directory. Reference
• Storybook’s NextJS-Vite integration automatically normalizes PostCSS config, so Tailwind should work out of the box. If you have custom PostCSS config, make sure it uses object format for plugins. Reference
• If you still see the error, try temporarily mocking or removing better-auth and other suspected problematic modules to see if the error persists.

You can find more details and troubleshooting steps in the Next.js Vite framework docs.

Try these steps and let me know if the error persists or if you see a different message. If possible, share the full error stack trace from chunk-E42WOUFD.js for more targeted help.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[SanguineTitan57]

@dosu I still get the same error, even after automocking

Error:
TypeError: (0 , import_node_module.createRequire) is not a function at http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-2RFS7QMW.js?v=f1380e25:223:54

preview.tsx

import type { Preview } from "@storybook/nextjs-vite";
import { sb } from "storybook/test";
import { Providers } from "../src/lib/providers";

// Automatically spies on all exports from the specified modules
sb.mock(import("../src/lib/auth"), { spy: true });
sb.mock(import("../src/lib/permissions"), { spy: true });
sb.mock(import("better-auth"), { spy: true });
sb.mock(import("@better-auth/passkey"), { spy: true });
sb.mock(import("../src/actions/auth"), { spy: true });
sb.mock(import("../src/actions/form-actions"), { spy: true });
sb.mock(import("../src/actions/rolePermissions"), { spy: true });
sb.mock(import("../src/actions/session"), { spy: true });
// sb.mock(import(""), { spy: true });
// sb.mock(import(""), { spy: true });

const preview: Preview = {
  decorators: [
    (Story) => (
      <Providers>
        <Story />
      </Providers>
    ),
  ],
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },

    nextjs: {
      appDirectory: true,
    },

    a11y: {
      // 'todo' - show a11y violations in the test UI only
      // 'error' - fail CI on a11y violations
      // 'off' - skip a11y checks entirely
      test: "todo",
    },
  },
};

export default preview;

import type { StorybookConfig } from '@storybook/nextjs-vite';

const config: StorybookConfig = {
  "stories": [
    "../src/**/*.mdx",
    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
  ],
  "addons": [
    "@chromatic-com/storybook",
    "@storybook/addon-vitest",
    "@storybook/addon-a11y",
    "@storybook/addon-docs",
    "@storybook/addon-onboarding"
  ],
  "framework": "@storybook/nextjs-vite",
  "staticDirs": [
    "..\\public"
  ],
  "viteFinal": async (config) => {
    // Prevent better-auth from being bundled
    config.ssr = config.ssr || {};
    config.ssr.noExternal = config.ssr.noExternal || [];

    // Ensure these are treated as external and not bundled
    const external = [
      'better-auth',
      '@better-auth/core',
      '@better-auth/passkey',
      'better-auth/adapters/drizzle',
      'better-auth/next-js',
      'better-auth/plugins',
      'better-auth/plugins/access',
      'better-auth/client/plugins',
      'better-auth/react',
    ];

    if (Array.isArray(config.ssr.noExternal)) {
      config.ssr.noExternal = [...config.ssr.noExternal, ...external];
    }

    return config;
  }
};
export default config;

[dosubot[bot]]

The error is caused by Node.js APIs like createRequire leaking into the browser bundle, which happens if server-only code or dependencies are not fully excluded from the client build. Here’s what you can do:

• Update vite-plugin-storybook-nextjs to at least v3.1.7, clear your lockfile and node_modules, and reinstall dependencies. This resolves several module resolution issues and Windows-specific bugs (details).
• Change all backslashes in staticDirs to forward slashes: use "../public" instead of "..\\public" (details).
• Temporarily remove all imports and usage of better-auth and related modules from your components and stories. If the error disappears, add a Vite alias in viteFinal to point those modules to a local mock file that exports empty objects or stubs. This prevents Node.js-only code from being bundled (docs).
• Optionally, try the storybook-addon-vite-mock package to automate mocking of problematic modules.
• In viteFinal, set config.resolve.conditions = ["module", "import", "require"] to help Vite prefer ESM builds and avoid CJS code that uses Node APIs (example).
• Make sure your Node.js version is at least 20.19 to avoid ESM/CJS compatibility issues (reference).

After each change, restart Storybook and check if the error persists. If you still see the error, try to isolate which import or dependency is triggering it by commenting out modules one by one.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[SanguineTitan57]

@dosu I noticed, that the issue stems primarily from:

Temporarily remove all imports and usage of better-auth and related modules from your components and stories. If the error disappears, add a Vite alias in viteFinal to point those modules to a local mock file that exports empty objects or stubs. This prevents Node.js-only code from being bundled (docs).

Upon removing every single better-auth instance and related modules from my component code, the error disappears. However, all Tailwind Styling is gone too. Apart from that, adding a mock file to the viteFinal in main.ts did not work, the error came back the instant I removed all the comments. Automocking did not work as well

I added __mock__ folders to the root directory for the node_modules and __mock__ folders directly into the folders that had the related files/modules, e.g: lib, actions, etc. Find my code repo here

error:

TypeError: (0 , import_node_module.createRequire) is not a function
    at http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-2RFS7QMW.js?v=f1380e25:223:54

add-member.tsx (Removed server logic)

"use client";
import { useActionState } from "react";
import { addMember } from "@/actions/auth";
import { organizationOptions } from "@/lib/constants";

export function AddMemberForm() {
  // const [state, action, pending] = useActionState(
  //   addMember,
  //   undefined,
  // );

  return (
    <div className="flex-center min-h-screen">
      <div className="flex flex-1 flex-col justify-center px-4 py-10 lg:px-6">
        <div className="sm:mx-auto sm:w-full sm:max-w-sm border-2 border-border p-10 rounded-2xl">
          <h2 className="text-center text-xl font-semibold text-foreground">
            Add Member to Organization
          </h2>
          <form /**action={action}*/ className="mt-6">
            <div className="flex flex-col gap-6">
              <div className="flex flex-col space-y-2 items-start">
                <label
                  className="text-sm font-medium text-foreground dark:text-foreground"
                  htmlFor="memberID"
                >
                  Generated Member ID
                </label>
                <input
                  id="memberID"
                  className="p-2 rounded-lg w-full border-2"
                  name="memberID"
                  type="text"
                  placeholder="Member ID"
                  required
                />
              </div>

              {/* <div className="min-h-0.5 md:min-h-1">
                {state?.errors?.memberID && (
                  <p className="text-red-400 text-sm">
                    {state.errors.memberID}
                  </p>
                )}
              </div> */}

              <div className="flex flex-col space-y-2 items-start">
                <label
                  className="text-sm font-medium text-foreground dark:text-foreground"
                >
                  Roles to assign (select at least one):
                </label>

                <div className="space-y-2 w-full p-3 border-2 rounded-lg">
                  <label className="flex items-center space-x-2 cursor-pointer">
                    <input
                      type="checkbox"
                      name="inviteeRoles"
                      value="admin"
                      className="w-4 h-4"
                    />
                    <span>Admin - Full organization control</span>
                  </label>
                  <label className="flex items-center space-x-2 cursor-pointer">
                    <input
                      type="checkbox"
                      name="inviteeRoles"
                      value="editor"
                      className="w-4 h-4"
                    />
                    <span>Editor - Can edit any post</span>
                  </label>
                  <label className="flex items-center space-x-2 cursor-pointer">
                    <input
                      type="checkbox"
                      name="inviteeRoles"
                      value="author"
                      className="w-4 h-4"
                      defaultChecked
                    />
                    <span>Author - Can create and edit own posts</span>
                  </label>
                </div>
              </div>

              {/* <div className="min-h-0.5 md:min-h-1">
                {state?.errors?.inviteeRoles && (
                  <p className="text-red-400 text-sm">
                    {state.errors.inviteeRoles}
                  </p>
                )}
              </div> */}

              <div className="flex flex-col space-y-2 items-start">
                <label
                  className="text-sm font-medium text-foreground dark:text-foreground"
                  htmlFor="organizationID"
                >
                  Organization
                </label>

                <select
                  id="organizationID"
                  className="p-2 rounded-lg w-full border-2"
                  name="organizationID"
                  required
                >
                  <option value="">-- Select an Organization --</option>
                  {organizationOptions.map((org) => (
                    <option key={org.value} value={org.id}>
                      {org.label}
                    </option>
                  ))}
                </select>
              </div>

              {/* <div className="min-h-0.5 md:min-h-1">
                {state?.errors?.organizationID && (
                  <p className="text-red-400 text-sm">
                    {state.errors.organizationID}
                  </p>
                )}
              </div> */}

              <button
                /**disabled={pending}</div>*/
                className="bg-primary p-2 border rounded-xl disabled:opacity-50 disabled:cursor-not-allowed"
                type="submit"
              >
                {/* 
                
                {pending ? "Adding..." : "Adding Member"}
                */}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}

add-member.tsx (Server logic returned)

"use client";
import { useActionState } from "react";
import { addMember } from "@/actions/auth";
import { organizationOptions } from "@/lib/constants";

export function AddMemberForm() {
  const [state, action, pending] = useActionState(
    addMember,
    undefined,
  );

  return (
    <div className="flex-center min-h-screen">
      <div className="flex flex-1 flex-col justify-center px-4 py-10 lg:px-6">
        <div className="sm:mx-auto sm:w-full sm:max-w-sm border-2 border-border p-10 rounded-2xl">
          <h2 className="text-center text-xl font-semibold text-foreground">
            Add Member to Organization
          </h2>
          <form action={action} className="mt-6">
            <div className="flex flex-col gap-6">
              <div className="flex flex-col space-y-2 items-start">
                <label
                  className="text-sm font-medium text-foreground dark:text-foreground"
                  htmlFor="memberID"
                >
                  Generated Member ID
                </label>
                <input
                  id="memberID"
                  className="p-2 rounded-lg w-full border-2"
                  name="memberID"
                  type="text"
                  placeholder="Member ID"
                  required
                />
              </div>

              <div className="min-h-0.5 md:min-h-1">
                {state?.errors?.memberID && (
                  <p className="text-red-400 text-sm">
                    {state.errors.memberID}
                  </p>
                )}
              </div>

              <div className="flex flex-col space-y-2 items-start">
                <label
                  className="text-sm font-medium text-foreground dark:text-foreground"
                >
                  Roles to assign (select at least one):
                </label>

                <div className="space-y-2 w-full p-3 border-2 rounded-lg">
                  <label className="flex items-center space-x-2 cursor-pointer">
                    <input
                      type="checkbox"
                      name="inviteeRoles"
                      value="admin"
                      className="w-4 h-4"
                    />
                    <span>Admin - Full organization control</span>
                  </label>
                  <label className="flex items-center space-x-2 cursor-pointer">
                    <input
                      type="checkbox"
                      name="inviteeRoles"
                      value="editor"
                      className="w-4 h-4"
                    />
                    <span>Editor - Can edit any post</span>
                  </label>
                  <label className="flex items-center space-x-2 cursor-pointer">
                    <input
                      type="checkbox"
                      name="inviteeRoles"
                      value="author"
                      className="w-4 h-4"
                      defaultChecked
                    />
                    <span>Author - Can create and edit own posts</span>
                  </label>
                </div>
              </div>

              <div className="min-h-0.5 md:min-h-1">
                {state?.errors?.inviteeRoles && (
                  <p className="text-red-400 text-sm">
                    {state.errors.inviteeRoles}
                  </p>
                )}
              </div>

              <div className="flex flex-col space-y-2 items-start">
                <label
                  className="text-sm font-medium text-foreground dark:text-foreground"
                  htmlFor="organizationID"
                >
                  Organization
                </label>

                <select
                  id="organizationID"
                  className="p-2 rounded-lg w-full border-2"
                  name="organizationID"
                  required
                >
                  <option value="">-- Select an Organization --</option>
                  {organizationOptions.map((org) => (
                    <option key={org.value} value={org.id}>
                      {org.label}
                    </option>
                  ))}
                </select>
              </div>

              <div className="min-h-0.5 md:min-h-1">
                {state?.errors?.organizationID && (
                  <p className="text-red-400 text-sm">
                    {state.errors.organizationID}
                  </p>
                )}
              </div>

              <button
                disabled={pending}
                className="bg-primary p-2 border rounded-xl disabled:opacity-50 disabled:cursor-not-allowed"
                type="submit"
              >
                {pending ? "Adding..." : "Adding Member"}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}

preview.tsx

import type { Preview } from "@storybook/nextjs-vite";
import { sb } from "storybook/test";
import { Providers } from "../src/lib/providers";

// Automatically spies on all exports from the specified modules
sb.mock(import("../src/lib/auth"), { spy: true });
sb.mock(import("../src/lib/permissions"), { spy: true });
sb.mock(import("better-auth"), { spy: true });
sb.mock(import("@better-auth/passkey"), { spy: true });
sb.mock(import("../src/actions/auth"), { spy: true });
sb.mock(import("../src/actions/form-actions"), { spy: true });
sb.mock(import("../src/actions/rolePermissions"), { spy: true });
sb.mock(import("../src/actions/session"), { spy: true });
// sb.mock(import(""), { spy: true });
// sb.mock(import(""), { spy: true });

const preview: Preview = {
  decorators: [
    (Story) => (
      <Providers>
        <Story />
      </Providers>
    ),
  ],
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },

    nextjs: {
      appDirectory: true,
    },

    a11y: {
      // 'todo' - show a11y violations in the test UI only
      // 'error' - fail CI on a11y violations
      // 'off' - skip a11y checks entirely
      test: "todo",
    },
  },
};

export default preview;

main.ts

import type { StorybookConfig } from '@storybook/nextjs-vite';
import path from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const config: StorybookConfig = {
  "stories": [
    "../src/**/*.mdx",
    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
  ],
  "addons": [
    "@chromatic-com/storybook",
    "@storybook/addon-vitest",
    "@storybook/addon-a11y",
    "@storybook/addon-docs",
    "@storybook/addon-onboarding"
  ],
  "framework": "@storybook/nextjs-vite",
  "staticDirs": [
    "../public"
  ],
  "viteFinal": async (config) => {
    config.resolve = config.resolve || {};
    config.resolve.alias = {
      ...(config.resolve.alias || {}),
      // Point server-only modules to their mocks
      'better-auth': path.resolve(__dirname, '../__mocks__/better-auth.ts'),
      '@better-auth/core': path.resolve(__dirname, '../__mocks__/@better-auth/core.ts'),
      '@/lib/auth': path.resolve(__dirname, '../src/lib/__mocks__/auth.ts'),
      '@/lib/auth-client': path.resolve(__dirname, '../src/lib/__mocks__/auth-client.ts'),
      '@/lib/permissions': path.resolve(__dirname, '../src/lib/__mocks__/permissions.ts'),
      '@/actions/auth': path.resolve(__dirname, '../src/actions/__mocks__/auth.ts'),
      '@/actions/rolePermissions': path.resolve(__dirname, '../src/actions/__mocks__/rolePermissions.ts'),
      '@/actions/session': path.resolve(__dirname, '../src/actions/__mocks__/session.ts'),
    };

    return config;
  }
};
export default config;

[dosubot[bot]]

You're running into two separate issues: the Node.js API error and the loss of Tailwind styling. Here’s how to address both:

1. Fixing the "createRequire is not a function" error:

• This error means server-only code (like better-auth) is leaking into your browser bundle. To prevent this, you need to alias all server-only modules to pure ESM mock files that export stubs or empty objects—no Node.js APIs or side effects.

• Place mocks for external packages (like better-auth) in a root __mocks__ directory (at your project root, next to .storybook). For example, create __mocks__/better-auth.js (must be .js and ESM, not TypeScript or CJS):

  // __mocks__/better-auth.js
  export const someAuthFunction = () => {};
  export default {};

• In .storybook/main.ts, alias the module to the mock:

  import path from 'path';
  import { fileURLToPath } from 'url';
  
  const __filename = fileURLToPath(import.meta.url);
  const __dirname = path.dirname(__filename);
  
  // ...
  config.resolve.alias = {
    ...(config.resolve.alias || {}),
    'better-auth': path.resolve(__dirname, '../__mocks__/better-auth.js'),
    // ...other aliases
  };

• Make sure your imports in the codebase match the alias exactly (e.g., import ... from 'better-auth').

• Set config.resolve.conditions = ["module", "import", "require"] in viteFinal to help Vite prefer ESM builds and avoid CJS code that uses Node APIs.

• After updating, delete node_modules and your lockfile, then reinstall dependencies. Make sure you’re on vite-plugin-storybook-nextjs v3.1.7 or newer.

2. Restoring Tailwind styling:

• Storybook with Next.js and Vite auto-handles PostCSS/Tailwind config, but you must import your Tailwind CSS file in .storybook/preview.ts for styles to apply globally:

  import '../src/styles/tailwind.css'; // Adjust path as needed

• If you remove logic from components and lose styling, it’s likely because the component no longer renders elements with Tailwind classes, or the global CSS import is missing.

• If you use dark mode or themes, consider using the withThemeByClassName decorator from @storybook/addon-styling for theme switching.

3. Troubleshooting tips:

• Double-check that all mock files are pure ESM, export the same named exports as the real modules, and do not use Node.js APIs.
• If you still see the error, try commenting out imports one by one to isolate which module is leaking Node.js code.
• For advanced mocking, you can try the storybook-addon-vite-mock package.

You can find more details and examples in the official Storybook docs and Next.js Vite integration guide.

Try these steps and let me know if the error or styling issue persists.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[SanguineTitan57]

@dosu Got it up and running, thank you.

[dosubot[bot]]

Happy to help! If you run into any more Storybook or Vite issues, just ping me.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}