Is it possible to run Prisma with Storybook?

[tajbowness]

Summary

Hello, I was wondering if it was possible to run Prisma with Storybook?

I'm currently implementing pagination for a table so it would be really good to be able to interact with Prisma in this scenario, especially for writing tests. Is this possible?

When I try to, I get process is not defined, and any effort attempting to resolve that, more issues arise. So I was hoping if anyone could share some insight or steer me in the correct direction.

Additional information

• Storybook version: 9.0.15
• main.ts:

import type { StorybookConfig } from '@storybook/react-vite';
import { createRequire } from "node:module";
import { dirname, join } from "node:path";

const require = createRequire(import.meta.url);

const config: StorybookConfig = {
  stories: [
    "../**/*.stories.@(js|jsx|ts|tsx)",
  ],
  addons: [
    getAbsolutePath("@storybook/addon-onboarding"),
    getAbsolutePath("@chromatic-com/storybook"),
    getAbsolutePath("@storybook/addon-vitest"),
    getAbsolutePath("@storybook/addon-a11y"),
    getAbsolutePath("@storybook/addon-docs"),
  ],
  core: {
    builder: getAbsolutePath("@storybook/builder-vite"),
  },
  framework: {
    name: getAbsolutePath("@storybook/react-vite"),
    options: {}
  },
};

export default config;

function getAbsolutePath(value: string): any {
  return dirname(require.resolve(join(value, "package.json")));
}

• React / Vite / Remix

[dosubot[bot]]

Prisma can't run directly in Storybook because Storybook's preview environment (especially with Vite/React) is browser-based and doesn't provide Node.js globals like process that Prisma needs. That's why you see the 'process is not defined' error—Prisma expects a Node.js server, but Storybook stories run in the browser context, which can't access your database or Node APIs source.

To test components that rely on database data (like pagination), the best practice is to mock your data layer. You can do this by mocking modules, using tools like MSW (Mock Service Worker) to intercept API calls, or providing mock data directly in your stories. If you want to simulate real backend interactions, set up a mock API endpoint and have your components fetch from it, rather than trying to use Prisma directly source.

If you need integration tests with real Prisma/database access, run those outside Storybook—using your usual test runner in a Node.js environment. For Storybook, keep the focus on UI and interaction, and mock anything that requires server-side logic.

To reply, just mention @dosu.

---

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