@redux-devtools/remote using cjs file from @redux-devtools/utils in nodejs esm app

[stefanomiccoli]

im working on an unsual setup where i have a nodejs application, configured with typescript and esm, that uses redux-toolkit for some internal state management.

For debugging purposes I wanted to use @redux-devtools/remote together with @redux-devtools/cli .

This is how I setup the store

import { configureStore } from '@reduxjs/toolkit';
import { devToolsEnhancer } from '@redux-devtools/remote';
import featureAReducer from '../feature-a/feature-a.slice.js';
import featureBReducer from '../feature-b/feature-b.slice.js';
import listenerMiddleware from './listener.middleware.js';

export const store = configureStore({
  reducer: {
    feature-a: featureAReducer,
    feature-b: featureBReducer,
  },
  devTools: false,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().prepend(listenerMiddleware.middleware),
  enhancers: (getDefaultEnhancers) => getDefaultEnhancers().concat(devToolsEnhancer({ realtime: true, hostname: 'localhost', port: 8000 })),
});
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

however when I run the application, I get the following error

/app/node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]_3xpo55mq4ushvu6pjvzxfgxjni/node_modules/@redux-devtools/utils/lib/cjs/index.js:27
var _nonSecure = require("nanoid/non-secure");
                 ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /app/node_modules/.pnpm/[email protected]/node_modules/nanoid/non-secure/index.js from /app/node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]_3xpo55mq4ushvu6pjvzxfgxjni/node_modules/@redux-devtools/utils/lib/cjs/index.js not supported.
Instead change the require of /app/node_modules/.pnpm/[email protected]/node_modules/nanoid/non-secure/index.js in /app/node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]_3xpo55mq4ushvu6pjvzxfgxjni/node_modules/@redux-devtools/utils/lib/cjs/index.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/app/node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]_3xpo55mq4ushvu6pjvzxfgxjni/node_modules/@redux-devtools/utils/lib/cjs/index.js:27:18) {
  code: 'ERR_REQUIRE_ESM'
}

Node.js v20.18.3

Now, since my app is configured to use esm and both @redux-devtools/remote and @redux-devtools/utils export both cjs and esm, why is @redux-devtools/utils/lib/cjs/index.js used instead of @redux-devtools/utils/lib/esm/index.js?
Do I need to configure something explicitly?