Vue: After upgrading to V7 controls are not interactable

[gridmaniac]

Describe the bug

After migrated to Storybook V7, now Controls do not trigger Story re-render.
I have simple component

MyButton.vue

<script setup lang="ts">
defineProps<{
  counter: number;
}>();
</script>

<template>
  <button>
    {{ counter }}
  </button>
</template>

MyButton.stories.js

import MyButton from "./MyButton.vue";

export default {
  component: MyButton,
};

export const Primary = {
  render: (args) => ({
    components: { MyButton },
    template: '<my-button v-bind="args"/>',
    setup() {
      return {
        args,
      };
    },
  }),
  args: {
    counter: 51,
  },
};

Under individual stories Controls it doesn't re-render story after I changed arg value.

But if I switch to Docs, it is re-rendered with new args

And if I change value again, it doesn't get updated.
It was working with latest v6.

To Reproduce

1. Make vue script setup component with vue-demi + vue-vite
2. Cover with SFC story
3. Use Controls to play with component - it doesn't work

System

Environment Info:

  System:
    OS: macOS 12.4
    CPU: (8) arm64 Apple M2
  Binaries:
    Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.15.0 - ~/.nvm/versions/node/v16.17.0/bin/npm
  Browsers:
    Chrome: 112.0.5615.137
    Safari: 15.5
  npmPackages:
    @storybook/addon-actions: ^7.0.6 => 7.0.6 
    @storybook/addon-essentials: ^7.0.6 => 7.0.6 
    @storybook/addon-interactions: ^7.0.6 => 7.0.6 
    @storybook/addon-links: ^7.0.6 => 7.0.6 
    @storybook/addon-mdx-gfm: ^7.0.6 => 7.0.6 
    @storybook/testing-library: ^0.1.0 => 0.1.0 
    @storybook/vue: ^7.0.6 => 7.0.6 
    @storybook/vue-vite: ^7.0.6 => 7.0.6

Additional context

No response

[gridmaniac]

Related:
#17605
#16750

[shilman]

Can you please try upgrading to 7.1 alpha?

npx sb@next upgrade --tag future

See #21273 #21954

[gridmaniac]

@shilman thank you for giving more context, I upgraded to latest 7.1.0-alpha.8 and I think the issue only exists in vue-vite not vue3-vite as I tested it with clean bran-new vue 3 project with vite and it is working as expected.

As I mentioned I am using vue-demi and I am still on Vue 2.7 Naruto so I guess for @storybook/vue-vite there is still some incompatibility and for now I am downgrading to 6 and either consider migrating to Vue 3 or maybe vue-vite framework will be updated in future

[shilman]

Thanks for testing this out. I know there is work going on in both vue/vue3 reactivity, so I'm sorry things are in a state of flux right now. Hopefully @kasperpeulen can respond here when things are sorted out.

[kasperpeulen]

I think we put all our effort on making Vue3 more reactive, but we haven't done really anything on Vue2.
@shilman @vanessayuenn Shall we prio that for 7.1?

[GrtDev]

We have had this issue as well in both V6 and V7. Currently we are using the vue-vite configuration with vue 2.7 and typescript.

I do seem to have found a workaround for the issue though. For creating stories I have a helper function that among other things registers a reference to the currentInstance. Next time the story function is triggered it will use the instance to update the args and force an update.

Something along the lines of this:

let component: ComponentOptions<Vue> | null = null;
let currentInstance: ReturnType<typeof getCurrentInstance> = null;

export const Story: StoryFn = ({ ...args }) => {
    if (component && currentInstance?.proxy) {
        (currentInstance.proxy as any).args = args;
        currentInstance.proxy.$forceUpdate();
        return component;
    }

    component = {
        components: { ... },
        setup(props) {
            currentInstance = getCurrentInstance();

            return { args, props };
        },
        template: '...',
    };

    return component;
};

