Mantaining different Packages between Native and a PWA app

Hi, I’m Trying to develop a simple Router Project by using different packages for either Native and Web Platforms, it turns out that I tried to conditionally import the package by checking user’s Platform.OS and require the specific module, but when I run the App on browser, the app breaks because it loaded the native module. So I want to know if is there any approach to work with different packages for different platforms?

Here’s the index.js with all the application:

import { registerRootComponent } from 'expo';
import React from "react";
import { Platform, StyleSheet, Text, View } from "react-native";

let RouterX = <></>;
let RouteX = <></>;
let LinkX = <></>;

if (Platform.OS === 'web') {
  const { BrowserRouter, Route, Link } = require('react-router-dom');
  RouterX = BrowserRouter;
  RouteX = Route;
  LinkX = Link;
} else {
  const { NativeRouter, Route, Link } = require('react-router-native');
  RouterX = NativeRouter;
  RouteX = Route;
  LinkX = Link;
}

const Home = () => <Text style={styles.header}>{JSON.stringify(Platform)}</Text>;

const About = () => <Text style={styles.header}>About</Text>;

const Topic = ({ match }) => (
  <Text style={styles.topic}>{match.params.topicId}</Text>
);

const Topics = ({ match }) => (
  <View>
    <Text style={styles.header}>Topics</Text>
    <View>
      <LinkX
        to={`${match.url}/rendering`}
        style={styles.subNavItem}
        underlayColor="#f0f4f7"
      >
        <Text>Rendering with React</Text>
      </LinkX>
      <LinkX
        to={`${match.url}/components`}
        style={styles.subNavItem}
        underlayColor="#f0f4f7"
      >
        <Text>Components</Text>
      </LinkX>
      <LinkX
        to={`${match.url}/props-v-state`}
        style={styles.subNavItem}
        underlayColor="#f0f4f7"
      >
        <Text>Props v. State</Text>
      </LinkX>
    </View>

    <RouteX path={`${match.path}/:topicId`} component={Topic} />
    <RouteX
      exact
      path={match.path}
      render={() => (
        <Text style={styles.topic}>Please select a topic.</Text>
      )}
    />
  </View>
);

const App = () => (
  <RouterX>
    <View style={styles.container}>
      <View style={styles.nav}>
        <LinkX to="/" underlayColor="#f0f4f7" style={styles.navItem}>
          <Text>Home</Text>
        </LinkX>
        <LinkX
          to="/about"
          underlayColor="#f0f4f7"
          style={styles.navItem}
        >
          <Text>About</Text>
        </LinkX>
        <LinkX
          to="/topics"
          underlayColor="#f0f4f7"
          style={styles.navItem}
        >
          <Text>Topics</Text>
        </LinkX>
      </View>

      <RouteX exact path="/" component={Home} />
      <RouteX path="/about" component={About} />
      <RouteX path="/topics" component={Topics} />
    </View>
  </RouterX>
);

const styles = StyleSheet.create({
  container: {
    marginTop: 25,
    padding: 10
  },
  header: {
    fontSize: 20
  },
  nav: {
    flexDirection: "row",
    justifyContent: "space-around"
  },
  navItem: {
    flex: 1,
    alignItems: "center",
    padding: 10
  },
  subNavItem: {
    padding: 5
  },
  topic: {
    textAlign: "center",
    fontSize: 15
  }
});

registerRootComponent(App);

And Here is the error Message that shows up in browser:

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 <MemoryRouter {...props} />;
| }
|

I not just having problem with this code, but also think this approach is very naive.