Answer a question

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 redux react-redux and @reduxjs/toolkit (using pnpm if it matters)
• followed the Redux Toolkit TypeScript Quick Start by creating the file store.ts with 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/@reduxjs+toolkit@1.6.1_react-redux@7.2.4+react@16.9.0/node_modules/@reduxjs/toolkit/dist/configureStore.d.ts(1,13): error TS1005: '=' expected.
[15:15:13] Error - [tsc] node_modules/.pnpm/@reduxjs+toolkit@1.6.1_react-redux@7.2.4+react@16.9.0/node_modules/@reduxjs/toolkit/dist/configureStore.d.ts(1,143): error TS1005: ';' expected.
[15:15:13] Error - [tsc] node_modules/.pnpm/@reduxjs+toolkit@1.6.1_react-redux@7.2.4+react@16.9.0/node_modules/@reduxjs/toolkit/dist/configureStore.d.ts(2,13): error TS1005: '=' expected.
[15:15:13] Error - [tsc] node_modules/.pnpm/@reduxjs+toolkit@1.6.1_react-redux@7.2.4+react@16.9.0/node_modules/@reduxjs/toolkit/dist/configureStore.d.ts(2,57): error TS1005: ';' expected.
[15:15:13] Error - [tsc] node_modules/.pnpm/@reduxjs+toolkit@1.6.1_react-redux@7.2.4+react@16.9.0/node_modules/@reduxjs/toolkit/dist/configureStore.d.ts(3,13): error TS1005: '=' expected.
[15:15:13] Error - [tsc] node_modules/.pnpm/@reduxjs+toolkit@1.6.1_react-redux@7.2.4+react@16.9.0/node_modules/@reduxjs/toolkit/dist/configureStore.d.ts(3,70): error TS1005: ';' expected.
[15:15:13] Error - [tsc] node_modules/.pnpm/@reduxjs+toolkit@1.6.1_react-redux@7.2.4+react@16.9.0/node_modules/@reduxjs/toolkit/dist/configureStore.d.ts(4,13): error TS1005: '=' expected.
[15:15:13] Error - [tsc] node_modules/.pnpm/@reduxjs+toolkit@1.6.1_react-redux@7.2.4+react@16.9.0/node_modules/@reduxjs/toolkit/dist/configureStore.d.ts(4,54): error TS1005: ';' expected.
[15:15:13] Error - [tsc] node_modules/.pnpm/@reduxjs+toolkit@1.6.1_react-redux@7.2.4+react@16.9.0/node_modules/@reduxjs/toolkit/dist/createAction.d.ts(1,13): error TS1005: '=' expected.
[15:15:13] Error - [tsc] node_modules/.pnpm/@reduxjs+toolkit@1.6.1_react-redux@7.2.4+react@16.9.0/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/redux-thunk@2.3.0/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)

Answers

I found the solution.

The root cause is due to the syntax used in react redux which requires typescript 3.8 or later.

Specifically, import type wasn't allow before.

The SPFX projects are scaffolded with a dependency to typescript 3.7.

The solution is then to upgrade the build tools of SPFX projects :

npm remove @microsoft/rush-stack-compiler-3.7
npm install @microsoft/rush-stack-compiler-3.9 --save-dev

Also, have to update the tsconfig.json file to fix the path to the correct build tools version :

{
  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.9/includes/tsconfig-web.json",
  "compilerOptions": { .. }
}

Solution found in the post Use Different Versions of TypeScript in SPFx projects