[Bug] not loading global directives

[shadowgate15]

Describe the bug

Adding a global directive to the 'preview.js' file is not available for the component when rendering.

Steps to reproduce the behavior

Add the following into preview.js and add to setup via setGlobalConfig.

import { app } from '@storybook/vue3';

app.directive('directive', directive);

Expected behavior

I would expect the directive to be available in the component for rendering.

Screenshots and/or logs

TypeError: Cannot read property 'deep' of undefined
 ❯ Module.withDirectives node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:2754:17
 ❯ Proxy.render src/components/jobs/job-list-item.vue?vue&type=template&lang.js:69:35
 ❯ renderComponentRoot node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:890:44
 ❯ ReactiveEffect.componentUpdateFn [as fn] node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5503:57
 ❯ ReactiveEffect.run node_modules/@vue/reactivity/dist/reactivity.cjs.js:189:25
 ❯ instance.update node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5617:56
 ❯ setupRenderEffect node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5631:9
 ❯ mountComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5413:9
 ❯ processComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5371:17
 ❯ patch node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4973:21

Environment

• OS: MacOS 12.3.1
• Node.js version: v14.19.1
• Yarn version: 1.22.10

[Didza]

I am also experiencing the same issue, trying to add a custom directive to storybook using Vue 3.

[shadowgate15]

I have found a workaround for this but I feel it should be handled from within the setGlobalConfig function call.

If you are using @testing-library/vue to render the component, you have to add the directive in the render function call.

import { render } from '@testing-library/vue';

render(story(), {
  global: {
    directives: { DIRECTIVE }
  }
});