Repository: storybook
Issue: [Bug]: ' Unexpected "typeof" ' /  ' Expected "from" but found "{" '  with 'react-native'
Labels: bug,help wanted,react-native,builder-vite

### Describe the bug

Hello,
we are trying to get our project (React 18, Node 18, TypeScript 5.2, Vite 4.5, Storybook 7.5) running in Storybook.
At startup it always runs into the following error in conjunction with react-native (0.72.6).

Does anyone have any ideas or suggested solutions?

````
$ yarn start
yarn run v1.22.19
$ storybook dev -p 6006 -s ./static
@storybook/cli v7.5.1
```

info => Serving static files from ./.\.storybook\static at /
info => Starting manager..
info => Starting preview..

 Storybook 7.5.1 for react-vite started  
 188 ms for manager and 9.26 s for preview 
 Local:            http://localhost:6006/             
 On your network:  http://...

X [ERROR] Unexpected "typeof"

    node_modules/react-native/index.js:14:7:
      14 │ import typeof AccessibilityInfo from './Libraries/Components/AccessibilityInfo/AccessibilityInfo';
         ╵        ~~~~~~

X [ERROR] Expected "from" but found "{"

    node_modules/react-native/Libraries/Utilities/codegenNativeComponent.js:13:12:
      13 │ import type {HostComponent} from '../../Libraries/Renderer/shims/ReactNativeTypes';
         │             ^
         ╵             from

X [ERROR] Expected "from" but found "{"

    node_modules/react-native/Libraries/Renderer/shims/ReactNative.js:16:12:
      16 │ import type {ReactNativeType} from './ReactNativeTypes';
         │             ^
         ╵             from

X [ERROR] Expected "from" but found "{"

    node_modules/react-native/Libraries/Renderer/shims/ReactFabric.js:18:12:
      18 │ import type {ReactFabricType} from './ReactNativeTypes';
         │             ^
         ╵             from

X [ERROR] Expected "from" but found "{"

    node_modules/react-native/Libraries/Pressability/PressabilityDebug.js:11:12:
      11 │ import type {ColorValue} from '../StyleSheet/StyleSheet';
         │             ^
         ╵             from

D:\workspace\project\node_modules\@storybook\cli\bin\index.js:23
  throw error;
  ^

Error: Build failed with 5 errors:
node_modules/react-native/Libraries/Pressability/PressabilityDebug.js:11:12: ERROR: Expected "from" but found "{"
node_modules/react-native/Libraries/Renderer/shims/ReactFabric.js:18:12: ERROR: Expected "from" but found "{"
node_modules/react-native/Libraries/Renderer/shims/ReactNative.js:16:12: ERROR: Expected "from" but found "{"
node_modules/react-native/Libraries/Utilities/codegenNativeComponent.js:13:12: ERROR: Expected "from" but found "{"
node_modules/react-native/index.js:14:7: ERROR: Unexpected "typeof"
    at failureErrorWithLog (D:\workspace\project\node_modules\esbuild\lib\main.js:1649:15)
    at D:\workspace\project\node_modules\esbuild\lib\main.js:1058:25
    at D:\workspace\project\node_modules\esbuild\lib\main.js:1525:9
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  errors: [
    {
      detail: undefined,
      id: '',
      location: {
        column: 12,
        file: 'node_modules/react-native/Libraries/Pressability/PressabilityDebug.js',
        length: 1,
        line: 11,
        lineText: "import type {ColorValue} from '../StyleSheet/StyleSheet';",
        namespace: '',
        suggestion: 'from'
      },
      notes: [],
      pluginName: '',
      text: 'Expected "from" but found "{"'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 12,
        file: 'node_modules/react-native/Libraries/Renderer/shims/ReactFabric.js',
        length: 1,
        line: 18,
        lineText: "import type {ReactFabricType} from './ReactNativeTypes';",
        namespace: '',
        suggestion: 'from'
      },
      notes: [],
      pluginName: '',
      text: 'Expected "from" but found "{"'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 12,
        file: 'node_modules/react-native/Libraries/Renderer/shims/ReactNative.js',
        length: 1,
        line: 16,
        lineText: "import type {ReactNativeType} from './ReactNativeTypes';",
        namespace: '',
        suggestion: 'from'
      },
      notes: [],
      pluginName: '',
      text: 'Expected "from" but found "{"'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 12,
        file: 'node_modules/react-native/Libraries/Utilities/codegenNativeComponent.js',
        length: 1,
        line: 13,
        lineText: "import type {HostComponent} from '../../Libraries/Renderer/shims/ReactNativeTypes';",
        namespace: '',
        suggestion: 'from'
      },
      notes: [],
      pluginName: '',
      text: 'Expected "from" but found "{"'
    },
    {
      detail: undefined,
      id: '',
      location: {
        column: 7,
        file: 'node_modules/react-native/index.js',
        length: 6,
        line: 14,
        lineText: "import typeof AccessibilityInfo from './Libraries/Components/AccessibilityInfo/AccessibilityInfo';",
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'Unexpected "typeof"'
    }
  ],
  warnings: []
}

Node.js v18.18.0
error Command failed with exit code 7.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.`



