Vite with Storybook 8 require is not defined when importing cjs file

[LordZardeck]

Summary

Currently I have a UI package in my monorepo that's using storybook. Vite is configured, and properly builds with 0 issues. However, when running storybook and opening a story that contains a component that imports a CJS file, i get the error: require is not defined. The reason I have to import a CJS file, is that the tailwind config needs to be in CJS format, but I want to import it to process it with tailwindcss/resolveConfig to utlize some of the configuration values at runtime.

Given that Vite can bundle everything correctly, I'm confused as to why this is an issue in storybook.

Additional information

No response

Create a reproduction

No response

[SenouLynn]

I am experiencing this too. Seemingly after upgrading Node. This smells like a configuration tweak however I'm not exactly sure what the pressure point is.

[theklr]

Any update on this?

[valentinpalkovic]

Can someone provide a minimal reproduction?

[BenjaminCorey]

Also experiencing this using turborepo. Quickest steps to reproduce, follow the instructions on https://turbo.build/repo/docs/guides/tools/storybook

> pnpm dlx create-turbo@latest -e design-system
> pnpm dev

[ajnozari]

Can someone provide a minimal reproduction?

Create a base react + vite ts app using node 22+ and try to install storybook. There's an issue with zip during install and the require is not defined error pops up when you try to run the storybook command.

[toothlessdev]

In my case importing createRequire in .storybook/main.ts solved problem

import type { StorybookConfig } from "@storybook/react-vite";

import { join, dirname } from "path";
import { createRequire } from "module";

const require = createRequire(import.meta.url);
/**
 * This function is used to resolve the absolute path of a package.
 * It is needed in projects that use Yarn PnP or are set up within a monorepo.
 */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function getAbsolutePath(value: string): any {
    return dirname(require.resolve(join(value, "package.json")));
}
const config: StorybookConfig = {
    stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
    addons: [
        getAbsolutePath("@storybook/addon-essentials"),
        getAbsolutePath("@storybook/addon-onboarding"),
        getAbsolutePath("@storybook/addon-interactions"),
    ],
    framework: {
        name: getAbsolutePath("@storybook/react-vite"),
        options: {},
    },
};
export default config;

[naramdash]

it works! thank you!

[manwithaplandy]

I'm getting the same error, and the fix from @toothlessdev did not work for me. Still getting the same error with that.

[SKOLZ]

I'm having the same error in storybook 9 with node 22+

[amir-talic]

did you figure it out in the end? Same versions and same issue on my end

[SKOLZ]

no, still trying to find a way to fix it :(

[SKOLZ]

I ended up downgrading again to Storybook 8.6.14 until this gets fixed or I manage to find a workaround :) I'll post any updates if I have any

[toothlessdev]

import { createRequire } from 'module';

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

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

If you use windows try this instead

[adamfratino]

import { createRequire } from 'module';

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

the above worked for us on 8.6.14