[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/@[email protected]_@[email protected][email protected]/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/[email protected][email protected]/node_modules/esbuild-register/dist/node.js:2262:9)
    at extensions..js (/home/david/crowdhelix-projects/artemis/node_modules/.pnpm/[email protected][email protected]/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:

• Storybook fails with Angular 12 and webpack5 #16367
  • Fixed by upgrading to storybook 8.0.0-alpha.6, but the error remains for me on that version
• Running Storyshots in a clean HTML app fails #19175
  • Closed without resolution
• StoryShots web-components fails to run with error: Cannot set properties of undefined (setting 'STORYBOOK_ENV') #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?

[dannyhw]

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

#25296 (comment)

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.