VueJS TypeScript Property Decorators Error

[slavarazum]

Describe the bug
Looks like @storybook/preset-typescript can't interpret decorators from vue-property-decorators, like: @Component

Error screenshot:

Error text:

Support for the experimental syntax 'decorators-legacy' isn't currently enabled

Code snippets

main.js

const path = require('path');

// your app's webpack.config.js
const custom = require('../webpack.config.js');

module.exports = {
  stories: ['../stories/**/*.stories.[tj]s'],
  addons: [
    '@storybook/preset-typescript',
    '@storybook/addon-actions',
    '@storybook/addon-links',
  ],

  webpackFinal: (config) => {
    return {
      ...config,
      resolve: {
        ...config.resolve,
        alias: custom.resolve.alias,
      }
    };
  }
};

1-TestComponent.stories.ts

import { action } from '@storybook/addon-actions';

import TestComponent from './TestComponent';

export default {
  title: 'TestComponent',
  component: TestComponent,
};

export const Simple = () => ({
  components: { TestComponent },
  template: '<TestComponent>Some text</TestComponent>',
  methods: { action: action('clicked') },
});

TestComponent.vue

<template>
  <div>
    <slot />
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component({ name: 'TestComponent' })
export default class TestComponent extends Vue {}
</script>

System:

Environment Info:

  System:
    OS: macOS 10.15.4
    CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
  Binaries:
    Node: 13.10.1 - /usr/local/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.13.7 - /usr/local/bin/npm
  Browsers:
    Chrome: 80.0.3987.149
    Firefox: 74.0.1
    Safari: 13.1
  npmPackages:
    @storybook/addon-actions: ^5.3.18 => 5.3.18 
    @storybook/addon-links: ^5.3.18 => 5.3.18 
    @storybook/addons: ^5.3.18 => 5.3.18 
    @storybook/preset-typescript: ^3.0.0 => 3.0.0 
    @storybook/vue: ^5.3.18 => 5.3.18 

Additional context
Also have tried to pass tsconfig.json path:

main.js

addons: [
    {
      name: '@storybook/preset-typescript',
      options: {
        tsLoaderOptions: {
          configFile: path.resolve(__dirname, '../tsconfig.json'),
        },
      },
    },
  ],

[metanas]

You should add ts-loader to your webpack configuration in main.js of your storybook

module.exports = {
  stories: ['../stories/**/*.stories.[tj]s'],
  addons: [
    '@storybook/preset-typescript',
    '@storybook/addon-actions',
    '@storybook/addon-links',
  ],

  webpackFinal: (config) => {
    config.module.rules.push({
      test: /\.ts$/,
      exclude: /node_modules/,
      use: [{
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/],
          transpileOnly: true
        },
      }],
    });
    return {
      ...config,
      resolve: {
        ...config.resolve,
        alias: custom.resolve.alias,
      }
    };
  }
};

[shilman]

Thanks for reporting @slavarazum and for the workaround @metanas. We have an open PR for that here, but are still figuring out the best path forward: storybookjs/presets#122

[slavarazum]

@metanas Thanks for help! I thought ts-loader included under the hood.

Also, for non vue-clie presets we should add runtime compiler:

config.resolve.alias['vue$'] = 'vue/dist/vue.esm.js';

@shilman Thanks for the link, just have subscribed.

[stale]

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!

[shilman]

We've just released zero-config typescript support in 6.0-beta. Please upgrade and test it!

• Release 6.0.0-beta.12+
• Migration instructions
• Updated docs

Thanks for your help and support getting this stable for release!

[stale]

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]

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!

[caryuval]

Before messing with the TS configs or upgrading Storybook, I suggest making sure that you didn't forget to add
lang="ts" in your script tag, like so: <script lang="ts">