Storybook: Storybook controls addon doesn't work

[altryne]

Version

@nuxtjs/storybook: v1.0.0
nuxt: v2.12.0

Steps to reproduce

• npm i -D @storybook/docs @storybook/controls
• add addons to storybook per docs

    addons: [
      '@storybook/addon-docs/register',
      '@storybook/addon-controls/register',
      '@storybook/addon-viewport/register'
    ],

• npx nuxt storybook

What is Expected?

All addons work

What is actually happening?

Clicking on controls shows an empty page with tons of JS erorrs
https://cln.sh/9gGUAR

vendors~main.921ddef01d0b8adf1714.bundle.js:132674 TypeError: (0 , _api.useArgs) is not a function
    at ControlsPanel (vendors~main.921ddef01d0b8adf1714.bundle.js:5285)
    at oh (vendors~main.921ddef01d0b8adf1714.bundle.js:132618)
    at Rj (vendors~main.921ddef01d0b8adf1714.bundle.js:132726)
    at Qj (vendors~main.921ddef01d0b8adf1714.bundle.js:132711)
    at Kj (vendors~main.921ddef01d0b8adf1714.bundle.js:132711)
    at yj (vendors~main.921ddef01d0b8adf1714.bundle.js:132704)
    at vendors~main.921ddef01d0b8adf1714.bundle.js:132588
    at push../node_modules/scheduler/cjs/scheduler.production.min.js.exports.unstable_runWithPriority (vendors~main.921ddef01d0b8adf1714.bundle.js:159049)
    at cg (vendors~main.921ddef01d0b8adf1714.bundle.js:132587)
    at fg (vendors~main.921ddef01d0b8adf1714.bundle.js:132588)
Ci @ vendors~main.921ddef01d0b8adf1714.bundle.js:132674
f.componentDidCatch.c.callback @ vendors~main.921ddef01d0b8adf1714.bundle.js:132692
Cg @ vendors~main.921ddef01d0b8adf1714.bundle.js:132596
Ji @ vendors~main.921ddef01d0b8adf1714.bundle.js:132677
Sj @ vendors~main.921ddef01d0b8adf1714.bundle.js:132720
push../node_modules/scheduler/cjs/scheduler.production.min.js.exports.unstable_runWithPriority @ vendors~main.921ddef01d0b8adf1714.bundle.js:159049
cg @ vendors~main.921ddef01d0b8adf1714.bundle.js:132587
Jj @ vendors~main.921ddef01d0b8adf1714.bundle.js:132713
yj @ vendors~main.921ddef01d0b8adf1714.bundle.js:132704
(anonymous) @ vendors~main.921ddef01d0b8adf1714.bundle.js:132588
push../node_modules/scheduler/cjs/scheduler.production.min.js.exports.unstable_runWithPriority @ vendors~main.921ddef01d0b8adf1714.bundle.js:159049
cg @ vendors~main.921ddef01d0b8adf1714.bundle.js:132587
fg @ vendors~main.921ddef01d0b8adf1714.bundle.js:132588
gg @ vendors~main.921ddef01d0b8adf1714.bundle.js:132587
Ga @ vendors~main.921ddef01d0b8adf1714.bundle.js:132752
gd @ vendors~main.921ddef01d0b8adf1714.bundle.js:132533
vendors~main.921ddef01d0b8adf1714.bundle.js:132674 TypeError: (0 , _api.useArgs) is not a function
    at ControlsPanel (vendors~main.921ddef01d0b8adf1714.bundle.js:5285)
    at oh (vendors~main.921ddef01d0b8adf1714.bundle.js:132618)
    at Rj (vendors~main.921ddef01d0b8adf1714.bundle.js:132726)
    at Qj (vendors~main.921ddef01d0b8adf1714.bundle.js:132711)
    at Kj (vendors~main.921ddef01d0b8adf1714.bundle.js:132711)
    at yj (vendors~main.921ddef01d0b8adf1714.bundle.js:132704)
    at vendors~main.921ddef01d0b8adf1714.bundle.js:132588
    at push../node_modules/scheduler/cjs/scheduler.production.min.js.exports.unstable_runWithPriority (vendors~main.921ddef01d0b8adf1714.bundle.js:159049)
    at cg (vendors~main.921ddef01d0b8adf1714.bundle.js:132587)
    at fg (vendors~main.921ddef01d0b8adf1714.bundle.js:132588)
Ci @ vendors~main.921ddef01d0b8adf1714.bundle.js:132674
Xi.c.callback @ vendors~main.921ddef01d0b8adf1714.bundle.js:132691
Cg @ vendors~main.921ddef01d0b8adf1714.bundle.js:132596
Ji @ vendors~main.921ddef01d0b8adf1714.bundle.js:132677
Sj @ vendors~main.921ddef01d0b8adf1714.bundle.js:132720
push../node_modules/scheduler/cjs/scheduler.production.min.js.exports.unstable_runWithPriority @ vendors~main.921ddef01d0b8adf1714.bundle.js:159049
cg @ vendors~main.921ddef01d0b8adf1714.bundle.js:132587
Jj @ vendors~main.921ddef01d0b8adf1714.bundle.js:132713
yj @ vendors~main.921ddef01d0b8adf1714.bundle.js:132704
(anonymous) @ vendors~main.921ddef01d0b8adf1714.bundle.js:132588
push../node_modules/scheduler/cjs/scheduler.production.min.js.exports.unstable_runWithPriority @ vendors~main.921ddef01d0b8adf1714.bundle.js:159049
cg @ vendors~main.921ddef01d0b8adf1714.bundle.js:132587
fg @ vendors~main.921ddef01d0b8adf1714.bundle.js:132588
gg @ vendors~main.921ddef01d0b8adf1714.bundle.js:132587
Ga @ vendors~main.921ddef01d0b8adf1714.bundle.js:132752
gd @ vendors~main.921ddef01d0b8adf1714.bundle.js:132533
vendors~main.921ddef01d0b8adf1714.bundle.js:5285 Uncaught TypeError: (0 , _api.useArgs) is not a function
    at ControlsPanel (vendors~main.921ddef01d0b8adf1714.bundle.js:5285)
    at oh (vendors~main.921ddef01d0b8adf1714.bundle.js:132618)
    at Rj (vendors~main.921ddef01d0b8adf1714.bundle.js:132726)
    at Qj (vendors~main.921ddef01d0b8adf1714.bundle.js:132711)
    at Kj (vendors~main.921ddef01d0b8adf1714.bundle.js:132711)
    at yj (vendors~main.921ddef01d0b8adf1714.bundle.js:132704)
    at vendors~main.921ddef01d0b8adf1714.bundle.js:132588
    at push../node_modules/scheduler/cjs/scheduler.production.min.js.exports.unstable_runWithPriority (vendors~main.921ddef01d0b8adf1714.bundle.js:159049)
    at cg (vendors~main.921ddef01d0b8adf1714.bundle.js:132587)
    at fg (vendors~main.921ddef01d0b8adf1714.bundle.js:132588)

[farnabaz]

This happens because @storybook/addon-controls is not compatible with @storybook/vue@5. Install @storybook/[email protected] in your project.

[altryne]

@farnabaz thank you, will this become the standard once storybook 6 releases ?

EDIT: did not work after installing
npm i -D @storybook/[email protected]

[farnabaz]

Some of Storybook's dependencies are not updated. Consider using npx sb@next upgrade --prerelease to update. or just remove your lock file and hit install

Also as Storybook@6 will release today, We will support v6 out of box, https://github.com/nuxt-community/storybook/pull/67