{"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,"search_vec":"'8.9.0':22 'activ':63 'applic':11 'base':36 'build':16 'cadenc':70 'cedarj':68 'configur':38 'coupl':47 'current':18 'depend':53 'design':23 'differenti':45 'exist':66 'follow':71 'fork':65 'framework':3,7,43 'integr':25 'javascript':74 'key':44 'maintain':64 'note':55 'optim':39 'preset':8 'project':30,50 'provid':32 'react':77 'redwoodj':4,10,29,42,49,58,72,76 'releas':69,73 'seamless':27 'stabl':19 'storybook':2,6,26,37,75 'storybook-framework-redwoodjs-vit':1 'structur':51 'tight':46 'tool':17 'typescript':79 'upstream':57 'use':12 'version':20 'vite':5,13,35,78 'vite-bas':34 'wind':60","created_at":"2026-04-27T17:05:02.522940+00:00","updated_at":"2026-04-27T17:05:02.522940+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":"https://storybook.js.org","github":"https://github.com/redwoodjs/redwood","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/storybook-framework-redwoodjs-vite","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-18","next_check":"2026-07-26","install_tag":null}}