Unexpected "typeof"; Expected ";" but found "Options"; Expected "from" but found "{";

Question

I am creating a vite react-native project right now and I keep getting the error:

X [ERROR] Unexpected "typeof"

    node_modules/react-native/index.js:14:7:
      14 │ import typeof AccessibilityInfo from './Libraries/Components/AccessibilityIn...
         ╵        ~~~~~~

X [ERROR] Expected ";" but found "Options"

    node_modules/react-native/Libraries/Utilities/codegenNativeComponent.js:19:5:
      19 │ type Options = $ReadOnly<{|
         │      ~~~~~~~
         ╵      ;

X [ERROR] Expected "from" but found "{"

    node_modules/react-native/Libraries/Renderer/shims/ReactNative.js:15:12:
      15 │ import type {ReactNativeType} from './ReactNativeTypes';
         │             ^
         ╵             from

X [ERROR] Expected "from" but found "{"

    node_modules/react-native/Libraries/Renderer/shims/ReactFabric.js:17:12:
      17 │ 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

My App.jsx file:

import { createDrawerNavigator } from '@react-navigation/drawer';
import HomeScreen from './screens/HomeScreen';
import Page1 from './screens/Page1';
import Page2 from './screens/Page2';

const Drawer = createDrawerNavigator();

function DrawerNavigator() {
 return (
   <Drawer.Navigator initialRouteName="Home">
     <Drawer.Screen name="Home" component={HomeScreen} />
     <Drawer.Screen name="Page 1" component={Page1} />
     <Drawer.Screen name="Page 2" component={Page2} />
   </Drawer.Navigator>
 );
}

function App() {
 return <DrawerNavigator />;
}

export default App;

My vite.config.js file:

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


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

My package.json file:

{
  "name": "vite-ionic-react",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@ionic/react": "^7.0.0-rc.5",
    "@ionic/react-router": "^7.0.0-rc.5",
    "@react-navigation/drawer": "^6.6.6",
    "@react-navigation/native": "^6.1.9",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-native": "^0.73.1",
    "react-native-safe-area-context": "^4.8.2",
    "react-router": "^6.21.1",
    "react-router-dom": "^6.21.1"
  },
  "devDependencies": {
    "@babel/core": "^7.23.6",
    "@babel/runtime": "^7.23.6",
    "@types/react": "^18.2.43",
    "@types/react-dom": "^18.2.17",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "eslint": "^8.55.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "vite": "^5.0.8"
  }
}

I've changed my App.jsx file to this and it works, but I don't know how to implement a drawer still without it giving an error:

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

Are there any fixes for this error, or any alternatives to react navigation drawer?

Answer 1

i have not created a react native project through vite but drawer navigation require a few more setup and packages, and you have to wrap the whole app in navigation container. Following are some helpful documentations, follow them am see if it helps with your case.

• react navigation(https://reactnavigation.org/docs/getting-started/)
• Drawer Navigator(https://reactnavigation.org/docs/drawer-navigator/)
• react-native-reanimated(https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/)