Storybook: ReferenceError: h is not defined

[yi-ge]

Bug or support request summary

I use @storybook/[email protected].

const styles = {
  textAlign: 'center',
};

let CenterDecorator = (storyFn) => (
  <div style={styles}>
    { storyFn() }
  </div>
)

storiesOf('Button', module)
  .addDecorator(CenterDecorator)
  .add('with text', () => ({
    components: { MyButton },
    template: '<my-button @click="action">Hello Button</my-button>',
    methods: { action: action('clicked') },
  }))
  .add('with JSX', () => ({
    components: { MyButton },
    render(h) {
      return <my-button onClick={this.action}>With JSX</my-button>;
    },
    methods: { action: linkTo('clicked') },
  }))

I get the error: ReferenceError: h is not defined.

If add h in render, it work. #3409

But on the addDecorator, I cant get the h.

Steps to reproduce

1、yarn global add @storybook/[email protected]
2、getstorybook

Please specify which version of Storybook and optionally any affected addons that you're running

• @storybook/cli 4.0.0-alpha.3
• @storybook/vue 4.0.0-alpha.3

Affected platforms

Mac Os

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[tunaranch]

Came across this error while trying to add a global decorator in my vue app.

Found something similar to this snippet after some digging, in case it helps someone else:

In my config.ts:

addDecorator(() => {
  return { template: '<div id="app"><story/></div>' }
})

[LazaroOnline]

True, that works, as @tunaranch said.
Also if you want to use JSX instead of Vue Template string you also can, like this:

addDecorator(() => 
  ({ render() { return <div id="app"><story/></div>} })
)

The issue is that in Storybook with Vue you have to use the special component <story/> instead of the function parameter storyFn that is used in React projects, even if you are using JSX.
It would be nice if the official documentation reflected this and not just limit to React users.