middleware is not a function about redux-thunk HOT 34 CLOSED

use “import thunk from "redux-thunk";”
not “import {thunk} from "redux-thunk";”

from redux-thunk.

After facing recently same issue and none of the above worked for me I've tried with importing just {createLogger} that sorted the issue when new logger instance was passed to applyMiddleware.

import { applyMiddleware, createStore } from 'redux';
import promise from "redux-promise-middleware";
import thunk from "redux-thunk"
import { createLogger } from "redux-logger";

import reducer from "./reducers";
const middleware = applyMiddleware(  promise(),  thunk,  createLogger() );
export default createStore(reducer, middleware);

Works under Typescript and Babel because in my attempts to isolate the route cause I've switched to each of them. The issue is observed with latest redux packages at the time of my writing and solution is tested only against them

"react-redux": "^5.0.5",
"redux": "^3.7.1",
"redux-logger": "^3.0.6",
"redux-promise-middleware": "^4.3.0",
"redux-thunk": "^2.2.0"

from redux-thunk.

@born2net

I don’t understand what you’re trying to do.
You can either

import thunk from 'redux-thunk'

in an ES modules environment, or

var thunk = require('redux-thunk').default

in a CommonJS environment.

Why aren’t these cases working for you?

from redux-thunk.

ah ha - microsoft/TypeScript#2242 (comment). Note: if you're using typescript instead of babel as your transpiler, you have to use import thunkMiddleware = require("redux-thunk"); to get the default module.

from redux-thunk.

Redux Thunk currently uses CommonJS.
It does not explicitly export a “default”.
We should probably start using ES modules internally and export a CommonJS compat build with default as the exported key, as well as an ES modules build, but this can only be done after bumping a version because it breaks backwards compat.

from redux-thunk.

It's provably too late but with typescript tsc and the dt~redux-thunk typings I could fix it by doing:
import { default as thunk } from "redux-thunk";
and then
createStore(reducer, applyMiddleware(thunk));

from redux-thunk.

Here another permutation for anyone using commonjs modules with Typescript. Works for me... YMMV.

typings install redux-thunk --save

Then:

import * as thunk from 'redux-thunk';

redux.createStore(rootReducer, applyMiddleware(
  thunk.default   // <-- the aforementioned `.default`
));

from redux-thunk.

I've followed this thread but I can't seem to resolve my issue.

I'm getting the middleware is not a function console error after upgrading to Babel 6. My original code used the ES6 import

import thunk from 'redux-thunk'

And I've tried the ES5 + default

const thunk = require('redux-thunk').default;

I was on redux-thunk v1 but have upgraded to v2.1.0 and redux v3.5.2.

I'm stumped...

EDIT:

Facepalm. It wasn't thunk afterall, but logger where I am using ES5 require.

const logger = require('../middleware/logger')

becomes

const logger = require('../middleware/logger').default;

Hope this helps someone else. 👍

from redux-thunk.

I just looked at the PR and it was already in this format. While my typescript compiler 1.7.6 seems to accept either version, web storm 11 complains that thunk is not exported default. And my understanding was that you couldn't use the import default syntax without declaring an default export. Here is the info from the TypeScript specification. So I do not understand why it was changed. The only thing i can tell from this an the other issue is that web pack couldn't properly load the file based on the import statement which sounds like a webpack issue. Could someone either correct my understanding of the TypeScript spec or reopen this issue?

from redux-thunk.

@mattdell facepalm +1, thanks for the .default hint :)

from redux-thunk.

Thank you oupsss ..

from redux-thunk.

for reference, logger is defined as follows:

function logger({ getState }) {
    "use strict";
    return (next) => (action) => {
        console.log("will dispatch", action);
        let returnValue = next(action);
        console.log("state after dispatch", getState());
        return returnValue;
    };
}

from redux-thunk.

hrmm ... very strange -- when I console.log(thunk) I get undefined. I'm importing it with import thunk from "redux-thunk";

from redux-thunk.

