Storybook works only without props

I’m very exited to see here that RedwoodJs supports Storybook.

I’ve never used Storybook before but am excited to start using that instead of my home-grown alternative to it.

I’m trying to follow guides at

I can’t seem to get it to work, though.

With a fresh new RedwoodJs project, I run:

yarn rw generate component Demo

And it works:

But then if I change the component and its story to:

/* eslint-disable react/react-in-jsx-scope */
const Demo = ({ middle }) => (
  <div className="demo">

export default Demo;


/* eslint-disable react/jsx-props-no-spreading */
/* eslint-disable react/react-in-jsx-scope */
import Demo from './Demo';

const Template = (args) => <Demo {...args} />;

export const Main = Template.bind({});
Main.args = {
  middle: 'def',
console.log('Main.args', Main.args);

export default { title: 'Components/Demo' };

then I see:

Notice “def” missing at the blue arrow.

I’ve tried stopping and rerunning yarn rw storybook. I’ve also tried running yarn rw dev simultaneously.

What am I doing wrong? Thanks, and Happy Holidays :smiley:

Actually, this works:

/* eslint-disable react/react-in-jsx-scope */
import Demo from './Demo';

export const Main = () => <Demo middle="def" />;

export default { title: 'Components/Demo' };

So really my only question is about why the args destructuring pattern below from the Storybook tutorial doesn’t seem to work, but that’s a question for a Storybook forum rather than here.

const Template = (args) => <Button {...args} />;

// Each story then reuses that template
export const Primary = Template.bind({});

Primary.args = {
  primary: true,
  label: 'Primary',