One of these libraries don't work on react-native

Question

I have the following redux store file:

import {applyMiddleware, compose, createStore} from 'redux';
import reducers from '../reducers/index';
import {createBrowserHistory} from 'history'
import {routerMiddleware} from 'connected-react-router';
import createSagaMiddleware from 'redux-saga';
import rootSaga from '../sagas/index';


const history = createBrowserHistory();
const routeMiddleware = routerMiddleware(history);
const sagaMiddleware = createSagaMiddleware();

const middlewares = [sagaMiddleware, routeMiddleware];
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;


export default function configureStore(initialState) {
  const store = createStore(reducers(history), initialState,
    composeEnhancers(applyMiddleware(...middlewares)));

  sagaMiddleware.run(rootSaga);

  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('../reducers/index', () => {
      const nextRootReducer = require('../reducers/index');
      store.replaceReducer(nextRootReducer);
    });
  }
  return store;
}
export {history};

As soon as I import configureStore() in app.js, I get this error:

[Fri Dec 18 2020 20:06:22.730] ERROR ReferenceError: Can't find variable: document

This is my app.js file:

import 'react-native-gesture-handler';
import React from 'react';
import {Provider} from 'react-redux';
import AsyncStorage from '@react-native-community/async-storage';

import {DefaultTheme, Provider as PaperProvider} from 'react-native-paper';

import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/Ionicons';  

import AppHeader from './components/ui/AppHeader';
import Home from './views/Home';
import Login from './views/Login';
import MyCoupons from './views/MyCoupons';
import ShoppingCart from './views/ShoppingCart';
import Signup from './views/Signup';
import Intro from './views/Intro';

import AuthState from './context/auth/authState';
import ShoppingCartState from './context/shoppingCart/shoppingCartState';

import configureStore, {history} from './store';

export const store = configureStore();

const Tab = createBottomTabNavigator();

const App = () => {
  let localStorageUser = null;

  const getLocalStorageUser = async () => {
    try {
      localStorageUser = await AsyncStorage.getItem('user');
    } catch (error) {
      console.log(error);
    }
  };


  const getInitialRouteName = () => {
    switch(localStorageUser) {
      case null: return 'Cuenta'
      case '': return 'Cuenta'
      default: return 'Home'
    }
  }

  return (
    <>
      <AppHeader />
      <AuthState>
        <ShoppingCartState>
          <PaperProvider>
            <NavigationContainer>
              <Tab.Navigator 
                initialRouteName={getInitialRouteName()}
                screenOptions={({route}) => ({
                  tabBarIcon: ({focused, color, size}) => {
                    let iconName;

                    if (route.name == 'Home') {
                      iconName = focused? 'home': 'home-outline';
                    } else if (route.name == 'Mis Cupones') {
                      iconName = focused? 'film': 'film-outline';
                    } else if (route.name == 'Carrito') {
                      iconName = focused? 'cart': 'cart-outline';
                    } else if (route.name == 'Cuenta') {
                      iconName = focused? 'person-circle': 'person-circle-outline';
                    }

                    return <Icon name={iconName} color='blue' size={25} />
                  }
                })}
              >
                <Tab.Screen name='Home' component={Home} />
                <Tab.Screen name='Carrito' component={ShoppingCart} />
                <Tab.Screen name='Mis Cupones' component={MyCoupons} />
                <Tab.Screen name='Cuenta' component={Login}/>
              </Tab.Navigator>
            </NavigationContainer>
          </PaperProvider>
        </ShoppingCartState>
      </AuthState>
    </>
  );
};

export default App;

When I comment the import line, the application runs. I have tried to use react-redux and redux-saga with react-native in more than one mac, and always the same, and I have never found any documentation that they don't work with react-native. I have even found tutorials for that.

All the libraries are installed with yarn and work perfectly with the reactjs component of the project, they just don't work with react-native.

Answer 1

I believe all three of the libraries you mention work just fine with react-native. The one that doesn't is history which you import in your example. Looking at history's source code, you can identify it clearly:

https://github.com/ReactTraining/history/blob/master/packages/history/index.ts

export function createBrowserHistory(
  options: BrowserHistoryOptions = {}
): BrowserHistory {
  let { window = document.defaultView! } = options;
  let globalHistory = window.history;

However, the document object is not available on react-native.