If I do import * as thunk from "redux-thunk"; I can console.log(thunk) and get: [Function: thunkMiddleware]. However, if I console.log(thunk.default), I get undefined.

from redux-thunk.

Also note: if you use the require above, tsc barfs about the transpile, but it does indeed execute:

Argument of type 'typeof "redux-thunk"' is not assignable to parameter of type 'Middleware'.
  Property 'name' is missing in type 'typeof "redux-thunk"'.

from redux-thunk.

Did I mention? This would be a great thing to add to the repo: #31 (comment). Maybe I'll add a PR.

from redux-thunk.

more reference on this here: https://angularclass.com/the-state-of-typescript-packages/

from redux-thunk.

That still doesn't fix the typing issues. To use the import thunk syntax thunk should be exported as default. If I change the export statement in the typing file to export defaut and get rid of the equal size, it works. This is the same approach that redux-logger took.

from redux-thunk.

any fix for this as I still can't use Redux with systemjs, have to use commonjs with ng2 becuase of this as this works fine in commonjs:

import * as thunkMiddleware from 'redux-thunk';

but will fail with system.
tried

use “import thunk from "redux-thunk";”

but no luck (yes using TypeScript as well)

regards

Sean

from redux-thunk.

@johnjelinek I can't use require as I am trying to switch to systemjs from cjs so this wont work

import thunkMiddleware = require("redux-thunk")

any other workaround?

regards

from redux-thunk.

@gaearon any idea when the fix of exporting default be put in place as this is preventing us from moving to system from cjs

from redux-thunk.

Also make sure you’re using 2.x.

from redux-thunk.

https://github.com/gaearon/redux-thunk#note-on-2x-update

from redux-thunk.

TX, you got it, I was one version behind... 2.x fixed it!!!!!

from redux-thunk.

Glad to hear it! Cheers.

from redux-thunk.

@zourtney i tried this also, but i cant do this

import {loadCourses} from './actions/courseActions';
store.dispatch(loadCourses());

export function loadCourses() {
  return function name(dispatch) {
    return courseApi.getAllCourses()
      .then(courses => {
        dispatch(loadCoursesSuccess(courses));
      })
      .catch(error => {
        throw (error);
      });
  };
}

[ts] Argument of type '(dispatch: any) => Promise' is not assignable to parameter of type 'Action'.
Property 'type' is missing in type '(dispatch: any) => Promise'.
(alias) loadCourses(): (dispatch: any) => Promise

from redux-thunk.

@Truedrog, I tried for a while but can't reproduce that. I can't tell if it's a problem with the code, or just incorrect typings...

At any rate, I don't think it's related to import / middleware hookup.

from redux-thunk.

Thank you @savovsky for your reply. i had same issue in one of my projects and got resolved.

from redux-thunk.

Thanks @savovsky for your solution. It worked for me!

from redux-thunk.

think you from PARIS .... Jeff

from redux-thunk.

use “import thunk from "redux-thunk";”
not “import {thunk} from "redux-thunk";”

Thanks so much. Is there a way to make my linter recognize default imports properly? It's often at the core of these bugs. I found a plugin, but I'm not totally sure how to install it.

from redux-thunk.

I had the same problem, and finally, I fixed the version of this :
[email protected]
and it worked!

from redux-thunk.

I had the same problem with [email protected] I fixed it by doing the following.

1- By reading a little bit of documentation here: https://redux.js.org/recipes/configuring-your-store

2- By add the following code

import {createStore, applyMiddleware, compose } from 'redux';
import thunkMiddleware from 'redux-thunk';

const middlewareEnhancer = applyMiddleware(logger, thunkMiddleware );
const composedEnhancers = compose(middlewareEnhancer,window.REDUX_DEVTOOLS_EXTENSION && window.REDUX_DEVTOOLS_EXTENSION());

const store = createStore(rootReducer,undefined, composedEnhancers);

from redux-thunk.

Simply add .default to the createStore function and solve the error Middlewareis not a function. This solve my issue.

from redux-thunk.