### To Reproduce

_No response_

### System

```bash
>> package.json <<
...
"@storybook/addon-a11y": "7.5.1",
"@storybook/addon-essentials": "7.5.1",
"@storybook/blocks": "7.5.1",
"@storybook/builder-vite": "7.5.1",
"@storybook/addon-links": "7.5.1",
"@storybook/react": "7.5.1",
"@storybook/react-vite": "7.5.1",
"storybook": "7.5.1",
...

--------------------------------------------------------------------------

>> vite.config.ts <<
/// <reference types="vitest" />
import react from '@vitejs/plugin-react'
import { resolve } from 'path'
import peerDepsExternal from 'rollup-plugin-peer-deps-external'
import { defineConfig } from 'vite'
import dts from 'vite-plugin-dts'

// https://vitejs.dev/config/
// https://vitejs.dev/guide/build.html#library-mode
export default defineConfig(({ mode }) => ({
  plugins: [

    peerDepsExternal({
      includeDependencies: true 
    }),
    react(),
    dts({
      include: ['src'],
      exclude: [
        'src/test',
        'src/**/*.spec.ts',
        'src/**/*.spec.tsx',
        // 'src/**/*.vrt-test.tsx',
        'src/**/__fixtures__/**',
        'src/**.stories.*'
      ]
    })
  ],
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'project',
      fileName: 'project'
    },
    sourcemap: true
  },
  esbuild: {
    minifyIdentifiers: false 
  },
  test: {
    globals: true,
    exclude: ['**/node_modules*/**', '**/dist*/**', '**/.{idea,git,cache,output,temp}/**'],
    environment: 'jsdom',
    passWithNoTests: true,
    setupFiles: './test/vite.setup.ts',
    reporters: process.env.CI ? ['default', 'junit'] : ['default'],
    outputFile: 'test-results/unit-report.xml',
    coverage: {
      provider: 'v8',
      reportsDirectory: 'test-results/coverage'
    }
  }
}))

--------------------------------------------------------------------------

>> main.ts <<
import { mergeConfig } from "vite";

const path = require('path')

process.env.STORYBOOK = 'true'
// process.env.NODE_ENV = 'production'

module.exports = {
  stories: ['../src/GUI-Komponenten/**/*.stories.*'],
  addons: ['@storybook/addon-links', '@storybook/addon-a11y', '@storybook/addon-essentials'],
  core: {
    builder: "@storybook/builder-vite",
    disableTelemetry: true // 👈 Disables telemetry
  },
  framework: {
    name: '@storybook/react-vite'
  },
  async viteFinal(config) {
    // Merge custom configuration into the default config
    return mergeConfig(config, {
      resolve: {
        alias: { 'react-native': 'react-native' },
      },
     
      // Add storybook-specific dependencies to pre-optimization
      optimizeDeps: {
        // exclude: ['react-native'],
      },
    });
  },

}
```


### Additional context

_No response_