I'm building some SPFX components (typescript + webpack based).
I'd like to include redux toolkit in the project, but it break compilation.
What I did :
- scaffolded the project using yo
- installed
reduxreact-reduxand@reduxjs/toolkit(usingpnpmif it matters) - followed the Redux Toolkit TypeScript Quick Start by creating the file
store.tswith this 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 I try to build the project gulp build, it fails with a bunch of errors :
[15:15:13] Error - [tsc] node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@reduxjs/toolkit/dist/configureStore.d.ts(1,13): error TS1005: '=' expected.
[15:15:13] Error - [tsc] node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@reduxjs/toolkit/dist/configureStore.d.ts(1,143): error TS1005: ';' expected.
[15:15:13] Error - [tsc] node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@reduxjs/toolkit/dist/configureStore.d.ts(2,13): error TS1005: '=' expected.
[15:15:13] Error - [tsc] node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@reduxjs/toolkit/dist/configureStore.d.ts(2,57): error TS1005: ';' expected.
[15:15:13] Error - [tsc] node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@reduxjs/toolkit/dist/configureStore.d.ts(3,13): error TS1005: '=' expected.
[15:15:13] Error - [tsc] node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@reduxjs/toolkit/dist/configureStore.d.ts(3,70): error TS1005: ';' expected.
[15:15:13] Error - [tsc] node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@reduxjs/toolkit/dist/configureStore.d.ts(4,13): error TS1005: '=' expected.
[15:15:13] Error - [tsc] node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@reduxjs/toolkit/dist/configureStore.d.ts(4,54): error TS1005: ';' expected.
[15:15:13] Error - [tsc] node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@reduxjs/toolkit/dist/createAction.d.ts(1,13): error TS1005: '=' expected.
[15:15:13] Error - [tsc] node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@reduxjs/toolkit/dist/createAction.d.ts(1,29): error TS1005: ';' expected.
... dozens of similar lines removed ...
I also get VS Code complains regarding type inference:
The inferred type of 'store' cannot be named without a reference to '.pnpm/[email protected]/node_modules/redux-thunk'. This is likely not portable. A type annotation is necessary.
This later error seems to be solved by installing redux-thunk and by adding import 'redux-thunk' at the beginning of the file.
How to properly setup my project ?
If it helps, here's a repository that reproduce the error
[Edit] Reverting to classic npm behave similarly (except for the file paths showing local copy of ts file instead of the linked one when using pnpm)
