import 'redux-thunk/extend-redux' doesn't work

[ZeJ0hn]

Question

Hi, I use a react app with redux and redux-thunk. We move the app from JS to Typescript.
I found in the source code of extend-redux.d.ts that I need to import the file to have the support ofbindActionCreators with Typescript.

/**
 * Globally alter the Redux `bindActionCreators` and `Dispatch` types to assume
 * that the thunk middleware always exists, for ease of use.
 * This is kept as a separate file that may be optionally imported, to
 * avoid polluting the default types in case the thunk middleware is _not_
 * actually being used.
 *
 * To add these types to your app:
 * import 'redux-thunk/extend-redux'
 */

So I tried to add the import but when I start the app with npm start, I got this error:

Failed to compile.

./src/store/index.tsx
Module not found: Can't resolve 'redux-thunk/extend-redux' in ...

I cannot find how import this module.
Can you help me?

Thank you

[timdorr]

You need to have at least version 2.4.0 installed. But this definitely works, as we do this on our own test suite.

[ZeJ0hn]

@timdorr Thank you for your answer. But I have the version 2.4.1.

I create my app using create-react-app my-app --template typescript
I add "redux-thunk": "^2.4.1" in my package.json.

Is there anything to configure to be able to use your module in this context?

Thank you for your help,

[timdorr]

I'm not sure, as the file definitely exists in that version: https://unpkg.com/browse/redux-thunk@2.4.1/

[markerikson]

As usual, we'd need to see a repro of the issue to better understand why this might not be working.

[ZeJ0hn]

I tried on a new empty project and got the same issue.
Here the different steps I used:

npx create-react-app my-app --template typescript
cd my-app
npm install --save redux-thunk
npm install 

Edit the file src/index.tsx and add import 'redux-thunk/extend-redux' in the import
Now,

npm start

And this error occurs:

Compiled with problems:X

ERROR in ./src/index.tsx 9:0-34

Module not found: Error: Can't resolve 'redux-thunk/extend-redux' in '/Users/john/my-app/src'

[ZeJ0hn]

Hi,

I tried to add this in the package.json.

  "exports": {
    "./extend-redux": "./extend-redux.d.ts"
  }

It seems to work but I have another issue during the npm start:

Module parse failed: Unexpected token (13:8)
File was processed with these loaders:
 * ./node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
|  * import 'redux-thunk/extend-redux'
|  */
> declare module 'redux' {

[timdorr]

Yeah, that's just tricking the webpack loader stack to use the built-in loader, which isn't Typescript-aware.

Does import type 'redux-thunk/extend-redux' work?

[ZeJ0hn]

Unfortunatelly, it doesn't help :-(

[markerikson]

@ZeJ0hn in that case could you put together a sandbox or project that shows the error happening?

[ZeJ0hn]

@markerikson you have an example here https://github.com/ZeJ0hn/redux-thunk-issue

I just followed my previous instructions :-)

[timdorr]

Ah, it's Webpack's fault, as it's getting to the loader before tsc does. Not really a redux-thunk issue, just with the build tooling.

You can work around it with a triple-slash directive. Just add this at the top of your file or in react-app-env.d.ts

/// <reference types="redux-thunk/extend-redux" />

[ZeJ0hn]

Thank you for your help!