When type: "module" is used in root package.json, redux-thunk cannot be applied without crashing

[dancherb]

Bug Report

Package name / version

redux-thunk@2.4.2

Description

Steps to reproduce

1. Add "type": "module" to the root package.json of your project.
2. Update next.config.js to use export default nextConfig instead of module.exports = nextConfig
3. Receive the error TypeError: middleware is not a function when attempting to apply redux-thunk.

import thunk from "redux-thunk"
...
createStore(
        createRootReducer(),
        initialState, 
        applyMiddleware(
            thunk,
        )
)

This persists with any combination of using thunk, for example importing thunk as default or * as thunk or applying thunk.default.

Everything's cool again once removing type: "module" from package.json but this limits the capabilities of your project.

Environment

• OS: Windows 10
• Node/npm version: 16.16.0
• Browser: Chrome

[EskiMojo14]

Does it work with v3.0.0-beta.0?

[dancherb]

Good shout but nope - same error

[EskiMojo14]

hmm, you may also need redux@v5.0.0-beta.0

[markerikson]

@dancherb can you provide an actual project that demonstrates this happening? Also, are you using Redux Toolkit, or just redux core?

[0x80]

Looks like we're running into this problem on an old project that is using redux core. We are not planning to migrate it to redux toolkit.

If I have "checkJs" enabled on a Typescript project, it also complains that .default does not exist, so I end up doing this:

import thunk from "redux-thunk";

// @ts-expect-error default does not exist according to TS
const thunkFixed = typeof thunk === "function" ? thunk : thunk.default;

export const initializeStore = (preloadedState) => {
  return createStore(
    reducer,
    preloadedState,
    composeWithDevTools(applyMiddleware(thunkFixed))
  );
};

With the beta versions of redux+redux-thunk I can use the named import for thunk and then it seems to work. But with these new versions I do not know how to use composeWithDevTools from @redux-devtools/extension as the signature is now not compatible anymore...

[markerikson]

@0x80 : define "not compatible" ?

Also, is there a reason why you don't want to use RTK? Note that you can use RTK's configureStore without even switching any of your other Redux logic, and then you wouldn't have to worry about calling this thunk setup yourself.

[0x80]

It seemed that the typescript compiler was complaining that the returned value from applyMiddleware from the beta was not compatible with what composeDevTools is expecting.

It is messy legacy code I'm patching as a temporary workaround until we rewrite the whole thing, so my aim is to touch as little code as possible. I assumed I had to change a lot of code if I wanted to transition to RTK.

Thanks for the tip I'll give that a try then.

[markerikson]

Yeah, please see our migration guide in the docs:

• https://redux.js.org/usage/migrating-to-modern-redux

and note that all of it can be done incrementally. RTK modernizes Redux syntax and usage patterns, but it's all cross-compatible. You can switch any one particular file (store setup, a reducer, whatever) at a time, and both old and new code will coexist just fine.

Given that, yes, swapping the store setup to use RTK's configureStore would be a very surgical and targeted change that can be done without changing any other files.