Repository: storybook
Issue: [Bug]: Compilation issues when using vite + reactDocgen 'CSF Parsing error'
Labels: bug,builder-vite,sev:S2

### Describe the bug



running `storybook dev` fails to compile with many errors that seems like it doesn't understand typescript

```
CSF Parsing error: Expected 'ObjectExpression' but found 'CallExpression' instead in 'CallExpression'.
```

```ts
10:55:22 AM [vite] Pre-transform error: /styleguide/components/containers/Flex/Flex.component.tsx: Unexpected token, expected "," (26:33)

  24 |     .reduce((passedProps, key) => ({ ...passedProps, [key]: props[key] }), {});
  25 |
> 26 | const FlexBox = forwardRef((props: any, ref) => (
     |                                  ^
  27 |   <Box {...withFlexProps(props)} ref={ref} style={props.style} {...props} />
  28 | ));
  29 |
Error in error handler:
Error: offset is longer than source length! offset 440 > length 374
    at numberToPos (file:///node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:12448:15)
    at formatError (file:///node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:50878:35)
    at TransformContext.error (file:///node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:50857:19)
    at Object.transform (file:///node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:51175:25)
    at async loadAndTransform (file:///node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:53923:29)

```

```ts
10:55:24 AM [vite] Internal server error: //styleguide/components/containers/Flex/Flex.component.tsx: Unexpected token, expected "," (26:33)

  24 |     .reduce((passedProps, key) => ({ ...passedProps, [key]: props[key] }), {});
  25 |
> 26 | const FlexBox = forwardRef((props: any, ref) => (
     |                                  ^
  27 |   <Box {...withFlexProps(props)} ref={ref} style={props.style} {...props} />
  28 | ));
  29 |
  Plugin: storybook:react-docgen-plugin
  File: /styleguide/components/Header/HeaderDropdownContent.component.jsx:26:33
  19 |    z-index: 100;
  20 |    position: absolute;
  21 |    top: ${({ theme }) => theme.header.height};
     |                                 ^
  22 |    ${({ direction }) =>
  23 |      direction === 'right'
      at constructor (/node_modules/react-docgen/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:353:19)
```



### To Reproduce

tries several configurations but basically trying to work with these.
without docgen it works fine


```
export const getStorybookConfig = ({ alias = {}, stories = [] }): StorybookConfig => ({
  typescript: {
    reactDocgen: 'react-docgen-typescript',
  },
  stories,
  viteFinal: config => {
    if (!alias) return config;

    // config.resolve.alias = { ...config.resolve.alias, ...alias };

    return config;
  },
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
  core: {
    disableTelemetry: true,
    builder: '@storybook/builder-vite',
  },
});
```


### System

```bash
Storybook Environment Info:

  System:
    OS: macOS 14.4.1
    CPU: (8) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.8.1 - ~/.volta/tools/image/node/20.8.1/bin/node
    Yarn: 1.22.10 - ~/.volta/tools/image/yarn/1.22.10/bin/yarn <----- active
    npm: 10.1.0 - ~/.volta/tools/image/node/20.8.1/bin/npm
    pnpm: 8.5.0 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 123.0.6312.107
    Safari: 17.4.1
```


### Additional context

storybook 8.0.6 
vite 5.2.8 or  4.5.0 - same error