Storybook: [Question] When I toggle "show code" in preview, it show just 'Template.bind({})'

Created on 16 Aug 2020  Â·  7Comments  Â·  Source: storybookjs/storybook

Bug or support request summary

When I toggle "show code" in preview, it show just 'Template.bind({})'
But what I want is the actual component code to be printed.

I expected the following code snippet to print either

<default-button :type="type">This is a Button</default-button>

Or

{
  props: Object.keys(argTypes),
  components: {DefaultButton},
  template: `<default-button :type="type">This is a Button</default-button>`,
}

What am I missing? How do I get the output as expected?

Steps to reproduce

Here is my code

import { Meta, Story, Canvas, ArgsTable, Source } from '@storybook/addon-docs/blocks';
import DefaultButton from './index.vue';

<Meta
  title="Atoms/Buttons"
  component={DefaultButton}
  argTypes={{
    type: {
      description: `value of type attribute for button element`,
      control: {
        type: `select`,
        options: [`button`, `submit`, `reset`],
      },
    },
  }}
/>

export const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: {DefaultButton},
  template: `<default-button :type="type">This is a Button</default-button>`,
});

# Default Button

This is default button component

<Canvas>
  <Story
    name="DefaultButton"
    args = {{
      type: `button`
    }}
  >
    { Template.bind({}) }
  </Story>
</Canvas>

<ArgsTable story="DefaultButton" />

Before the toggle it looks like this,

Atoms-Buttons-DefaultButton-â‹…-Storybook

After the toggle it looks like this:

Atoms-Buttons-DefaultButton-â‹…-Storybook (1)

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

  • @storybook/vue 6.0.7
  • @storybook/addon-essentials 6.0.7
  • @storybook/source-loader 6.0.10
  • react-is 16.13.1

Affected platforms

  • Vue 2.6.11
  • Nuxt 2.14.1
source bug mdx tracked

All 7 comments

I'm also experiencing this issue. And I'm also using Vue (2.6.11). As this issue already has the bug and tracked labels I suppose it's a confirmed bug?

Yep fix is on the way today

ZOMG!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.13 containing PR #12107 that references this issue. Upgrade today to try it out!

Closing this issue. Please re-open if you think there's still more to do.

I still see this error on mine at 6.0.21 for @storybook/web-components! I am using mdx!

@kbhutiya Do you have a repro repo you can share?

@shilman Since its inside our company's repo i dont have a public repo to share ! But below are the screenshots of the config and how component looks! I am using @storybook/web-components at 6.0.21!

main.js

Screen Shot 2020-10-02 at 2 13 21 PM

component's mdx file

Screen Shot 2020-10-02 at 2 13 48 PM

component's template file
Screen Shot 2020-10-02 at 2 14 24 PM

storybook demo
Screen Shot 2020-10-02 at 2 15 07 PM

@shilman Is there anything wrong with what i am doing above? Looks like i followed the same pattern as storybook documentation!

Was this page helpful?
0 / 5 - 0 ratings