hirotaka / storybook-addon-nuxt

This add-on makes it easier to set up Storybook in your Nuxt3 project.
78 stars 16 forks source link

"_a.decline is not a function" when calling setup() inside preview.ts #18

Open datsenkoboos opened 1 year ago

datsenkoboos commented 1 year ago

Error:

изображение

Description:

Error appears only when using storybook-addon-nuxt with setup from '@storybook/vue3' inside preview.ts. Error doesn't appear, when using storybook-addon-nuxt and setup separately.

preview.ts:

изображение

main.ts:

изображение

[Temporary solution](https://github.com/hirotaka/storybook-addon-nuxt/issues/18#issuecomment-1663173967) (for pnpm users: do not install `patch-package`, just use `pnpm patch`)

jaywilburn commented 12 months ago

@hirotaka - we don't seem to have access to setup in this addon. We can't get our modules (Pinia, FormKit) to work because of this. Is there any way to get this to work?

Slimpak commented 12 months ago

Any solutions how to remove this error?

CernyMatej commented 11 months ago

+1 would like to know a solution to this issue... It isn't specifically tied to Pinia. The error shows up with an empty setup function as well:

setup((app: App) => {

})
ploca14 commented 11 months ago

Same for me, does anyone have any idea how to fix it? @hirotaka

manakuro commented 11 months ago

As a temporary workaround, the error can be avoided by adding an optional chain like so:

node_modules/@storybook/vue3/dist/index.mjs

import { renderToCanvas, decorateStory, render } from './chunk-SRVBJOBI.mjs';
export { setup } from './chunk-SRVBJOBI.mjs';
import { global } from '@storybook/global';
import { start } from '@storybook/preview-api';

var { window: globalWindow } = global;
globalWindow.STORYBOOK_ENV = "vue3";
var RENDERER = "vue3",
  api = start(renderToCanvas, { decorateStory, render }),
  storiesOf = (kind, m) =>
    api.clientApi.storiesOf(kind, m).addParameters({ renderer: RENDERER }),
  configure = (...args) => api.configure(RENDERER, ...args),
  { forceReRender } = api,
  { raw } = api.clientApi;
// typeof module < "u" && module?.hot?.decline();
typeof module < "u" && module?.hot?.decline?.(); // add here

export { configure, forceReRender, raw, storiesOf };

In order to keep the fix, you can use the patch-package.

Install

yarn add -D patch-package

Add script to package.json:

 "scripts": {
+  "postinstall": "patch-package"
 }

Add the fix above to the node_modules/@storybook/vue3/dist/index.mjs and create patch:

npx patch-package @storybook/vue3
datsenkoboos commented 10 months ago

As a temporary workaround, the error can be avoided by adding an optional chain like so:

node_modules/@storybook/vue3/dist/index.mjs

import { renderToCanvas, decorateStory, render } from './chunk-SRVBJOBI.mjs';
export { setup } from './chunk-SRVBJOBI.mjs';
import { global } from '@storybook/global';
import { start } from '@storybook/preview-api';

var { window: globalWindow } = global;
globalWindow.STORYBOOK_ENV = "vue3";
var RENDERER = "vue3",
  api = start(renderToCanvas, { decorateStory, render }),
  storiesOf = (kind, m) =>
    api.clientApi.storiesOf(kind, m).addParameters({ renderer: RENDERER }),
  configure = (...args) => api.configure(RENDERER, ...args),
  { forceReRender } = api,
  { raw } = api.clientApi;
// typeof module < "u" && module?.hot?.decline();
typeof module < "u" && module?.hot?.decline?.(); // add here

export { configure, forceReRender, raw, storiesOf };

In order to keep the fix, you can use the patch-package.

Install

yarn add -D patch-package

Add script to package.json:

 "scripts": {
+  "postinstall": "patch-package"
 }

Add the fix above to the node_modules/@storybook/vue3/dist/index.mjs and create patch:

npx patch-package @storybook/vue3

Thank you!!!!