response-redux [v7.0.2]: Получение «TypeError: Object (...) не является функцией» при переносе экспорта компонента с помощью connect ()

Question

Я пытаюсь добавить избыточность в свой проект, но я застрял в этой глупой ошибке, которую не могу отладить.Когда я пытаюсь экспортировать свой компонент, используя 'connect ()', чтобы получить доступ к хранилищу Redux, я всегда получаю эту ошибку.Это происходит только тогда, когда я использую функцию connect ().Если я снимаю его с кода, он обычно компилируется:

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.

Компонент, который я пытаюсь использовать, подключается так:

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);

Я предоставляю свой магазин в 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

ОК, только что нашел решение на форуме выставки и здесь, на StackOverflow. Попробуйте понизить react-redux до v.6.0.0.

Причина:

connect теперь внутренне использует React.memo (), который возвращает специальный объект, а не функция.

Что делать:

npm uninstall react-redux -S

npm i react-redux@6.0.0 -S

Answer 2

Для

react-redux требуется минимальная версия react, как указано в примечаниях к выпуску .В частности, 7.0.3 имеет одноранговую зависимость от реакции ^16.8.3.

Вместо понижения react-redux, (если вы можете) вы должны обновить react:

npm upgrade react react-dom

Answer 3

Проблема должна быть с connect()(App).connect функция ожидает, по крайней мере, один параметр, который является функцией, обычно известной как mapStateToProps.

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

Если ваш App.js не требует состояния из хранилища redux, иначе это не обязательноconnect все ваши компоненты