Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork9.8k
Vite with Storybook 8require is not defined when importing cjs file#28659
-
SummaryCurrently 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: Given that Vite can bundle everything correctly, I'm confused as to why this is an issue in storybook. Additional informationNo response Create a reproductionNo response |
BetaWas this translation helpful?Give feedback.
All reactions
Replies: 6 comments 8 replies
-
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. |
BetaWas this translation helpful?Give feedback.
All reactions
-
Any update on this? |
BetaWas this translation helpful?Give feedback.
All reactions
-
Can someone provide a minimal reproduction? |
BetaWas this translation helpful?Give feedback.
All reactions
-
Also experiencing this using turborepo. Quickest steps to reproduce, follow the instructions onhttps://turbo.build/repo/docs/guides/tools/storybook |
BetaWas this translation helpful?Give feedback.
All reactions
-
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. |
BetaWas this translation helpful?Give feedback.
All reactions
👍 1
-
In my case importing 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; |
BetaWas this translation helpful?Give feedback.
All reactions
👍 8
-
it works! thank you! |
BetaWas this translation helpful?Give feedback.
All reactions
-
I'm getting the same error, and the fix from@toothlessdev did not work for me. Still getting the same error with that. |
BetaWas this translation helpful?Give feedback.
All reactions
-
I'm having the same error in storybook 9 with node 22+ |
BetaWas this translation helpful?Give feedback.
All reactions
-
did you figure it out in the end? Same versions and same issue on my end |
BetaWas this translation helpful?Give feedback.
All reactions
-
no, still trying to find a way to fix it :( |
BetaWas this translation helpful?Give feedback.
All reactions
-
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 |
BetaWas this translation helpful?Give feedback.
All reactions
-
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 |
BetaWas this translation helpful?Give feedback.
All reactions
👍 1
-
the above worked for us on |
BetaWas this translation helpful?Give feedback.