Field Type Plugin using SbAccordion

[caseywittner]

Hi there! I'm trying to use the Storyblok Design System while creating a new plugin, and I'm running into a few issues regarding the Accordion component.

When I import the SbAccordion the same way I do the (working) SbTabs components as such: import { SbTabs, SbTab, SbTabPanels, SbTabPanel, SbAccordion } from 'storyblok-design-system'

It builds fine via webpack, but I get these errors when I add it to the plugin editor in StoryBlok:

VM2958 fieldtype-wrapper.js:7 [Vue warn]: Invalid handler for event "click": got undefined

found in

---> <SbAccordion>
       <CustomPlugin>
         <Root>

VM2958 fieldtype-wrapper.js:7 [Vue warn]: Invalid handler for event "before-enter": got undefined

found in

---> <Transition>
       <AccordionTransition>
         <SbAccordion>
           <CustomPlugin>
             <Root>

VM2958 fieldtype-wrapper.js:7 [Vue warn]: Invalid handler for event "enter": got undefined

found in

---> <Transition>
       <AccordionTransition>
         <SbAccordion>
           <CustomPlugin>
             <Root>

VM2958 fieldtype-wrapper.js:7 [Vue warn]: Invalid handler for event "after-enter": got undefined

found in

---> <Transition>
       <AccordionTransition>
         <SbAccordion>
           <CustomPlugin>
             <Root>

VM2958 fieldtype-wrapper.js:7 [Vue warn]: Invalid handler for event "before-leave": got undefined

found in

---> <Transition>
       <AccordionTransition>
         <SbAccordion>
           <CustomPlugin>
             <Root>

VM2958 fieldtype-wrapper.js:7 [Vue warn]: Invalid handler for event "leave": got undefined

found in

---> <Transition>
       <AccordionTransition>
         <SbAccordion>
           <CustomPlugin>
             <Root>

VM2958 fieldtype-wrapper.js:7 [Vue warn]: Invalid handler for event "after-leave": got undefined

found in

---> <Transition>
       <AccordionTransition>
         <SbAccordion>
           <CustomPlugin>
             <Root>

Conversely, when I try to directly import the component like so: import SbAccordion from 'storyblok-design-system/src/components/Accordion'

I get the following errors and build fails:

 error  in ./node_modules/storyblok-design-system/src/components/Icon/icon.scss

Syntax Error: SassError: Undefined variable: "$color-primary".
        on line 12 of node_modules/storyblok-design-system/src/components/Icon/icon.scss
>>   'primary': $color-primary,

   -------------^

 @ ./node_modules/storyblok-design-system/src/components/Icon/icon.scss 4:14-258
 @ ./node_modules/storyblok-design-system/src/components/Icon/index.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/storyblok-design-system/src/components/Accordion/SbAccordion.vue?vue&type=script&lang=js&
 @ ./node_modules/storyblok-design-system/src/components/Accordion/SbAccordion.vue?vue&type=script&lang=js&
 @ ./node_modules/storyblok-design-system/src/components/Accordion/SbAccordion.vue
 @ ./node_modules/storyblok-design-system/src/components/Accordion/index.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/Plugin.vue?vue&type=script&lang=js&
 @ ./src/Plugin.vue?vue&type=script&lang=js&
 @ ./src/Plugin.vue
 @ ./src/main.js
 @ multi ./src/main.js

 error  in ./node_modules/storyblok-design-system/src/components/Accordion/accordion.scss

Syntax Error: SassError: Undefined variable: "$sb-dark-blue".
        on line 4 of node_modules/storyblok-design-system/src/components/Accordion/accordion.scss
>>   color: $sb-dark-blue;

   ---------^

 @ ./node_modules/storyblok-design-system/src/components/Accordion/accordion.scss 4:14-263
 @ ./node_modules/storyblok-design-system/src/components/Accordion/index.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/Plugin.vue?vue&type=script&lang=js&
 @ ./src/Plugin.vue?vue&type=script&lang=js&
 @ ./src/Plugin.vue
 @ ./src/main.js
 @ multi ./src/main.js

As I mentioned, the tabs components were working fine, it was just the accordion that was giving me problems. Happy to share more snippets of my files as needed! Thanks in advance for any help.

[lisilinhart]

Thanks @caseywittner, we'll try to look into this soon. It might be because of the update to Vue 2.7 and the way the fieldtype wrapper works.

[lisilinhart]

At the moment we don't support a lot of individual exports, it's better to use the global plugin installation. I'll close this for now