my react app works fine on my pc using google chrome (where I build it) but doesn't work on Microsoft edge, and also works fine in localhost, but on my laptop and phone it shows a blank page, my host is: http://dorian1.com/
i tried using hashrouter instead of browserrouter, adding "homepage" in my package.json,
my app.js is :
import React, { useState } from 'react'
import { BrowserRouter as Router, Switch, Route} from 'react-router-dom'
import './styles/App.css'
import Footer from './footer/Footer'
import Header from './header/Header'
import Search from './search/Search'
import Alert from './alert/Alert'
// PAGES
import News from './pages/news/News'
import Opinion from './pages/opinion/Opinion'
import Sport from './pages/sport/Sport'
import Culture from './pages/culture/Culture'
import Lifestyle from './pages/lifestyle/Lifestyle'
import SearchResults from './pages/searchResults/SearchResults'
import SingleArticle from './pages/SingleArticle/SingleArticle'
function App() {
const [alert, setAlert] = useState(null)
return (
<Router>
<Header />
<Alert alert={alert}/>
<Search setAlert={setAlert}/>
<Switch>
<Route exact path='/' component={News}/>
<Route path='/News' component={News}/>
<Route path='/Opinion' component={Opinion}/>
<Route path='/Sport' component={Sport}/>
<Route path='/Culture' component={Culture}/>
<Route path='/Lifestyle' component={Lifestyle}/>
<Route path='/SearchResults' component={SearchResults}/>
<Route path='/SingleArticle' component={SingleArticle}/>
</Switch>
<Footer />
</Router>
);
}
export default App;
the console on edge says :
Uncaught TypeError: Cannot read properties of undefined (reading 'apply')
at redux.js:621
at f (redux.js:154)
at Module.454 (store.js:11)
at a ((index):1)
at t ((index):1)
at Array.r [as push] ((index):1)
at main.a2301ff4.chunk.js:1
my index.js is :
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
// REDUX
import { Provider } from 'react-redux'
// import store from './store'
import { PersistGate } from 'redux-persist/integration/react'
import {store, persistor} from './store'
ReactDOM.render(
<Provider store={store}>
<PersistGate persistor={persistor}>
<App />
</PersistGate>
</Provider>,
document.getElementById('root')
);
i fixed it, my store js had thunk middleware imported but never used,
const middleware = [thunk];
export const store = createStore(rootReducer,
initialState,
compose(
applyMiddleware(...middleware),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
));
i removed the middleware and now its working , makes no sense but hope it helps someone