Storybook: vue-class-component didnt worked

[KoreSamuel]

Here is my vue component,

// src/components/Tabs.vue
<template>
  <nav class="tab-wrapper">
    <span
      v-for="(item, index) in options"
      :class="['tab-item', {'active' : active === index}]"
      :key="index"
      @click="changeIndex(index)"
    >{{item.title}}</span>
  </nav>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';

@Component({
  props: {
    options: Array,
    active: Number
  }
})
export default class Tabs extends Vue {
  options!: Array<{ title: string }>;
  active!: number;
  changeIndex(index: number) {
    this.$emit('onChangeIndex', index);
  }
}
</script>
<style lang="scss" scoped>
.tab-wrapper {
  font-size: 28px;
  display: flex;
  height: 99px;
  color: #aaaaaa;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: #ffffff;
  align-items: center;
  .tab-item {
    margin-right: 40px;
    &.active {
      position: relative;
      color: #323333;
    }
  }
}
</style>

I have installed 'storybook', and followed the guide
while I execute npm run storybook, terminal reported below text

ERROR in ./src/components/Tabs.vue?vue&type=script&lang=ts& (./node_modules/vue-loader/lib??vue-loader-options!./src/components/Tabs.vue?vue&type=script&lang=ts&) 15:0
Module parse failed: Unexpected character '@' (15:0)
You may need an appropriate loader to handle this file type.
| import Component from 'vue-class-component';
| 
> @Component({
|   props: {
|     options: Array,
 @ ./src/components/Tabs.vue?vue&type=script&lang=ts& 1:0-119 1:135-138 1:140-256 1:140-256
 @ ./src/components/Tabs.vue
 @ ./stories/tabs.stories.js
 @ ./stories sync .stories.js$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true

ERROR in ./src/components/Tabs.vue?vue&type=style&index=0&id=bdda1ea4&lang=scss&scoped=true& (./node_modules/vue-loader/lib??vue-loader-options!./src/components/Tabs.vue?vue&type=style&index=0&id=bdda1ea4&lang=scss&scoped=true&) 32:0
Module parse failed: Unexpected token (32:0)
You may need an appropriate loader to handle this file type.
| 
| 
> .tab-wrapper {
|   font-size: 28px;
| 
 @ ./src/components/Tabs.vue?vue&type=style&index=0&id=bdda1ea4&lang=scss&scoped=true& 1:0-152 1:168-171 1:173-322 1:173-322
 @ ./src/components/Tabs.vue
 @ ./stories/tabs.stories.js
 @ ./stories sync .stories.js$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true

My project use these dependencied

"vue": "^2.6.6",
 "vue-class-component": "^7.0.1",
 "vue-property-decorator": "^8.0.0",

I want to learn how to config to success,tks

[metasean]

@swust-xiaoj Did you figure out what's going on?

I'm running into the same problem after an upgrade, and it looks like it's specifically the Vue SFC <styles> section that is build system is getting hung up on.

Upgrade details

 @storybook/addon-a11y         ^5.0.0  →  ^5.0.5 
 @storybook/addon-actions      ^5.0.0  →  ^5.0.5 
 @storybook/addon-knobs        ^5.0.0  →  ^5.0.5 
 @storybook/addon-links        ^5.0.0  →  ^5.0.5 
 @storybook/addon-storysource  ^5.0.0  →  ^5.0.5 
 @storybook/addons             ^5.0.0  →  ^5.0.5 
 @storybook/vue                ^5.0.0  →  ^5.0.5 
 storybook-readme              ^4.0.5  →  ^5.0.1 
````

### Error

ERROR in ./src/components/SbButton.vue?vue&type=style&index=0&lang=css& (./node_modules/vue-loader/lib??vue-loader-options!./src/components/SbButton.vue?vue&type=style&index=0&lang=css&) 52:0
Module parse failed: Unexpected token (52:0)
You may need an appropriate loader to handle this file type.
|
|

.sb_button {
| padding: 5px;
| cursor: pointer;
@ ./src/components/SbButton.vue?vue&type=style&index=0&lang=css& 1:0-131 1:147-150 1:152-280 1:152-280
@ ./src/components/SbButton.vue
@ ./stories/03_Components/SbButton.stories.js
@ ./stories sync .stories.js$
@ ./.storybook/config.js
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true
```

I'm going to start working through individual updates to see if I can find change that caused this problem. Unfortunately, I don't have a lot of time to dig into it, so if push comes to shove, I'll just have to downgrade us. 🙁 Hopefully I can at least narrow down the root problem. 🤞

[backbone87]

seems like your webpack setup isnt quite right, i recommend using vue cli and vue-cli-plugin-storybook

[metasean]

@backbone87 - I won't garuntee that my webpack setup is correct (configs in general, and webpack in particular, are my achille's heal) _however_ mine _was working_; it was a change during the upgrade process that broke it.

At this point, if i revert to my previous working version, then run the following upgrades:

yarn upgrade-interactive v1.13.0
info Color legend : 
 "<red>"    : Major Update backward-incompatible updates 
 "<yellow>" : Minor Update backward-compatible features 
 "<green>"  : Patch Update backward-compatible bug fixes
? Choose which packages to update. 
 devDependencies
   name                          range    from       to      url
 ◉ @babel/core                   ^7.3.4   7.3.4   ❯  7.4.0   https://babeljs.io/
 ◯ @storybook/addon-a11y         ^5.0.0   5.0.1   ❯  5.0.5   https://github.com/storybooks/storybook#readme
 ◯ @storybook/addon-actions      ^5.0.0   5.0.1   ❯  5.0.5   https://github.com/storybooks/storybook/tree/master/addons/actio
ns
 ◯ @storybook/addon-knobs        ^5.0.0   5.0.1   ❯  5.0.5   https://github.com/storybooks/storybook/tree/master/addons/knobs

 ◯ @storybook/addon-links        ^5.0.0   5.0.1   ❯  5.0.5   https://github.com/storybooks/storybook/tree/master/addons/links

 ◯ @storybook/addon-storysource  ^5.0.0   5.0.1   ❯  5.0.5   https://github.com/storybooks/storybook/tree/master/addons/story
source
 ◯ @storybook/addons             ^5.0.0   5.0.1   ❯  5.0.5   https://github.com/storybooks/storybook/tree/master/lib/addons
 ◯ @storybook/vue                ^5.0.0   5.0.1   ❯  5.0.5   https://github.com/storybooks/storybook/tree/master/app/vue
 ◉ @vue/cli-plugin-babel         ^3.4.0   3.5.0   ❯  3.5.1   https://github.com/vuejs/vue-cli/tree/dev/packages/@vue/cli-plug
in-babel#readme
 ◉ @vue/cli-plugin-e2e-cypress   ^3.4.0   3.5.0   ❯  3.5.1   https://github.com/vuejs/vue-cli/tree/dev/packages/@vue/cli-plug
in-e2e-cypress#readme
 ◉ @vue/cli-plugin-eslint        ^3.4.0   3.5.0   ❯  3.5.1   https://github.com/vuejs/vue-cli/tree/dev/packages/@vue/cli-plug
in-eslint#readme
 ◉ @vue/cli-plugin-unit-jest     ^3.4.0   3.5.0   ❯  3.5.1   https://github.com/vuejs/vue-cli/tree/dev/packages/@vue/cli-plug
in-unit-jest#readme
 ◉ @vue/cli-service              ^3.4.0   3.5.0   ❯  3.5.1   https://cli.vuejs.org/
 ◉ eslint                        ^5.8.0   5.15.1  ❯  5.15.3  https://eslint.org
 ◉ vue-template-compiler         ^2.5.21  2.6.8   ❯  2.6.10  https://github.com/vuejs/vue/tree/dev/packages/vue-template-comp
iler#readme

 dependencies
   name                          range    from       to      url
 ◉ @vue/cli                      ^3.4.1   3.5.0   ❯  3.5.1   https://cli.vuejs.org/
❯◉ vue                           ^2.6.6   2.6.8   ❯  2.6.10  https://github.com/vuejs/vue#readme

Everything continues to work just fine.

However, _when I run the @storybook/vue upgrade_:

@storybook/vue                ^5.0.0   5.0.1   ❯  5.0.5   https://github.com/storybooks/storybook/tree/master/app/vue

I get the error.

So, now I'm starting to dig into that ...

[metasean]

_BREAKING_ changes were committed with "@storybook/vue": "5.0.2"

Apparently Storybook's own kitchen sink webpack examples for v5.0.0 & v5.0.1 were marked as deprecated but were still very much working and the demonstrated approach is still listed as an option in the custom-webpack-config Extend Mode documentation.

However, as of v5.0.2 the extend-mode/object syntax listed in https://storybook.js.org/docs/configurations/custom-webpack-config no longer works _for at least some Vue configurations_ and the kitchen sink examples have been updated to the new function approach.

It _appears_ that they _should_ still be working and there is actually a console message notifying us of the deprecation. However, the build broke for me and the console message was thoroughly buried under successful building step messages and then by the broken build messages, that I totally missed it.

FWIW: I based my own webpack.config.js off of that working vue-kitchen-sink example when I started my _brand new project with v5.0.0!_

[backbone87]

that is really annoying, i recommend using full control mode only (since this is what will be the only option in the future, if i understood that correctly) or use the vue-cli-plugin-storybook

[shilman]

Yes, there was a bug in 5.0.0 which caused many peoples' webpack config to break migrating from 4.x. I fixed the bug in 5.0.2 and it caused some problems for anybody who used "extend mode" configuration in the 12 days between the 5.0.0 release and the 5.0.2 bugfix. To keep this from happening I deprecated extend-mode and will be removing it in a future version of Storybook. I also added a --debug-webpack flag so you can debug your custom configuration more easily.

[backbone87]

is this actionable?

[metasean]

is this actionable?

I tried to update documentation to decrease the probability that someone else could run into this - https://github.com/storybooks/storybook/pull/6318

Based on @shilman's last comment, I'm not sure that there's much else that is actionable. 🤷‍♂️

[backbone87]

ok, so i gonna close it