Hope this helps someone dealing with the same issue (:

[mokone91]

Hi! is its possible to make same using decorator? it will allow to apply this globally

[PenguinQ]

This also happened to any reactive object used in component in 7.1.0-alpha.29.

Not Working

const styleObj = reactive({
  color: props.color,
  backgroundColor: props.backgroundColor,
});

<template>
  <div :style="styleObj" />
</template>

Working

<template>
  <div :style="`color: ${color}; background-color: ${backgroundColor}`" />
</template>

[kasperpeulen]

@chakAs3 Do you think this would be easy to fix for vue2?

[chakAs3]

@chakAs3 Do you think this would be easy to fix for vue2?

yes I'm thinking of doing a merge. and have only @storybook/vue , so any version >= 2.7 will work.
what do you think @shilman ?

[kasperpeulen]

@chakAs3 Do you think this would be easy to fix for vue2?

yes I'm thinking of doing a merge. and have only @storybook/vue , so any version >= 2.7 will work. what do you think @shilman ?

So then we would drop support for Vue <2.7.
Do you know how many people still use storybook for that version @shilman ?

[shaniqwa-drm]

I experience the same issue, using vue3 & @storybook/vue3

  System:
    OS: macOS 13.5.1
    CPU: (8) arm64 Apple M2
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.2.0 - /opt/homebrew/bin/node
    Yarn: 4.0.2 - /opt/homebrew/bin/yarn <----- active
    npm: 10.2.3 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 120.0.6099.109
    Safari: 16.6
  npmPackages:
    @storybook/addon-actions: ^7.6.6 => 7.6.6 
    @storybook/addon-docs: ^7.6.6 => 7.6.6 
    @storybook/addon-essentials: ^7.6.6 => 7.6.6 
    @storybook/addon-interactions: ^7.6.6 => 7.6.6 
    @storybook/addon-links: ^7.6.6 => 7.6.6 
    @storybook/addon-mdx-gfm: ^7.6.6 => 7.6.6 
    @storybook/cli: ^7.6.6 => 7.6.6 
    @storybook/jest: ^0.2.3 => 0.2.3 
    @storybook/testing-library: ^0.2.2 => 0.2.2 
    @storybook/vue3: ^7.6.6 => 7.6.6 
    @storybook/vue3-vite: ^7.6.6 => 7.6.6 
    eslint-plugin-storybook: ^0.6.15 => 0.6.15 
    storybook: ^7.6.6 => 7.6.6 
    storybook-addon-jsx: ^7.3.14 => 7.3.14 
    storybook-dark-mode: ^3.0.3 => 3.0.3 
    storybook-tailwind-foundations: ^1.1.2 => 1.1.2 
    storybook-vue3-router: ^5.0.0 => 5.0.0 

I see these errors sometimes when I change controls:

chunk-INSKDKQB.js:16 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    in Unknown (created by ManagerConsumer)
    in ManagerConsumer (created by render)
    in render

manager  received updateStoryArgs but was unable to determine the source of the event

or this warning:

chunk-INSKDKQB.js:142 Omitted potentially unsafe URL args.

More info: https://storybook.js.org/docs/react/writing-stories/args#setting-args-through-the-url

I have to manually click 'Remount component' on every change in the controls.

[qnp]

@mokone91, facing this issue, given the @GrtDev solution, I did not manage to make it a decorator unfortunately because I did not manage to hook in the decorator’s storyFn returned object.

Yet, based on that idea, I use a wrapper to author stories:

import { getCurrentInstance } from 'vue';

import type { StoryFn } from '@storybook/vue';
import type { ComponentOptions } from 'vue';

export function defineStory<ArgsT>(storyFn: StoryFn<ArgsT>): StoryFn<ArgsT> {
  type ComponentInstance = Vue & { args: ArgsT };
  let storyComponent: ComponentOptions<Vue> | null = null;
  let currentInstance: ComponentInstance | null = null;

  const wrappedStory: StoryFn<ArgsT> = (storyArgs, storyContext) => {
    if (storyComponent && currentInstance) {
      currentInstance.args = storyArgs;
      currentInstance.$forceUpdate();
    }
    storyComponent = (storyFn(storyArgs, storyContext) ??
      {}) as ComponentOptions<Vue>;

    const originalSetup = storyComponent.setup;
    storyComponent.setup = function(setupProps, setupContext) {
      currentInstance = getCurrentInstance()?.proxy as ComponentInstance;
      return originalSetup?.(setupProps, setupContext);
    };

    return storyComponent;
  };

  return wrappedStory;
}

which is used very nicely like this:

const Template = defineStory<LogoProps>(args => ({
  components: { Logo },
  setup: () => ({ args }),
  template: '<Logo v-bind="args" />',
}));

export const Light = Template.bind({});
Light.args = {
  variant: 'light'
};

export const Dark = Template.bind({});
Dark.args = {
  variant: 'dark'
};

I have to mention @GrtDev, using this wrapper solution was breaking the reactivity in stories themselves (here in the example when switching between "Light" and "Dark" story nothing happened) because the early return

    if (component && currentInstance?.proxy) {
        ...
        return component;
    }

was preventing to use properly any newly created instances. So in my implementation I don't have this early return.

[shaniqwa-drm]

is there anything new with this issue ? am I suppose to refactor all my stories to use the suggested workarounds?

[kasperpeulen]

is there anything new with this issue ? am I suppose to refactor all my stories to use the suggested workarounds?

I don't think it is likely that we will fix this as we have deprecated support for Vue2 in storybook and the vue2 renderer package won't be part of v8.

[valentinpalkovic]

As already mentioned, Vue 2 support will be discontinued in Storybook 8, which is scheduled for release in the coming weeks. This decision was made to streamline our development process and focus on supporting the latest technologies.

Support for Vue 2 in Storybook 7

To ensure a smooth transition, we will continue to provide security patches and highly upvoted bug fixes for Storybook 7. However, we strongly recommend migrating to Vue 3 or a later version as soon as possible to take advantage of the latest features and improvements.

I am closing this ticket as not planned.

[shaniqwa-drm]

@valentinpalkovic this issue happens to me using the latest vue3 & storybook versions. it started after I migrated from storybook 6 to 7, and now in 8, it's sill like this... I have tried double-checking every configuration. should I open a new bug ?

[valentinpalkovic]

Hi @shaniqwa-drm

Yes! Please create a new bug report.

[shaniqwa-drm]

opened #26876