storybook-framework-redwoodjs-vite

8.9.0 verified Mon Apr 27 auth: no javascript maintenance

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.

Common errors

error Error: Cannot find module 'storybook-framework-redwoodjs-vite' ↓

cause Package not installed or missing from node_modules.

fix

Run npm install --save-dev storybook-framework-redwoodjs-vite.

error [vite] Internal server error: Failed to resolve import "@redwoodjs/router" ↓

cause Missing peer dependency @redwoodjs/router.

fix

Install the missing peer dependency: npm install @redwoodjs/router.

error TypeError: storybookFrameworkRedwoodjsVite is not a function or object ↓

cause Using CommonJS require() on an ESM-only package.

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).

Warnings

deprecated Upstream RedwoodJS is winding down development. An actively maintained fork exists at https://cedarjs.com. ↓

fix Migrate to CedarJS (cedarjs/cedar) for ongoing security updates and bug fixes.

gotcha Package requires Node.js version exactly 20.x (see engines field). Using a different Node.js version may cause runtime failures. ↓

fix Set Node.js version to 20.x via nvm or .nvmrc.

breaking ESM-only since v8.0.0; CommonJS require() will throw an error. ↓

fix Use import syntax in your .storybook/main.js (ensure you have "type": "module" in package.json if outside of a project).

gotcha 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'. ↓

fix Upgrade to >=8.6.3 or manually add vite-plugin-node-polyfills to viteFinal.

deprecated React 18.3.1 is a peer dependency; React 19 may not be fully supported yet. ↓

fix Stay on React 18.x until official support for React 19 is announced.

Install

npm install storybook-framework-redwoodjs-vite

yarn add storybook-framework-redwoodjs-vite

pnpm add storybook-framework-redwoodjs-vite

Imports

default

wrong

const storybookFrameworkRedwoodjsVite = require('storybook-framework-redwoodjs-vite')

correct

import storybookFrameworkRedwoodjsVite from 'storybook-framework-redwoodjs-vite'

ESM-only; CJS require() will fail because the package is type: module. The default export is a preset object for Storybook's main.js.

createViteConfig
```
import { createViteConfig } from 'storybook-framework-redwoodjs-vite'
```
Helper function to create a Vite config for Storybook in RedwoodJS projects.

storybookConfig

wrong

const { storybookConfig } = require('storybook-framework-redwoodjs-vite')

correct

import { storybookConfig } from 'storybook-framework-redwoodjs-vite'

Named export of the Storybook configuration object. Only available as ESM import.

Quickstart

Configures Storybook main.js to use the RedwoodJS Vite framework preset and sets up stories and addons.

// .storybook/main.js
import { mergeConfig } from 'vite';
import storybookFrameworkRedwoodjsVite from 'storybook-framework-redwoodjs-vite';

export default {
  framework: {
    name: storybookFrameworkRedwoodjsVite,
    options: {},
  },
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
  ],
  async viteFinal(config) {
    // Customize Vite config here
    return mergeConfig(config, {
      // Add any Vite plugins or overrides
    });
  },
};

// Also ensure you have installed peer dependencies:
// npm install --save-dev react react-dom storybook @redwoodjs/router @redwoodjs/project-config