[Bug]: TypeError (undefined global) when using `setup()` with vue3-vite

[MacroMan]

Describe the bug

When using setup() from @storybook/vue3 in .storybook/main.ts:

import type { StorybookConfig } from "@storybook/vue3-vite";
import { setup } from "@storybook/vue3"

setup((app): void => {
  // app.use(PrimeVue);
});

const config: StorybookConfig = {
  ...
};
export default config;

the following error is thrown:

> storybook dev -p 6006

@storybook/cli v7.6.4

TypeError: Cannot set properties of undefined (setting 'STORYBOOK_ENV')
    at Object.<anonymous> (/home/david/crowdhelix-projects/artemis/node_modules/.pnpm/@storybook+vue3@7.6.4_@vue+compiler-core@3.3.11_vue@3.3.10/node_modules/@storybook/vue3/dist/index.js:26:28)
    at Module._compile (node:internal/modules/cjs/loader:1241:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
    at Object.newLoader (/home/david/crowdhelix-projects/artemis/node_modules/.pnpm/esbuild-register@3.5.0_esbuild@0.18.20/node_modules/esbuild-register/dist/node.js:2262:9)
    at extensions..js (/home/david/crowdhelix-projects/artemis/node_modules/.pnpm/esbuild-register@3.5.0_esbuild@0.18.20/node_modules/esbuild-register/dist/node.js:4838:24)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at Module.require (node:internal/modules/cjs/loader:1115:19)
    at require (node:internal/modules/helpers:130:18)
    at Object.<anonymous> (./.storybook/main.ts:2:23)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

 ELIFECYCLE  Command failed with exit code 1.

To Reproduce

https://stackblitz.com/edit/github-2zq7kx?file=.storybook%2Fmain.ts

System

System:
    OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (16) x64 AMD Ryzen 7 5700G with Radeon Graphics
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 20.9.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.4 - /usr/local/bin/npm
    pnpm: 8.12.1 - ~/.local/share/pnpm/pnpm <----- active
  Browsers:
    Chrome: 120.0.6099.129
  npmPackages:
    @storybook/addon-essentials: ^7.6.4 => 7.6.4 
    @storybook/addon-interactions: ^7.6.4 => 7.6.4 
    @storybook/addon-links: ^7.6.4 => 7.6.4 
    @storybook/blocks: ^7.6.4 => 7.6.4 
    @storybook/test: ^7.6.4 => 7.6.4 
    @storybook/vue3: ^7.6.4 => 7.6.4 
    @storybook/vue3-vite: ^7.6.4 => 7.6.4 
    chromatic: ^10.1.0 => 10.1.0 
    storybook: ^7.6.4 => 7.6.4

Additional context

Tested and have same error with storybook 7.6.4, 7.6.7 and 8.0.0-alpha.6

[MacroMan]

I found some other issues with the same error:

• https://github.com/storybookjs/storybook/issues/16367
  • Fixed by upgrading to storybook 8.0.0-alpha.6, but the error remains for me on that version
• https://github.com/storybookjs/storybook/issues/19175
  • Closed without resolution
• https://github.com/storybookjs/storybook/issues/17053
  • Closed with "Storyshots is deprecated"

[MacroMan]

I think the error originates from globals.ts, and looking at @storybook/global it seems that global from import { global } from '@storybook/global'; should always be set, so not really sure of the underlying cause

[shilman]

@ndelangen something is wrong with @storybook/global and it is manifesting itself in a variety of contexts. Prioritizing this issue since we have a repro available, but @dannyhw have also encountered something similar on his RN work recently.

[ndelangen]

@shilman @storybook/global didn't change. Could it be that something upstream in the builder changed? vite?

[bodograumann]

I think the error that I see, is caused to the same underlying issue. When toggling a boolean control between false and true, the following error appears:

Error: Cannot read properties of undefined (reading 'some')
  at ReactiveEffect.fn (/node_modules/.cache/sb-vite/deps/chunk-47INPIQA.js?v=8deed6a3:1402:17))
  at ReactiveEffect.run (/node_modules/.cache/sb-vite/deps/chunk-47INPIQA.js?v=8deed6a3:1198:23))
  at get value [as value] (/node_modules/.cache/sb-vite/deps/chunk-47INPIQA.js?v=8deed6a3:1413:68))
  at Proxy._sfc_render (/src/components/singleCase/ActionButtons.vue:159:68))
  at renderComponentRoot (/node_modules/.cache/sb-vite/deps/chunk-47INPIQA.js?v=8deed6a3:2262:17))
  at ReactiveEffect.componentUpdateFn [as fn] (/node_modules/.cache/sb-vite/deps/chunk-47INPIQA.js?v=8deed6a3:6653:26))
  at ReactiveEffect.run (/node_modules/.cache/sb-vite/deps/chunk-47INPIQA.js?v=8deed6a3:1198:23))
  at instance.update (/node_modules/.cache/sb-vite/deps/chunk-47INPIQA.js?v=8deed6a3:6706:17))
  at updateComponent (/node_modules/.cache/sb-vite/deps/chunk-47INPIQA.js?v=8deed6a3:6515:18))

There is no some in my code, afaict.

I tried different versions and it seems this error was introduced in 7.6.0. Can you confirm that for your situation as well, @MacroMan ?

I first thought it might be related to the update to vite 5, but when downgrading to storybook 7.5.3, it keeps vite 5 as sub-dependency. Not sure what is bundled in it though.

[dannyhw]

Heres my comment about what I encountered for reference. Though I'm not sure its the same thing.

https://github.com/storybookjs/storybook/pull/25296#issuecomment-1875642613

My issue seems to come from the cjs bundling generating a dynamic require function in addon-actions. Looks like the cjs bundling is targetting node and so that might explain why it behaves differently.

In the issue here it looks like something in storybook vue maybe? though if you can resolve mjs instead maybe that fixes your issue.

[MacroMan]

@bodograumann I checked back to version 7.0.n and all exhibit the same error, so I suspect this is a downstream issue

[bodograumann]

Thanks @MacroMan . I have hidden my comment as off-topic and will try to create a separate reproduction.

[MacroMan]

Is there any workaround that will let me add to the Vue instance without setup()? I just need to use Vue.use()

[vanessayuenn]

@ndelangen by any chance is this fixed already since you changed the bundle target for tsup?

[ndelangen]

I'm looking at the repro, and AFAIK it makes not sense to be calling this in main.ts or is there?

import { setup } from "@storybook/vue3"

setup((app) => {
  // app.use(Plugin);
});

Should this code be located inside of preview.ts instead? @MacroMan

I upgraded the repro and moved the code as described above and storybook started, no problem.