Cannot destructure property 'id' of 'r' as it is undefined

[lukasz-bros]

Summary

When i try to use vite with storybook on Nx then strange error appears

Cannot destructure property 'id' of 'r' as it is undefined.

Here is a stackblitz:
https://stackblitz.com/edit/vitejs-vite-7ps1ws9o?file=README.md

please run in console
nx run ui:storybook

See that when i change configuration to webpack it works fine - in main.ts I set builder to: @storybook/builder-webpack5)

Additional information

main.ts file in .storybook

import type { StorybookConfig } from '@storybook/angular';

const config: StorybookConfig = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-essentials'],
  framework: '@storybook/angular',
  core: {
    // builder: '@storybook/builder-webpack5', // 👈 This works
    builder: '@storybook/builder-vite',
  },
  env: (config) => ({
    ...config,
    EXAMPLE_VAR: 'An environment variable configured in Storybook',
    id: 'dd',
  }),
};

export default config;

// To customize your Vite configuration you can use the viteFinal field.
// Check https://storybook.js.org/docs/react/builders/vite#configuration
// and https://nx.dev/recipes/storybook/custom-builder-configs

Create a reproduction

No response

[DarthRainbows]

I ran into the exact same issue, my reproduction: https://github.com/DarthRainbows/nx-angular-vite-storybook-issue

I traced this to https://github.com/storybookjs/storybook/blob/next/code/core/src/preview-api/modules/store/StoryStore.ts#L142

This leads to a standard import call. The network call to fetch the story file returns

;export const __namedExportsOrder = [];

which is nonsense.

[DarthRainbows]

Traced it further, may be an issue with the nxViteTsPaths plugin? Snipped from the --verbose output:

[Nx Vite TsPaths] Unable to resolve D:/source/nx-angular-vite-storybook-issue/libs/foo/src/lib/foo/foo.component.stories.ts with tsconfig paths. Using fallback file matching.
[Nx Vite TsPaths] Trying to resolve file from config in D:\source\nx-angular-vite-storybook-issue\tsconfig.base.json
[Nx Vite TsPaths] Trying to resolve file from config in D:\source\nx-angular-vite-storybook-issue\tsconfig.base.json
[Nx Vite TsPaths] Resolved D:/source/nx-angular-vite-storybook-issue/libs/foo/src/lib/foo/foo.component.stories.ts to undefined

[DarthRainbows]

There's a viable workaround using @analogjs/storybook-angular instead of @storybook/angular. See my analog-test branch https://github.com/DarthRainbows/nx-angular-vite-storybook-issue/tree/analog-test.

Do be aware I had issues with this in Windows (it reproduced the same bug), but it works when run in WSL2. I presume straight Linux, Docker, or Mac would be fine as well.

[mtycholaz]

I ran into this issue as well. My NX workspace is configured to use vite, but storybook doesn't seem to work well. My workaround was to use webpack for storybook instead of vite. Just for clarity, my application still compiles with vite, but storybook core is compiled with webpack. I did run into some sass/css issues with webpack (trying to include a global styling for angular material, etc) with the preview.ts file, but I managed to workaround that by using preview.html instead.

Repo is a monorepo setup with multiple angular apps and multiple libraries.

@nx 21.6.6
@angular 20.3.6
vite 7.1.5
storybook 9.0.5
@storybook/angular 9.0.5