I am working on an Electron application with React and Vite, and I have three main issues. Before I explain the problems, I will introduce the technologies I am using to clarify the issues and the reasons to find a solution from someone with expertise, as I have tried to solve them repeatedly without success and have spent several days without benefit.

I am using the electron-vite library to integrate Vite with React in an Electron application. Additionally, I am using the electron-devtools-installer library to integrate the React DevTools into the application.

Regarding the versions of the technologies, I am using the latest versions of Node, Electron-Vite, Electron, and the Electron-DevTools-Installer library. All my versions are up to date.

Issue 1:

When I installed the electron-devtools-installer library and ran the application, there was no problem initially. However, the problem occurs when I open the devtools of the application. Then, an issue appears in the VSCode terminal, and this is the error I encountered:

[9357:0627/115720.674580:ERROR:CONSOLE(1)] "Uncaught (in promise) TypeError: Failed to fetch", source: devtools://devtools/bundled/panels/elements/elements.js (1)
[9357:0627/115720.833000:ERROR:CONSOLE(2)] "Electron sandboxed_renderer.bundle.js script failed to run", source: node:electron/js2c/sandbox_bundle (2)
[9357:0627/115720.833040:ERROR:CONSOLE(2)] "TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))", source: node:electron/js2c/sandbox_bundle (2)

Issue 2:

When I reload the application using Command + R on my Mac while the devtool of electron app still opened, other issues appear in the terminal:

[9357:0627/115903.857206:ERROR:extensions_browser_client.cc(67)] Extension Error:
  OTR:     false
  Level:   2
  Source:  
  Message: Error in event handler: TypeError: Cannot read properties of undefined (reading 'setIcon')
    at background_setExtensionIconAndPopup (chrome-extension://jkanjhgeghnbljpnokjcfeaoajgicjio/build/background.js:1:1158)
    at chrome-extension://jkanjhgeghnbljpnokjcfeaoajgicjio/build/background.js:1:5018
    at chrome-extension://jkanjhgeghnbljpnokjcfeaoajgicjio/build/background.js:1:5081
  ID:      jkanjhgeghnbljpnokjcfeaoajgicjio
  Type:    RuntimeError
  Context: 
  Stack Trace: 
    {
      Line:     0
      Column:   1
      URL:      
      Function: (anonymous function)
    }
[9357:0627/115903.899054:ERROR:extensions_browser_client.cc(67)] Extension Error:
  OTR:     false
  Level:   2
  Source:  
  Message: Error in event handler: TypeError: Cannot read properties of undefined (reading 'setIcon')
    at background_setExtensionIconAndPopup (chrome-extension://jkanjhgeghnbljpnokjcfeaoajgicjio/build/background.js:1:1158)
    at chrome-extension://jkanjhgeghnbljpnokjcfeaoajgicjio/build/background.js:1:5018
    at chrome-extension://jkanjhgeghnbljpnokjcfeaoajgicjio/build/background.js:1:5081
  ID:      jkanjhgeghnbljpnokjcfeaoajgicjio
  Type:    RuntimeError
  Context: 
  Stack Trace: 
    {
      Line:     0
      Column:   1
      URL:      
      Function: (anonymous function)
    }

Issue 3:

I am unsure of the reason for this, but to make the React DevTools appear, I have to reload the application for them to show up. They do not appear the first time after launching the application. I found this problem without a solution in the electron-devtools-installer library. The issue link is here.

I have tried to resolve and investigate these issues, but unfortunately, I couldn’t find a solution. Additionally, for the React DevTools, I tried the existing solutions and my own methods to display them without reloading the application, but I was unsuccessful. I do not like the random solutions or using setInterval. I want to fix this issue without using such functions.