Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

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

Unanswered
LordZardeck asked this question inHelp
Discussion options

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 withtailwindcss/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

You must be logged in to vote

Replies: 6 comments 8 replies

Comment options

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.

You must be logged in to vote
0 replies
Comment options

Any update on this?

You must be logged in to vote
0 replies
Comment options

Can someone provide a minimal reproduction?

You must be logged in to vote
2 replies
@BenjaminCorey
Comment options

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

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

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.

Comment options

In my case importingcreateRequire in.storybook/main.ts solved problem

importtype{StorybookConfig}from"@storybook/react-vite";import{join,dirname}from"path";import{createRequire}from"module";constrequire=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-anyfunctiongetAbsolutePath(value:string):any{returndirname(require.resolve(join(value,"package.json")));}constconfig: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:{},},};exportdefaultconfig;
You must be logged in to vote
1 reply
@naramdash
Comment options

it works! thank you!

Comment options

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

You must be logged in to vote
0 replies
Comment options

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

You must be logged in to vote
5 replies
@amir-talic
Comment options

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

@SKOLZ
Comment options

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

@SKOLZ
Comment options

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
Comment options

import{createRequire}from'module';const__filename=fileURLToPath(import.meta.url);const__dirname=dirname(__filename);constrequire=createRequire(import.meta.url);

If you use windows try this instead

@adamfratino
Comment options

import { createRequire } from 'module';const require = createRequire(import.meta.url);

the above worked for us on8.6.14

Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment
Category
Help
Labels
None yet
12 participants
@LordZardeck@SKOLZ@BenjaminCorey@ajnozari@valentinpalkovic@adamfratino@theklr@naramdash@manwithaplandy@toothlessdev@SenouLynn@amir-talic

[8]ページ先頭

©2009-2025 Movatter.jp