I am currently working on developing SPFX components using typescript and webpack.
My goal is to integrate redux toolkit into my project, but it is causing compilation errors.
Here is what I have done so far:
- Created the project structure using yo
- Installed
redux,react-redux, and@reduxjs/toolkit(usingpnpm) - Followed the Redux Toolkit TypeScript Quick Start by creating the file
store.tswith the provided content.
import { configureStore } from '@reduxjs/toolkit'
// ...
const store = configureStore({
reducer: {
}
})
// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch
When attempting to build the project using gulp build, it fails with multiple errors:
(list of error messages removed for brevity)
Additionally, I am receiving type inference errors in VS Code:
The inferred type of 'store' cannot be named without a reference to '.pnpm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6d1f080918154019051803062d5f435e435d">[email protected]</a>/node_modules/redux-thunk'. This is likely not portable. A type annotation is necessary.
To address this issue, I found that installing redux-thunk and adding import 'redux-thunk' at the beginning of the file resolved the error.
Could someone provide guidance on the correct setup for my project?
For reference, here is a repository containing the code that reproduces the error
[Edit] Switching back to using classic npm resulted in similar issues (with the exception of displaying local file paths instead of linked ones when using pnpm).