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

Information is not suffice to conclude the cause.

Sagar Kharche
– Sagar Kharche

2018-08-27 09:23:16 +00:00
Commented Aug 27, 2018 at 9:23 — Sagar Kharche
– Sagar Kharche, Commented Aug 27, 2018 at 9:23
is your rootReducer a function or an object?

Patrick Hund
– Patrick Hund

2018-08-27 09:49:38 +00:00
Commented Aug 27, 2018 at 9:49 — Patrick Hund
– Patrick Hund, Commented Aug 27, 2018 at 9:49
@SagarKharche is the information sufficent now.

aditya kumar
– aditya kumar

2018-08-28 11:40:20 +00:00
Commented Aug 28, 2018 at 11:40 — aditya kumar
– aditya kumar, Commented Aug 28, 2018 at 11:40

Dharman · Accepted Answer · 2020-12-06 13:55:12Z

14

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

edited Dec 6, 2020 at 13:55

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Apr 28, 2019 at 4:30

Michael Morrison

1,2561 gold badge11 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Cody Gray · Accepted Answer · 2020-12-06 13:57:20Z

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.

edited Dec 6, 2020 at 13:57

Cody Gray♦

246k53 gold badges512 silver badges591 bronze badges

answered Dec 6, 2020 at 13:47

S.Gupta

411 bronze badge

1 Comment

Mopparthy Ravindranath Over a year ago

I had a similar issue. I spelt it as composedWithDevTools. Note the extra 'd'

gdbdable · Accepted Answer · 2019-11-21 21:48:54Z

2

This error ocurred when:

react-redux not available in runtime. Please check that it correctly bundled or available as global (if used from CDN)
versions of react, redux incompatible with react-redux. Update some of them to the latest

answered Nov 21, 2019 at 21:48

gdbdable

4,5313 gold badges33 silver badges48 bronze badges

1 Comment

ram Over a year ago

Yes, this is what my issue was. I had imported connect from mongoose and not redux!

Safyan Akram · Accepted Answer · 2020-07-04 05:00:18Z

1

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.

answered Jul 4, 2020 at 5:00

Safyan Akram

92 bronze badges

Comments

Dharman · Accepted Answer · 2021-01-23 11:33:26Z

0

In my case, the error came from misspelling 'composeWithDevTools' I was trying to import 'composeWitdhDevTools' silly me... do check that import.

You can also hover all your imports and see if you actually import the correct methods.. for composeWithDevTools when you do that it should look like this:

(alias) function composeWithDevTools<StoreExt, StateExt>(...funcs: Array<StoreEnhancer<StoreExt>>): StoreEnhancer<StoreExt> (+1 overload)
import composeWithDevTools

edited Jan 23, 2021 at 11:33

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Jan 23, 2021 at 11:27

khpa

791 silver badge6 bronze badges

Comments

Miguel Estrada · Accepted Answer · 2021-10-23 00:28:14Z

0

Solution for me:

import { createStore } from 'redux/lib/redux';

I dont know why but it's work, I was create a rails app with react and react-redux. I got this error 2 times on different apps

answered Oct 23, 2021 at 0:28

Miguel Estrada

11 bronze badge

Comments

darioms12 · Accepted Answer · 2023-03-16 13:49:49Z

0

I had the same problem and after 2 hours of reading the code I realized that it was in the definition of the object that we passed to createSlice(). What I had written was:

const notificationsSlice = createSlice({
  name: 'notifications',
  initialState: [],
  reducer: {...},
  extraReducers: (builder) => {...},
})

If you look closely you will see that "reducer" is written without the "s" at the end. So it should be like this:

const notificationsSlice = createSlice({
  name: 'notifications',
  initialState: [],
  reducers: {...},
  extraReducers: (builder) => {...},
})

The error was triggered when a component tried to dispatch an action that was generated by that reducer.

answered Mar 16, 2023 at 13:49

darioms12

1

Collectives™ on Stack Overflow

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

7 Answers 7

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related