Inferred type from createAsyncThunk causing TypeScript error: "The inferred type of ... cannot be named without a reference to ..."

[sammyers]

Trying to use createAsyncThunk in TypeScript, with a pretty basic use case:

export const fetchStationSpecs = createAsyncThunk("stations/fetchStationSpecs", async () => {
  const response = await new TestingDaemonApiRequest("station_specs").doFetch(true);
  const stations = (await response.json()).data as IStationCommandMap;
  return stations;
});

tsc throws this error:

The inferred type of 'fetchStationSpecs' cannot be named without a reference to '../../../../../../../build/js/rush_temp/node_modules/.pnpm/nexus.skyd.io/redux-thunk/2.3.0/node_modules/redux-thunk'. This is likely not portable. A type annotation is necessary.

This looks to be due to some trickiness with transitive dependencies as described here - the inferred return type from createAsyncThunk relies on the ThunkDispatch type from redux-thunk, which is unavailable to my package since it's a transitive dependency (this may not be an issue for other build setups, but appears to be a common class of problem for monorepos using pnpm or similar systems).

Fortunately, this problem completely goes away if ThunkDispatch is exported directly from Redux Toolkit (thus making it available to the package that depends on it), which I think would be useful to developers for making thunk-related utilities anyway. Going to make the shortest pull request ever to fix this.

[ellisio]

@sammyers I am getting this error in a PNPM monorepo with the following code when having "declaration": "true" enabled in my tsconfig.json. I'm turning this on because I'm trying to export what I've built as a package so we can reuse it on multiple projects outside of this monorepo.

export const process = createAsyncThunk("queue/process",  async ({ requestId, handler }: QueueProcessArgs, thunkApi) => {
    // ... handler logic
});

The error:

src/slice.ts(26,14): error TS2742: The inferred type of 'process' cannot be named without a reference to '../../../node_modules/@reduxjs/toolkit/dist/createAsyncThunk'. This is likely not portable. A type annotation is necessary.

Package versions:

➜  pnpm why immer @reactjs/toolkit -r
Legend: production dependency, optional only, dev only

[email protected] /acme/react-queue

devDependencies:
immer 10.0.3

[email protected] /acme/react-queue/examples/app

dependencies:
@acme/react-queue link:../../packages/react-queue
└─┬ @reduxjs/toolkit 2.0.1
  └── immer 10.0.3

@acme/[email protected] /acme/react-queue/packages/react-queue

dependencies:
@reduxjs/toolkit 2.0.1
└── immer 10.0.3

Not really sure what to do here, I've tried creating a <reference />, importing createAsyncThunk at the top of the file, etc. No love.

Edit: Just needed some coffee... Looks like the following fixed it:

type State = {
  status: string;
};

type QueueProcessArgs = {
  requestId: string;
  handler: QueueHandler;
}

export const process: AsyncThunk<
  void,
  QueueProcessArgs,
  {
    state: State;
  }
> = createAsyncThunk(
  // ...
);