[Bug]: ' Unexpected "typeof" ' / ' Expected "from" but found "{" ' with 'react-native'

[motto76]

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_

[supriya-2108]

Hello team I can resolve this issue please assign this to me

[ShanthiGurunath]

Anybody given solution to this issue? I'm getting the same

[boorad]

So, vite uses esbuild, and esbuild doesn't understand Facebook's Flow notation (what they used before Typescript came onto the scene). It looks like you're trying to build a package with vite that includes react-native. I believe that gives you two options:

1. You can strip the Flow notation out of the source files with something like esbuild-plugin-flow in your esbuild/vite config... not quite sure how to add that, as I've only ever used esbuild directly, not vite.

2. You can also mark react-native dependency as external in your esbuild/vite config. This just means that you'll let Metro bundle your 'vite-built' package and react-native together.

Further, you can add even more RN-based packages to be stripped in a targeted way, much like this library does: https://github.com/oblador/react-native-esbuild?tab=readme-ov-file#flow-syntax-errors-such-as-expected-from-but-found-. They even mention this error specifically. You might be able to build your entire project with this, but I can't vouch for its stability. I know I'll be trying it soon, and watching for Hot Module Replace functionality.

There are more and more vite and esbuild efforts out there to replace Metro, not sure there's a clear winner yet, though.

[adel12790]

I have a similar issue, but with nx monorepo setup.

Should node_modules be excluded from the builds? but this wouldn't be the right solution.

[vaynevayne]

same issue with rollup esbuild

'use strict';
docs:dev:  12 │ 
docs:dev:  13 │ // Components
docs:dev:  14 │ import typeof AccessibilityInfo from './Libraries/Components/AccessibilityInfo/AccessibilityInfo';

[maiadaElGawad]

any one resolve this problem

[Yangeok]

Still not resolved?

[EvgenMart]

viteFinal: async (config) =>
mergeConfig(config, {
plugins: [nxViteTsPaths()],
resolve: {
alias: {
'react-native': 'react-native-web',
},
},
}),