{"id":22412,"library":"storybook-framework-redwoodjs-vite","title":"storybook-framework-redwoodjs-vite","description":"Storybook framework preset for RedwoodJS applications using Vite as the build tool. Current stable version is 8.9.0. Designed to integrate Storybook seamlessly into RedwoodJS projects, it provides a Vite-based Storybook configuration optimized for the RedwoodJS framework. Key differentiator: tightly coupled with RedwoodJS project structure and dependencies, but note that upstream RedwoodJS is winding down; an actively maintained fork exists at CedarJS. Release cadence follows RedwoodJS releases.","status":"maintenance","version":"8.9.0","language":"javascript","source_language":"en","source_url":"https://github.com/redwoodjs/redwood","tags":["javascript","Storybook","RedwoodJS","React","Vite","typescript"],"install":[{"cmd":"npm install storybook-framework-redwoodjs-vite","lang":"bash","label":"npm"},{"cmd":"yarn add storybook-framework-redwoodjs-vite","lang":"bash","label":"yarn"},{"cmd":"pnpm add storybook-framework-redwoodjs-vite","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; required to run Storybook itself","package":"storybook","optional":false},{"reason":"Peer dependency; RedwoodJS router integration","package":"@redwoodjs/router","optional":false},{"reason":"Peer dependency; reads RedwoodJS project configuration","package":"@redwoodjs/project-config","optional":false},{"reason":"Peer dependency; UI library used by Storybook and RedwoodJS","package":"react","optional":false},{"reason":"Peer dependency; DOM rendering for React","package":"react-dom","optional":false}],"imports":[{"note":"ESM-only; CJS require() will fail because the package is type: module. The default export is a preset object for Storybook's main.js.","wrong":"const storybookFrameworkRedwoodjsVite = require('storybook-framework-redwoodjs-vite')","symbol":"default","correct":"import storybookFrameworkRedwoodjsVite from 'storybook-framework-redwoodjs-vite'"},{"note":"Helper function to create a Vite config for Storybook in RedwoodJS projects.","wrong":"","symbol":"createViteConfig","correct":"import { createViteConfig } from 'storybook-framework-redwoodjs-vite'"},{"note":"Named export of the Storybook configuration object. Only available as ESM import.","wrong":"const { storybookConfig } = require('storybook-framework-redwoodjs-vite')","symbol":"storybookConfig","correct":"import { storybookConfig } from 'storybook-framework-redwoodjs-vite'"}],"quickstart":{"code":"// .storybook/main.js\nimport { mergeConfig } from 'vite';\nimport storybookFrameworkRedwoodjsVite from 'storybook-framework-redwoodjs-vite';\n\nexport default {\n  framework: {\n    name: storybookFrameworkRedwoodjsVite,\n    options: {},\n  },\n  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],\n  addons: [\n    '@storybook/addon-links',\n    '@storybook/addon-essentials',\n    '@storybook/addon-interactions',\n  ],\n  async viteFinal(config) {\n    // Customize Vite config here\n    return mergeConfig(config, {\n      // Add any Vite plugins or overrides\n    });\n  },\n};\n\n// Also ensure you have installed peer dependencies:\n// npm install --save-dev react react-dom storybook @redwoodjs/router @redwoodjs/project-config","lang":"javascript","description":"Configures Storybook main.js to use the RedwoodJS Vite framework preset and sets up stories and addons."},"warnings":[{"fix":"Migrate to CedarJS (cedarjs/cedar) for ongoing security updates and bug fixes.","message":"Upstream RedwoodJS is winding down development. An actively maintained fork exists at https://cedarjs.com.","severity":"deprecated","affected_versions":">=8.9.0"},{"fix":"Set Node.js version to 20.x via nvm or .nvmrc.","message":"Package requires Node.js version exactly 20.x (see engines field). Using a different Node.js version may cause runtime failures.","severity":"gotcha","affected_versions":">=8.0.0"},{"fix":"Use import syntax in your .storybook/main.js (ensure you have \"type\": \"module\" in package.json if outside of a project).","message":"ESM-only since v8.0.0; CommonJS require() will throw an error.","severity":"breaking","affected_versions":">=8.0.0"},{"fix":"Upgrade to >=8.6.3 or manually add vite-plugin-node-polyfills to viteFinal.","message":"Vite polyfills for Node.js built-in modules may be missing; the package added vite-plugin-node-polyfills in v8.6.3 to handle known issues, but users on older versions may encounter errors like 'module not found'.","severity":"gotcha","affected_versions":"<8.6.3"},{"fix":"Stay on React 18.x until official support for React 19 is announced.","message":"React 18.3.1 is a peer dependency; React 19 may not be fully supported yet.","severity":"deprecated","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run `npm install --save-dev storybook-framework-redwoodjs-vite`.","cause":"Package not installed or missing from node_modules.","error":"Error: Cannot find module 'storybook-framework-redwoodjs-vite'"},{"fix":"Install the missing peer dependency: `npm install @redwoodjs/router`.","cause":"Missing peer dependency @redwoodjs/router.","error":"[vite] Internal server error: Failed to resolve import \"@redwoodjs/router\""},{"fix":"Change require() to import statement or ensure your file is treated as ESM (e.g., rename to .mjs or set type: module in package.json).","cause":"Using CommonJS require() on an ESM-only package.","error":"TypeError: storybookFrameworkRedwoodjsVite is not a function or object"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}