tsconfig.json composite: true cause some types errors

[bylly1]

when i create a new vite react project tsconfig.json comes with composite: true which cause some types error on apis and also store

This is my tsconfig

/* tsconfig.app.json*/
{
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "src",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"]
}

I receive this error:

export const authApi = api.injectEndpoints({
   endpoints: (builder) => ({
     login: builder.mutation<TokenProps, LoginProps>({
    query: (credentials) => ({
      url: `${ENDPOINT}/token/`,
      method: "POST",
      body: credentials,
    }),
     }),
   })
})
export const { useLoginMutation  } = authApi;  

I receive this type error:

/* "The inferred type of 'useLoginMutation' cannot be named without a reference 
to '../../../../../node_modules/@reduxjs/toolkit/dist/query/react/buildHooks'. This is likely not portable. 
A type annotation is necessary" */

[aryaemami59]

@bylly1 Can you run this command in your CLI and try again to see if it fixes your issue?

npm install https://pkg.csb.dev/reduxjs/redux-toolkit/commit/e7b851eb/@reduxjs/toolkit

[bylly1]

@bylly1 Can you run this command in your CLI and try again to see if it fixes your issue?

npm install https://pkg.csb.dev/reduxjs/redux-toolkit/commit/e7b851eb/@reduxjs/toolkit

I installed the fix and indeed solve the problem on the api but still I have problem on store.ts

This is my store.ts

const store = configureStore({
    reducer: persistedReducer,
    devTools: import.meta.env.NODE_ENV !== "production",
    middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware({
            serializableCheck: {
                ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
            },
            immutableCheck: true,
        }).concat(api.middleware, rtkQueryErrorLogger),
});

And this is the type error that I have:

/*
Exported variable 'store' has or is using name 'ConfigProps' from external module "...project_path/src/redux/exampleSlice" but cannot be named.
*/

[EskiMojo14]

@bylly1 that's from your own app - just export the interface it's asking for

[aryaemami59]

@bylly1 Yup, you can either export the ConfigProps interface or you might be able to solve it by converting it to a type alias.

[bylly1]

@bylly1 Yup, you can either export the ConfigProps interface or you might be able to solve it by converting it to a type alias.

Thank you for helping me. Yes, if I convert slices interfaces into type solve the store error, but I still don't like that I need to replace interface with type

[aryaemami59]

@bylly1 In that case your best bet is to just export the interface.

[bylly1]

@bylly1 In that case your best bet is to just export the interface.

Yes, you are right. Thank you! Your fix will be added in the next version of redux toolkit or I will need to install it every time I create a new project?

[aryaemami59]

@bylly1 I'm not sure yet, it's in the middle of being reviewed so it might, I can leave a comment on this issue if it gets included in the next release.

[markerikson]

It'll definitely be part of the next release, yeah.

[markerikson]

Fixed in https://github.com/reduxjs/redux-toolkit/releases/tag/v2.2.7 !