'Cannot set properties of undefined' for enum in production with Vite and Typescript

[MattElcock]

Summary

Hello,

I am migrating my team's project to use Vite. After adding Vite, Storybook boots up absolutely fine in development. It also compiles successfully.

However, when I run the production version of Storybook and look through the stories, some error with this:

Additional information

The error originates from the minified version of a types.ts file. Here is the part of the file it errors on:

. . . (some interfaces that are also exported) . . .

export enum OrdinalType {
  Bar = 'Bar',
  Pie = 'Pie'
}

. . . (some more enums that are also exported) . . .

Removing the enum simply moves the error to the next enum that it finds.

Context

Package Versions

• "vite": "^6.0.7"
• "vite-plugin-svgr": "^4.3.0"
• "vite-tsconfig-paths": "^5.1.4"
• "storybook": "^8.6.0-alpha.0"
• "@storybook/addon-a11y": "^8.6.0-alpha.0"
• "@storybook/addon-coverage": "^1.0.5"
• "@storybook/addon-essentials": "^8.6.0-alpha.0"
• "@storybook/addon-links": "^8.6.0-alpha.0"
• "@storybook/blocks": "^8.6.0-alpha.0"
• "@storybook/react": "^8.6.0-alpha.0"
• "@storybook/react-vite": "^8.6.0-alpha.0"
• "@storybook/test": "^8.6.0-alpha.0"
• "@storybook/test-runner": "^0.21.0"

.storybook/main.ts

import type { StorybookConfig } from '@storybook/react-vite'

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],

  addons: [
    '@storybook/addon-a11y',
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    'storybook-addon-theme-provider',
    '@storybook/addon-coverage'
  ],

  framework: {
    name: '@storybook/react-vite',
    options: {}
  },

  typescript: {
    reactDocgen: 'react-docgen-typescript'
  },

  staticDirs: ['../public'],

  docs: {}
}
export default config

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

// https://vitejs.dev/config/
export default defineConfig({
  base: '/foo/',
  server: {
    host: '127.0.0.1',
    port: 3000
  },
  plugins: [react()],
  resolve: {
    alias: {
      utils: '/src/utils',
      components: '/src/components',
      pages: '/src/pages',
      services: '/src/services',
      atoms: '/src/atoms',
      hooks: '/src/hooks',
      dashlets: '/src/dashlets',
      context: '/src/context',
      layouts: '/src/layouts',
      icons: '/src/icons',
      images: '/src/images',
      theme: '/src/theme',
      domains: '/src/domains',
      styles: '/src/styles',
      config: '/src/config'
    }
  },
  build: {
    outDir: 'build',
    assetsDir: 'static'
  }
})

tsconfig.json

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
}

tsconfig.app.json

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "esnext"],
    "module": "ESNext",
    "skipLibCheck": true,
    "allowJs": true,
    "strict": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true,

    "baseUrl": "./src",
    "paths": {
      "utils": ["utils"],
      "components": ["components"],
      "pages": ["pages"],
      "services": ["services"],
      "atoms": ["atoms"],
      "hooks": ["hooks"],
      "dashlets": ["dashlets"],
      "context": ["context"],
      "layouts": ["layouts"],
      "icons": ["icons"],
      "images": ["images"],
      "theme": ["theme"],
      "domains": ["domains"],
      "config": ["config"]
    }
  },
  "include": ["src"]
}

tsconfig.node.json

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
    "target": "ES2022",
    "lib": ["ES2023"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["vite.config.ts"]
}

Create a reproduction

Unfortunately, I am unable to share a link to clone our repository as our product is not open source. But, if needed, please let me know and I can attempt to recreate the issue in a new, seperate project.

[MattElcock]

I've installed madge to try and identify circular dependencies, as I saw here that might be an issue. There were no circular dependencies in our project.