[Bug]: 7.6 -> 8 upgrade fails on legacy decorators with Vite/React

samesfahani-tuplehealth commented 4 months ago

Describe the bug

I am currently on ^7.16.17 and an upgrade attempt to ^8.1.1 is throwing the following build errors when using legacy decorators (not TypeScript 5 decorators):

1:25:48 PM [vite] Internal server error: /Users/foo/somewhere/packages/app/node_modules/somewhere/someFile.service.ts: Decorators must be placed *after* the 'export' keyword. Remove the 'decoratorsBeforeExport: false' option to use the '@decorator export class {}' syntax. (24:0)

This is my .storybook/main.ts:

import { StorybookConfig } from '@storybook/react-vite';
import { dirname, join } from 'path';
import { mergeConfig } from 'vite';
import turbosnap from 'vite-plugin-turbosnap';

/**
 * This function is used to resolve the absolute path of a package.
 * It is needed in projects that use Yarn PnP or are set up within a monorepo.
 */
function getAbsolutePath(value) {
  return dirname(require.resolve(join(value, 'package.json')));
}

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [getAbsolutePath('@storybook/addon-essentials'), '@chromatic-com/storybook'],
  framework: {
    name: '@storybook/react-vite',
    options: {
      builder: {
        viteConfigPath: `${__dirname}/../vite.config.ts`,
      },
    },
  },
  core: {},
  docs: {},
  staticDirs: ['../public'],
  viteFinal(config, { configType }) {
    return mergeConfig(config, {
      build: {
        rollupOptions: {
          treeshake: false, // Storybook build fails if we treeshake; our app works fine
        },
      },
      plugins:
        configType === 'PRODUCTION'
          ? [
              turbosnap({
                rootDir: config.root ?? process.cwd(),
              }),
            ]
          : [],
    });
  },
};
export default config;

And this is the relevant part of my vite.config.ts:

    plugins: [
      react({
        babel: {
          parserOpts: {
            plugins: ['decorators-legacy'],
          },
        },
      }),
      // Allow for SVG as React components
      svgr(),
      // Resolve TypeScript path aliases
      tsconfigPaths(),
      // Polyfill NodeJS modules
      nodePolyfills(),
    ],

Note that I am able to run my web server fine with Vite and build using roll up just fine. And as stated, 7.16 of SB works; the only change is an upgrade to 8. Surely there was a breaking change, I just cannot find it in the documentation at all for what I need to do here.

To Reproduce

https://stackblitz.com/edit/github-lcctwu?file=vite.config.ts

System

System:
    OS: macOS 14.4.1
    CPU: (12) arm64 Apple M3 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.0.0 - /opt/homebrew/bin/node
    npm: 10.5.1 - /opt/homebrew/bin/npm
    pnpm: 8.15.8 - /opt/homebrew/bin/pnpm <----- active
  Browsers:
    Chrome: 124.0.6367.208
    Safari: 17.4.1