react-redux [v7.0.2]: Getting "TypeError: Object(...) is not a function" when wrapping component export with connect()

Question

I am trying to add redux to my project but I am stuck at this silly error I cannot debug. When I try to export my component using 'connect()' to get access to the Redux store I always get this error. It only happens when I use the connect() function. If I take it off the code it compiles normaly:

connectAdvanced.js:116 Uncaught TypeError: Object(...) is not a function
    at ConnectFunction (connectAdvanced.js:116)
    at updateFunctionComponent (react-dom.development.js:15034)
    at updateSimpleMemoComponent (react-dom.development.js:14978)
    at updateMemoComponent (react-dom.development.js:14891)
    at beginWork (react-dom.development.js:16041)
    at performUnitOfWork (react-dom.development.js:19102)
    at workLoop (react-dom.development.js:19143)
    at HTMLUnknownElement.callCallback (react-dom.development.js:147)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
    at invokeGuardedCallback (react-dom.development.js:250)
    at replayUnitOfWork (react-dom.development.js:18350)
    at renderRoot (react-dom.development.js:19261)
    at performWorkOnRoot (react-dom.development.js:20165)
    at performWork (react-dom.development.js:20075)
    at performSyncWork (react-dom.development.js:20049)
    at requestWork (react-dom.development.js:19904)
    at scheduleWork (react-dom.development.js:19711)
    at scheduleRootUpdate (react-dom.development.js:20415)
    at updateContainerAtExpirationTime (react-dom.development.js:20441)
    at updateContainer (react-dom.development.js:20509)
    at ReactRoot.push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (react-dom.development.js:20820)
    at react-dom.development.js:20974
    at unbatchedUpdates (react-dom.development.js:20292)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:20970)
    at Object.render (react-dom.development.js:21037)
    at Module../src/index.js (index.js:9)
    at __webpack_require__ (bootstrap:781)
    at fn (bootstrap:149)
    at Object.0 (store.js:26)
    at __webpack_require__ (bootstrap:781)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1
ConnectFunction @ connectAdvanced.js:116
updateFunctionComponent @ react-dom.development.js:15034
updateSimpleMemoComponent @ react-dom.development.js:14978
updateMemoComponent @ react-dom.development.js:14891
beginWork @ react-dom.development.js:16041
performUnitOfWork @ react-dom.development.js:19102
workLoop @ react-dom.development.js:19143
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
replayUnitOfWork @ react-dom.development.js:18350
renderRoot @ react-dom.development.js:19261
performWorkOnRoot @ react-dom.development.js:20165
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
requestWork @ react-dom.development.js:19904
scheduleWork @ react-dom.development.js:19711
scheduleRootUpdate @ react-dom.development.js:20415
updateContainerAtExpirationTime @ react-dom.development.js:20441
updateContainer @ react-dom.development.js:20509
push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20820
(anonymous) @ react-dom.development.js:20974
unbatchedUpdates @ react-dom.development.js:20292
legacyRenderSubtreeIntoContainer @ react-dom.development.js:20970
render @ react-dom.development.js:21037
./src/index.js @ index.js:9
__webpack_require__ @ bootstrap:781
fn @ bootstrap:149
0 @ store.js:26
__webpack_require__ @ bootstrap:781
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
Show 3 more frames

The above error occurred in the <ConnectFunction> component:
    in ConnectFunction (at src/index.js:11)
    in Provider (at src/index.js:10)

Consider adding an error boundary to your tree to customize error handling behavior.

The component which I am trying to use connect is this:

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import LiveList from './components/LiveList';
import Topology from './components/Topology';
import EventLog from './components/EventLog';
import NetworkTraffic from './components/NetworkTraffic';
import Maintenance from './components/Maintenance';
import BootstrapMenuBar from './components/menu/BootstrapMenuBar';
import Homepage from './components/home/Homepage';
import Configuration from './components/login-config/Configuration';
import Login from './components/login-config/Login';
import LoginHandler from './components/login-config/LoginHandler';
import { connect } from 'react-redux';

require('es6-promise').polyfill();
require('isomorphic-fetch');

class App extends Component {

  render() {
    return (
        <Router>
          <div className="App">
            <BootstrapMenuBar />
            <div style={appStyle}>
              <Route exact path="/" component={Homepage} />
              <Route path="/livelist" component={LiveList} />
              <Route path="/topology" component={Topology} />
              <Route path="/traffic" component={NetworkTraffic} />
              <Route path="/maintenance" component={Maintenance} />
              <Route path="/log" component={EventLog} />
              <Route path="/config" component={Configuration} />
              <Route path="/login" component={Login} />
              <Route path="/login-handler" component={LoginHandler} />
            </div>
          </div>
        </Router>
    );
  }
}

// CSS Custom App Margins
const appStyle = {
  marginLeft: '24px',
  marginRight: '24px',
  marginBottom: '24px',
  marginTop: '8px'
}


export default connect()(App);

I am providing my store in index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'react-bootstrap';
import 'semantic-ui-css-offline';
import { Provider } from 'react-redux';
import store from './store';

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);

Answer 1

Need to upgrade both react and react-dom:

npm install --save react@latest

npm install --save react-dom@latest

Answer 2

react-redux requires a minumum version of react, as specified in the release notes. In particular, 7.0.3 has a peer dependency on react ^16.8.3.

Instead of downgrading react-redux, (if you can) you should upgrade react:

npm upgrade react react-dom

Answer 3

OK just found a Solution on expo forum and here on StackOverflow. Try Downgrading react-redux to v.6.0.0.

Reason:

connect now uses React.memo() internally, which returns a special object rather than a function.

What To Do:

npm uninstall react-redux -S

npm i react-redux@6.0.0 -S

Answer 4

The problem should be with connect()(App). connect function is expecting at least one parameter which is a function, commonly known as mapStateToProps.

connect(state => state)(App) 
//state => state will giving you all state from store to your component

Unless your App.js requires a state from redux store, else it's not necessarily to connect all your components