Vite with Storybook 8 require is not defined when importing cjs file
#28659
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. |
Beta Was this translation helpful? Give feedback.
-
|
Any update on this? |
Beta Was this translation helpful? Give feedback.
-
|
Can someone provide a minimal reproduction? |
Beta Was this translation helpful? Give feedback.
-
|
In my case importing 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; |
Beta Was this translation helpful? Give feedback.
-
|
I'm getting the same error, and the fix from @toothlessdev did not work for me. Still getting the same error with that. |
Beta Was this translation helpful? Give feedback.
-
|
I'm having the same error in storybook 9 with node 22+ |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
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/resolveConfigto 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
Beta Was this translation helpful? Give feedback.
All reactions