react-router-native, NativeRouter.js Module parse failed - unexpected token

Question

I'm getting an unexpected token error while using react native router. Expo is being used to render the page in my browser. I'm really new to React and React Native, so I'm kind of shooting in the dark with everything that I do to fix this. I found a similar issue (Failed to compile ./node_modules/react-router-native/NativeRouter.js #5684 https://github.com/ReactTraining/react-router/issues/5684), but the link that supposedly fixed the issue didn't work. This is the error that I'm getting:

/node_modules/react-router-native/NativeRouter.js 11:9 Module parse failed: Unexpected token (11:9) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

| */ | function NativeRouter(props) {

return ; | } |

I made no changes to the packaged files, so I'm assuming that I've done something wrong with my code on the App.js file. My code for App.js is this:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { NativeRouter, Route, Link } from 'react-router-native';
import Login from './login';
import Dashboard from './dashboard';
import Home from './home';



function App() {
  return (
    <div>
<NativeRouter>
    <View style={styles.container}>
      <View style={styles.nav}>
        <Link to="/" underlayColor="#f0f4f7" style={styles.navItem}>
          <Text>Home</Text>
        </Link>
        <Link
          to="/Login"
          underlayColor="#f0f4f7"
          style={styles.navItem}
        >
          <Text>Login</Text>
        </Link>
        <Link
          to="/Dashboard"
          underlayColor="#f0f4f7"
          style={styles.navItem}
        >
          <Text>Dashboard</Text>
        </Link>
      </View>

      <Route exact path="/" component={Home} />
      <Route path="/login" component={Login} />
      <Route path="/dashboard" component={Dashboard} />
    </View>
  </NativeRouter>

    </div>
  );
}

export default App;

My expected result would be to see the Nav bar render properly instead of getting the unexpected token error.

Answer 1

I've answered my own question! I was installing react-navigation into the global project folder instead of in the front end directory where it was supposed to run. Now, it works great!