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.