Storybook: [vue] ReferenceError: h is not defined

[tsteenkamp]

Describe the bug
After following the Writing Addons example of the documentation in a vue application storybook is build successfully but renders only a blank page and console produces the following error:

Uncaught ReferenceError: h is not defined
    at render (main.b931f638435a8f5c54ff.bundle.js:130)
    at vendors~main.342d75f7e9558c51ff87.bundle.js:8088
    at Array.map (<anonymous>)
    at vendors~main.342d75f7e9558c51ff87.bundle.js:8084
    at renderWithHooks (vendors~main.342d75f7e9558c51ff87.bundle.js:83336)
    at mountIndeterminateComponent (vendors~main.342d75f7e9558c51ff87.bundle.js:85418)
    at beginWork (vendors~main.342d75f7e9558c51ff87.bundle.js:86023)
    at performUnitOfWork (vendors~main.342d75f7e9558c51ff87.bundle.js:89710)
    at workLoop (vendors~main.342d75f7e9558c51ff87.bundle.js:89750)
    at HTMLUnknownElement.callCallback (vendors~main.342d75f7e9558c51ff87.bundle.js:70547)

To Reproduce
Steps to reproduce the behavior:

1. vue create storybook-vue-test
2. Manually select preset preferences.
   2.1. Select Babel and Linter / Formatter
   2.2 Linter config basic
   2.3 Select dedicated config files
3. cd storybook-vue-test
4. npx -p @storybook/cli sb init
5. yarn storybook works as expected
6. add file storybook-vue-test/.storybook/register.js and copy content from documentation Writing Addons
7. import file in storybook-vue-test/.storybook/addons.js -> import './register';

Expected behavior
Expected storybook to successfully start and render with the additional panel.

System:

• OS: arch-linux
• Browser: chrome / firefox
• Framework: vue (cli v3.7.0)
• Addons: ~
• Version: 5.0.11 (seen also on 5.1.0-alpa.39)

Additional context
The bug seems to be specific to vue / storybooks build process combined with vue as I was not able to reproduce it with a quick react app test setup using the same steps as above.

[elevatebart]

Hello @tsteenkamp ,

Say you are using JSX written stories,

storiesOf('MyComponent', module)
  .add('with text', () => ({
     render: h => <MyComponent>with text</MyComponent>
  }))

will be translated to

storiesOf('MyComponent', module)
  .add('with text', () => ({
     render: h => h(MyComponent, {test:'with text'})
  }))

As you can see, vue JSX assumes that you pass h as the first parameter of your render function.
It will use h to dynamically create all your components.

Can you check that your stories respect this convention?

the docs

[tsteenkamp]

Hi @elevatebart ,

sadly this does not solve the issue, the error appears even if there are no stories present. You can reproduce it by following the steps I described above and comment out everything in the autogenerated storybook-vue-test/stories/index.stories.js.

[tsteenkamp]

Nevermind, I just saw that the example also has a render function and declaring it like

const render = h => ({ active }) => <MyPanel api={api} active={active} />;

solves the issue.

Maybe the docs should have a hint for vue users that this is required.