[SOLVED] Showing animated circles. No errors in console and store working normally

Showing animated circles. No errors in console and store working normally

Framkeworks used: React + Redux + Electron (+ Express)

Suddently, in the place of the usual redux dev tools, an animation of concentric circles is shown.

(See screenshot)

Has anyone seen this before? Dev tools started behaving like this yesterday, before they were fine.

This is the function that loads the extensions in electron/main.ts:

const addReactReduxDevTools = async (): Promise<void> => {
    const options = {
        loadExtensionOptions: { allowFileAccess: true },
    };
    try {
        const reactDevTools = await installExtension(REACT_DEVELOPER_TOOLS, options);
        console.log(`Extension: ${reactDevTools}....${colors.magenta}`, 'added!');
        const reduxDevTools = await installExtension(REDUX_DEVTOOLS, options);
        console.log(`Extension: ${reduxDevTools}...........${colors.magenta}`, 'added!');
    } catch (err) {
        console.log(`${colors.red}An error occurred`);
        console.log(err);
    }
};

app.whenReady().then(async () => {
    if (withDevTools) {
        await addReactReduxDevTools();
        console.log(`${colors.cyan}React dev server starting...........`);
    }
});

this is my redux/store.ts:

import { createStore, applyMiddleware, combineReducers, compose } from 'redux';
import thunk from 'redux-thunk';
import { routerMiddleware } from 'connected-react-router';
import reducers from '../reducers';
import { routerReducer as router, history } from '../reducers/router';

const slices = combineReducers({
    appState: combineReducers(reducers),
    router,
});

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    ? /* istanbul ignore next */
      window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
          trace: true,
          traceLimit: 25,
      })
    : compose;

const middlewares = [applyMiddleware(thunk, routerMiddleware(history))];

export const store = createStore(slices, composeEnhancers(...middlewares));
export { history };

relevant dependencies versions:

{
      "electron": "13.5.1",
      "electron-context-menu": "3.1.1",
      "electron-devtools-installer": "3.2.0",
      "react": "17.0.2",
      "react-redux": "7.2.4",
      "redux": "4.1.0",
      "redux-thunk": "2.3.0"
}

Considerations:

There are no errors or warnings in the console (the ones you see in the image have been there since the beginning, months ago)
Redux store is working normally
No 'store could not be found' message shown.
console logging window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ shows it exists
Tried with window.__REDUX_DEVTOOLS_EXTENSION__ instead, same result
console logging store.getState() returns the expected state

See if anybody has experienced this before and how they worked it out.. Happy to provide more info if needed.

Thanks peeps!

Solution

Solved it. My electron app code is a monorepo organised in react app and several (micro)services. I removed all all node-modules and run a fresh bootstrap. Something must have happened with the packages symlinks.

That is it.