Dropdown Bug!!! Clicking on the dropdown in a Nuxt Storybook integration throws an error in PrimeVue dropdown file

[edmondweiss]

Describe the bug

Clicking on the dropdown component in a Nuxt Storybook integration throws an error in a PrimeVue dropdown file. The error only occurs in Storybook.

TypeError: Cannot read properties of undefined (reading 'config') at panel (http://localhost:6006/node_modules/.cache/sb-vite/deps/primevue_dropdown.js?v=65a3f1b7:135:44) at Object.getItemValue (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-MSKQMIWH.js?v=65a3f1b7:1059:39) at Proxy._getOptionValue (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-ERJDEFQG.js?v=65a3f1b7:262:86) at Proxy.cx (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-ERJDEFQG.js?v=65a3f1b7:347:38) at http://localhost:6006/node_modules/.cache/sb-vite/deps/primevue_dropdown.js?v=65a3f1b7:1313:28 at Proxy.renderFnWithContext (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-R7BYHUHE.js?v=65a3f1b7:2397:13) at Proxy.<anonymous> (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-R7BYHUHE.js?v=65a3f1b7:3595:79) at renderComponentRoot (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-R7BYHUHE.js?v=65a3f1b7:2446:17) at ReactiveEffect.componentUpdateFn [as fn] (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-R7BYHUHE.js?v=65a3f1b7:7384:26) at ReactiveEffect.run (http://localhost:6006/node_modules/.cache/sb-vite/deps/chunk-R7BYHUHE.js?v=65a3f1b7:645:19)

The error in the PrimeVue dropdow file occurs in this code snippet. The config is undefined.

panel: function panel(_ref3) {
    var instance = _ref3.instance;
    return ['p-dropdown-panel p-component', {
      'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
      'p-ripple-disabled': instance.$primevue.config.ripple === false
    }];
  },

Reproducer

https://stackblitz.com/edit/nuxt-starter-uiuvwk?file=stories%2FBuggyDropdown.vue

PrimeVue version

3.35.0

Vue version

3.x

Language

TypeScript

Build / Runtime

Nuxt

Browser(s)

No response

Steps to reproduce the behavior

1. Go to stackblitz project I shared
2. On load in the terminal, npm install and npm run dev should run. Wait for them to finish.
3. Once finished, terminate the process in the terminal by pressing ctrl-c
4. Run npx storybook-nuxt init in the terminal
5. After finished, run npx run storybook in the terminal
6. Wait for storybook to load

Expected behavior

The dropdown items should show instead of an error.

[mertsincan]

Hi @edmondweiss, thanks a lot for your report! But, the stackblitz doesn't work for me and browser crashes constantly. Could you please update it?

[edmondweiss]

Hi @mertsincan , I updated the steps to reproduce. Let me know if those steps work for you. I tried and it worked for me.

[3h50]

I have this issue in one of my applications as well, anything I may provide?

[peteromano]

Just curious, how are you running the nuxt sb integration? Are you using the storybook-vue/nuxt sb framework and nuxt sb plugin?

I don't get styles and components with nuxt primevue tailwind working inside sb for some reason..