TypeError: Cannot read properties of undefined (reading 'merge')

[karanshah229]

Getting this error on Next.js project:

Code for the rtkQueryErrorLogger:

import { isRejectedWithValue } from '@reduxjs/toolkit';

import { logger } from 'src/utils/logger';

import type { Middleware, MiddlewareAPI } from '@reduxjs/toolkit';

export const rtkQueryErrorLogger: Middleware = (_api: MiddlewareAPI) => (next) => (action) => {
  if (isRejectedWithValue(action)) {
    logger.error({
      message: `Error in API call ${action?.meta?.baseQueryMeta?.request?.url}`,
      error: action,
    });
  }

  return next(action);
};

Stuck on this for a while, any help is appreciated.

cc: @phryneas

[EskiMojo14]

if you remove the rtkQueryErrorLogger middleware from your store, does the error still occur?

i don't see anything immediately wrong with the middleware itself.

[karanshah229]

The trouble is that it's an intermittent issue.
So I can't reproduce it every time and hence can't tell if it solved the issue or not.

I can post some snippets if you need of the store, rootAPI or anything else.
Can 't give the repo since it's a work repo

[karanshah229]

I think this is causing the issue:

extractRehydrationInfo(action, { reducerPath }) {
  if (action.type === HYDRATE) {
    return action.payload[reducerPath];
  }
  return undefined;
},

The reason I had done this is that ESLint throws an error otherwise:

Expected to return a value at the end of method 'extractRehydrationInfo'

What should be the default return instead ?

[EskiMojo14]

returning undefined is fine, since it's the same as not returning as far as the caller is concerned.

the only place in the codebase i can find merge being accessed is below:

redux-toolkit/packages/toolkit/src/query/core/buildSlice.ts

Lines 178 to 180 in 24fc343

	const { merge } = definitions[
	meta.arg.endpointName
	] as QueryDefinition<any, any, any, any>

This would suggest you're somehow getting a query thunk fulfilled for an endpointName that isn't actually in the endpoint definitions, which is very odd.

Would you be able to post your endpoint definitions?

If it's intermittent, it could be related to something in your build process, such as hot module reloading.

[karanshah229]

Store.ts

import { configureStore } from '@reduxjs/toolkit';
import { setupListeners } from '@reduxjs/toolkit/query';
import { Context, createWrapper } from 'next-redux-wrapper';

import { rtkQueryErrorLogger } from './middlewares/rtkQueryErrorLogger';
import { rootApi } from './services/common/rootApi';
import { isDev } from './utils/common';

export const makeStore = (ctx?: Context) =>
  configureStore({
    reducer: {
      [rootApi.reducerPath]: rootApi.reducer,
    },
    middleware: (getDefaultMiddleware) =>
      getDefaultMiddleware({
        thunk: {
          extraArgument: ctx,
        },
        serializableCheck: false,
      })
        .concat(rootApi.middleware)
        .concat(rtkQueryErrorLogger),
    devTools: isDev,
  });

const store = makeStore();
setupListeners(store.dispatch);

export type AppStore = ReturnType<typeof makeStore>;
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = AppStore['dispatch'];

export default store;

export const wrapper = createWrapper<AppStore>(makeStore, {
  debug: isDev,
});

---

rootApi.ts

import { createApi, retry } from '@reduxjs/toolkit/query/react';
import { HYDRATE } from 'next-redux-wrapper';

import { isServer } from 'src/utils/common';

import { clientBaseQueryWithReAuth } from './clientFetchBaseQueryWithReAuth';
import { serverBaseQueryWithReAuth } from './serverFetchBaseQueryWithReAuth';

// initialize an empty api service that we'll inject endpoints into dynamically
export const rootApi = createApi({
  reducerPath: 'rootApi',
  baseQuery: retry(isServer ? serverBaseQueryWithReAuth : clientBaseQueryWithReAuth, {
    maxRetries: 0,
  }),
  keepUnusedDataFor: 60, // 1 minute
  /* istanbul ignore next */
  extractRehydrationInfo(action, { reducerPath }) {
    if (action.type === HYDRATE) {
      return action.payload[reducerPath];
    }
  },
  endpoints: () => ({}),
});

I won't be able to give the endpoint definition, but can give you the structure:
We have one rootApi.ts file and we load all our endpoint definitions in that using injectEndpoints

[EskiMojo14]

everything you've posted seems fine, so i can only assume that the issue lies with one of your endpoint definitions. make sure you're not doing something strange like conditionally defining an endpoint definition. other than that, it's hard to advise further without code or a reproduction (or a Replay)

[karanshah229]

If you can just list possible causes, I can test for them on my end.

[markerikson]

Can you record a Replay of this happening and share that? See https://replay.io/record-bugs

[Sigkar]

I am currently experiencing this same error, causing me quite a bit of grief. It started after I made changes to my api which may involve multiple endpoints with the same name

I won't be able to give the endpoint definition, but can give you the structure:
We have one rootApi.ts file and we load all our endpoint definitions in that using injectEndpoints

I was set up like this, however I had to make some changes to our injections due to some of our op names between configuration files being duplicated. Wasn't something I was aware of in the spec until I was trying to use the second api's endpoint which shared the first APIs op name.

Our endpoints with the same op names would use the first instance of the op names endpoint/types for obvious reasons.

We're a bit behind on versions as well.

"@reduxjs/toolkit": "^1.8.0",
"@rtk-query/codegen-openapi": "1.0.0",

[karanshah229]

@Sigkar

I was set up like this, however I had to make some changes to our injections due to some of our op names between configuration files being duplicated.

1. We don't have duplicate endpoint names.
2. What changes did you make ?
3. What is op names ?

[Sigkar]

@karanshah229

2. I ended up fixing this by double checking my middlewares/reducers. I had a few missing
3. Op Names are just endpoint names in AWS API Gateway - sorry

[markerikson]

Closing due to lack of reproduction.