React Devtools only appears after a reload

[elvince]

[!IMPORTANT] This is an upstream issue, see https://github.com/electron/electron/issues/41613

---

Hi all,

Thanks for the repo, it is quite straight forward to setup.

However, I can't get the tools to popup in the devtool page until I reload the main page.

If I await installExtension(REACT_DEVELOPER_TOOLS, true), the tools are not loaded at first launch, I need to reload them. If I manually load them await session.defaultSession.loadExtension, evertyhing load fine from scratch.

Any idea how solve this? Maybe a missing await in the installation process? It seems to be a race condition.

Thanks

[JordanDC2]

I am seeing this same issue as well with latest version of electron and electron-devtools-installer.

[vasilecampeanu]

I am seeing this same issue as well with latest version of electron and electron-devtools-installer.

Did you manage to find a fix?

[ehellman]

I am having this issue too.

session.defaultSession.getAllExtensions().map(e => {
  if (e.name === 'React Developer Tools') {
    session.defaultSession.loadExtension(e.path);
  }
});

This works, but should load automatically I think.

[pjmdesi]

Seeing the same issue here. I simply run a reload after a timeout and it seems to do the trick

DEV && setTimeout(() => {
    mainWindow.reload();
}, 500);

[maoryadin]

I am having this issue too.

session.defaultSession.getAllExtensions().map(e => {
  if (e.name === 'React Developer Tools') {
    session.defaultSession.loadExtension(e.path);
  }
});

This works, but should load automatically I think.

Why not just load all?

  session.defaultSession.getAllExtensions().map((e) => {
     session.defaultSession.loadExtension(e.path)
   })

[aymengraoui]

i cant make any extension appear no matter what i do im on electron 31 and i cant find any solution for this

[aluminum1]

Same issue as aymengraoui.

[danthegoodman]

I pasted this workaround and an explanation over in another issue: https://github.com/MarshallOfSound/electron-devtools-installer/issues/238#issuecomment-2227172999

async function loadDevtools() {
  const edi = await import('electron-devtools-installer');
  const installExtension = edi.default.default;
  await installExtension(edi.REDUX_DEVTOOLS);
  await installExtension(edi.REACT_DEVELOPER_TOOLS);

  // hack because extension service workers aren't loaded until after first launch
  const win = new BrowserWindow({
    show: false,
    webPreferences: { devTools: true },
  });
  await win.loadURL('about:blank');
  win.webContents.openDevTools({ mode: 'detach', activate: false });
  await new Promise<void>((resolve, reject) => {
    let checksLeft = 300;
    const interval = setInterval(() => {
      const all = session.defaultSession.serviceWorkers.getAllRunning();
      if (Object.keys(all).length > 0) {
        clearInterval(interval);
        resolve();
      } else {
        checksLeft -= 1;
        if (checksLeft <= 0) {
          clearInterval(interval);
          reject(new Error('react dev tools failed to load a service worker'));
        }
      }
    }, 10);
  });
  win.close();
}

[aymengraoui]

Hi @danthegoodman thanks for the workaround it didn't work for me, the problem with the workers i bumper the checks to 10000 and nothing i might dig into this workaround if i have time, for now i gave up on this i installed extensions i need globally and linked them to my app using urls

[jadyyang]

You should load the react extension before creating the window. It works for me.

[Dedicatus546]

electron 32 could not load any extensions(React DevTools, Vue3 DevTools, Redux DevTools). I had installed them before creating(invoking installExtension method) electron window. it is frustrating...