Conditional Import at build time in react js and react native - reactjs

Question

I want to share my logic between react js and react native
here is my logic file. it is a HOC that wrap the design component.
I use recompose to create HOCs.
import {compose, withState} from 'recompose';
import FilterOptionsPostsPaginateRelay from './FilterOptionsPostsPaginateRelay';
import handlers from './handlers';
import {withRouter} from "next/router";
export default compose(
withRouter
FilterOptionsPostsPaginateRelay,
withState('loading', 'setLoading', false),
handlers,
)
All of the HOCs are sharable between the react js and react native but the withRouter that comes from next.js router
I want to conditional import {withRouter} from "next/router"; or import {withNavigation} from 'react-navigation'; in my logic file.
I know recompose has branch HOC that I can use but I want the condition checks at build time and prevent extra codes to my bundle and increase performance.

Answer 1

You can create next.config.js to custom webpack config to add alias for router.
module.exports = {
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
// Note: we provide webpack above so you should not `require` it
// Perform customizations to webpack config
// Important: return the modified config
// Example using webpack option
config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//));
config.resolve.alias.router = process.env.IS_REACT_NATIVE ? 'react-navigation' : 'next/dist/client/router.js';
return config
},
};
then in your app, you need to use require to import router
const router = require('router');
const withRouter = router.withRouter || router.withNavigation;

Answer 2

I find a solution using babel-plugin-module-resolver
In web project I added following code to .babelrc
{
"plugins": [
[
"module-resolver",
{
"alias": {
"hybridRouter": "next/router"
}
}
]
]
}
In mobile project I added following code to .babelrc
{
"plugins": [
[
"module-resolver",
{
"alias": {
"hybridRouter": "react-navigation"
}
}
]
]
}
And in my logic files I used this like
import HybridRouter from 'hybridRouter';
Now HybridRouter point to next/router in web project and HybridRouter points to react-navigation in mobile project

Answer 3

You can have conditional imports using the require syntax. There is no need to mess with webpack, if you don't want to. Just do something like this in your case:
let withRouter;
try {
//This is expected to fail if next/router is not available
const router = require("next/router");
withRouter = router.withRouter;
} catch(ex){
const reactNav = require("react-navigation");
withRouter = reactNav.withNavigation;
}
// Use withRouter like you would normally use withRouter from next/router or withNavigation from react-navigation