Vue props and data not working

[armadillo-dev]

Describe the bug

I wanna build storybook with nuxt + typescript. When I pass props or define data in component, I show below message.

[Vue warn]: Property or method "dataTest" is not defined on the instance but referenced during render. 
Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. 
See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

To Reproduce Steps to reproduce the behavior: 1. setting config .storybook/main.js

const path = require('path');

module.exports = {
    webpackFinal: (config) => {
        config.resolve = {
            extensions: ['.js', '.ts', '.vue', '.json'],
            alias: {
                vue$: path.resolve(__dirname, '../node_modules/vue/dist/vue.esm.js'),
                '@': path.resolve(__dirname, '../'),
            },
        };

        return config
    },
    stories: ['../stories/**/*.stories.[tj]s'],
    addons: [
        '@storybook/preset-scss',
        {
            name: '@storybook/preset-typescript',
            options: {
                tsLoaderOptions: {
                    configFile: path.resolve(__dirname, '../tsconfig.json'),
                },
                include: [path.resolve(__dirname, '../')],
            },
        }
    ]
};

2. define component. TestComponent.vue

<template>
  <div>
    <p>$attrs: {{ $attrs }}</p>
    <p>$props: {{ $props }}</p>
    <p>data: {{ dataTest }}</p>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component
export default class TestComponent extends Vue {
  @Prop({ type: String })
  propTest

  dataTest: string = 'test1234'
}
</script>

3. write stories TestComponent.stories.ts

import TestComponent from './TestComponent.vue'

export default {
  title: 'TestComponent',
}

export const Default = () => ({
  components: { TestComponent },
  template: `
    <test-component
      propTest="propTest" 
    />
  `,
})

4. run storybook with npm run storybook

Expected behavior render below

$attrs: 
$props: { "propTest": "propTest" }
$data: test1234

Actual behavior

$attrs: { "propTest": "propTest" }
$props: 
$data:

with warn

System:

Environment Info:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 10.15.3 - /usr/local/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: 6.13.7 - /usr/local/bin/npm
  Browsers:
    Chrome: 79.0.3945.130
    Firefox: 69.0.3
    Safari: 13.0.5
  npmPackages:
    @storybook/addon-actions: ^5.3.13 => 5.3.13 
    @storybook/addon-links: ^5.3.13 => 5.3.13 
    @storybook/addons: ^5.3.13 => 5.3.13 
    @storybook/preset-scss: ^1.0.2 => 1.0.2 
    @storybook/preset-typescript: ^1.2.0 => 1.2.0 
    @storybook/vue: ^5.3.13 => 5.3.13 

[Aaron-Pool]

@armadillo-dev I think you need to specify in your ts-loader options to use .vue files as well as .ts files.

[armadillo-dev]

@Aaron-Pool thank you for you comment. I removed @storybook/preset-typescript package. And then modified config in .storybook/main.js It working!

module.exports = {
  webpackFinal: (config) => {
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      use: [{
        loader: require.resolve('ts-loader'),
        options: { appendTsSuffixTo: [/\.vue$/] }
      }],
    });
    config.resolve.extensions.push('.ts', '.tsx');
    ...
    return config
  },
 ...
}

[graup]

@shilman Let's add this to the vue docs. Do you think adding a "Using with Typescript" section to the vue guide would suffice? Or should we make the preset more intelligent somehow so this extra step could be eliminated?

[shilman]

@graup Good question. I think the best thing would be to make the typescript preset smarter since Vue is one of the major frameworks (React, Vue, Angular) we want to support, and therefore I don't mind hard-coding it in the preset.

function webpack(webpackConfig = {}, options = {}) {
 ...
  if(options.framework === 'vue) {
    rules.push(...)
  }
}

That said, the preset needs some love and I haven't had the bandwidth go get to it for the past month... 😭

[graup]

Good, I'll make a PR for this as well then.

[shilman]

@graup 감사합니다!

[BennaceurHichem]

@graup @shilman I tried to add the config mentioned below to my main.ts, but in my case when I launch Storybook again it crashes, and the reason is probably that that I don't have ts-loader in my case, should I install it, and is there any changes that I should do after installation to make things working? I'm using @nuxt/storybook module, and @storybook/preset-typescript is not installed

[graup]

Hi @BennaceurHichem, you should not need any extra config anymore. Ts-loader is required but should be installed automatically as a dependency of storybook/vue. Could you open a new issue with the error you are encountering?

[BennaceurHichem]

@graup , I'm using nuxt-storybook module, I will open a new issue with more details

[LobergDesign]

@BennaceurHichem I´m having the same issue regarding nuxt-storybook. Can you send a link to the issue you have created? Thanks