Recently, I started incorporating ESLint rules into the project that utilizes TypeScript. However, I encountered an issue with Redux and Redux-Thunk types. Whenever I attempt to import any type from Redux or Redux-Thunk, ESLint flags an error:
import { Action, AnyAction, applyMiddleware, combineReducers, createStore } from 'redux';
import thunkMiddleware, { ThunkAction, ThunkDispatch } from 'redux-thunk';
The ESLint error message reads as follows:
>> Action not found in 'redux'
>> AnyAction not found in 'redux'
>> ThunkAction not found in 'redux-thunk'
>> ThunkDispatch not found in 'redux-thunk'
In an effort to resolve this issue, my initial instinct was to install types for Redux and Thunk. Strangely enough, both packages indicated that Redux now comes bundled with its types automatically, negating the need for a separate installation.
It's worth noting that despite the ESLint errors, the application functions smoothly and all necessary types are present.
To work around the issue, I made the following adjustment in the .eslintrc file:
settings: {
'import/core-modules': ['redux', 'redux-thunk']
}
Question: Having implemented this workaround, I am curious about the proper way to set up the ESLint configuration without resorting to such solutions?
UPD
This is my eslintrc file content:
{
"root": true,
// Other configuration options...
}
Upon including the settings section to reference the tsconfig file:
"settings": {
"import/resolver": {
"typescript": {
"project": "tsconfig.json"
}
}
}
A new ESLint error surfaces:
Resolve error: typescript with invalid interface loaded as resolver