Custom Event in decorate not being emitted in vite build. | Storybook | Page 1

elder slate Mar 9, 2023, 5:14 PM

Not sure if this is related to a storybook built using vite or not. But I am dispatching a custom event in a decorator (within an addon) and it works when running storybook locally but not when it's built. It does seem to work when built with webpack though.

Does this make any sense? Any ideas how how to fix?

Decorator

export function sourceDecorator(storyFn: any, context: any) {
  const story = context.originalStoryFn(context.args, context);
  setTimeout(() =>{
    addons
      .getChannel()
      .emit('franklin/block-rendered', { code: story instanceof HTMLElement ? story.outerHTML : story });
  }, 800);
  return story;
}

I have to put it in a timeout because my story is rendered async.

Addon Environment (uses webpack for testing and works when built)

Environment Info:

  System:
    OS: macOS 13.1
    CPU: (10) arm64 Apple M1 Max
  Binaries:
    Node: 18.12.0 - ~/.nvm/versions/node/v18.12.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.12.0/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v18.12.0/bin/npm
  Browsers:
    Chrome: 110.0.5481.177
    Firefox: 109.0.1
    Safari: 16.2
  npmPackages:
    @storybook/addon-essentials: ^7.0.0-beta.63 => 7.0.0-beta.63 
    @storybook/addon-mdx-gfm: ^7.0.0-beta.63 => 7.0.0-beta.63 
    @storybook/addons: ^7.0.0-beta.63 => 7.0.0-beta.63 
    @storybook/api: ^7.0.0-beta.63 => 7.0.0-beta.63 
    @storybook/cli: ^7.0.0-beta.63 => 7.0.0-beta.63 
    @storybook/components: ^7.0.0-beta.63 => 7.0.0-beta.63 
    @storybook/core-events: ^7.0.0-beta.63 => 7.0.0-beta.63 
    @storybook/html: ^7.0.0-beta.63 => 7.0.0-beta.63 
    @storybook/html-webpack5: ^7.0.0-beta.63 => 7.0.0-beta.63 
    @storybook/theming: ^7.0.0-beta.63 => 7.0.0-beta.63

Production storybook Enviroment (Uses addon and vite). Doesn't work when built but works when running locally.

Environment Info:

  System:
    OS: macOS 13.1
    CPU: (10) arm64 Apple M1 Max
  Binaries:
    Node: 18.12.0 - ~/.nvm/versions/node/v18.12.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.12.0/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v18.12.0/bin/npm
  Browsers:
    Chrome: 110.0.5481.177
    Firefox: 109.0.1
    Safari: 16.2
  npmPackages:
    @storybook/addon-a11y: 7.0.0-beta.64 => 7.0.0-beta.64 
    @storybook/addon-coverage: 0.0.8 => 0.0.8 
    @storybook/addon-essentials: 7.0.0-beta.64 => 7.0.0-beta.64 
    @storybook/addon-interactions: 7.0.0-beta.64 => 7.0.0-beta.64 
    @storybook/addon-links: 7.0.0-beta.64 => 7.0.0-beta.64 
    @storybook/addon-mdx-gfm: 7.0.0-beta.64 => 7.0.0-beta.64 
    @storybook/blocks: 7.0.0-beta.64 => 7.0.0-beta.64 
    @storybook/html: 7.0.0-beta.64 => 7.0.0-beta.64 
    @storybook/html-vite: 7.0.0-beta.64 => 7.0.0-beta.64 
    @storybook/jest: 0.0.11-next.0 => 0.0.11-next.0 
    @storybook/test-runner: 0.10.0-next.10 => 0.10.0-next.10 
    @storybook/testing-library: 0.0.14-next.1 => 0.0.14-next.1

I updated my Production storybook Enviroment to use webpack5 and it worked. So something related to building with vite.

#Custom Event in decorate not being emitted in vite build.