TypeError: Object(...) is not a function in react-redux

Question

While I was trying to createStore in react-redux I get this strange error. I don't know why as I did this before in different app there it was working fine.

TypeError: Object(...) is not a function
./src/index.js
C:/projects/facebook/facebook-react/src/index.js:14
  11 | import rootReducer from './rootReducer';
  12 | import registerServiceWorker from './registerServiceWorker';
  13 | 
> 14 | const store = createStore(
  15 |     rootReducer,
  16 |     composeWithDevtools(applyMiddleware(thunk))
  17 | );
View compiled
▶ 6 stack frames were collapsed.

this is my file

index.js

import { createStore, applyMiddleware} from 'redux';
import { composeWithDevtools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import { Provider } from 'react-redux';
import App from './App';
import rootReducer from './rootReducer';
import registerServiceWorker from './registerServiceWorker';

const store = createStore(
    rootReducer,
    composeWithDevtools(applyMiddleware(thunk))
);


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

rootReducer

import { combineReducers } from 'redux'; import user from './reducers/user';

export default combineReducers({
    user });

reducer/user

import { USER_LOGGED_IN } from '../types';

export default function user(state = {}, action={}) {
    switch (action.type) {
        case USER_LOGGED_IN:
            return action.user;
        default:
            return state;
    } }

Answer 1

I had the same issue: I could get it to work on a test app and couldnt move it across to my main project. Checked all of the code 100 times and researched widely but couldnt find anything to make connect() work without it throwing "TypeError: Object(…) is not a function"

In the end all that was required was to update react and react-DOM in my main project as i was running a new version of redux with old react.

Just run the below in your project folder.

npm update

Answer 2

This error ocurred when:

1. react-redux not available in runtime. Please check that it correctly bundled or available as global (if used from CDN)

2. versions of react, redux incompatible with react-redux. Update some of them to the latest

Answer 3

If you are viewing this message now that is around 2020 with the same problem above then make sure in import statement

import { composeWithDevtools } from "redux-devtools-extension";

should be

import { composeWithDevTools } from "redux-devtools-extension";

The name is case-sensitive. You need to make sure that you get the capitalization of "DevTools" correct.

Answer 4

I was using react-boilerplate library and did "npm update" which broke "aws-amplify" for some reason. So I unstaged my package.json and package-lock.json and went back to the previous package.json and package-lock.json ran "npm install". Suddenly "Object(...) is not a function" error got resolved.