electron-devtools-installer not working react

Question

I'm currently starting a new project with electron and react and I don't understand but I'm trying to use React devTools, I've tried some methods and none of them worked.

For instance, I followed here the method of electron-devtools-installer, which can be found here : https://github.com/MarshallOfSound/electron-devtools-installer and when I launch the app the inspector still tells me that

Download the React DevTools for a better development experience: https://reactjs.org/link/react-devtoolsYou might need to use a local HTTP server (instead of file://): https://reactjs.org/link/react-devtools-faq

Here is my main.js :

const { app, BrowserWindow, Notification, ipcMain } = require("electron");
const path = require("path");
const isDev = !app.isPackaged;

const {
  default: installExtension,
  REACT_DEVELOPER_TOOLS,
} = require("electron-devtools-installer");

let createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    backgroundColor: "white",
    title: "TaleSmith",
    icon: path.join(__dirname, "../assets/icons/appIcon.png"),
    webPreferences: {
      nodeIntegration: false,
      worldSafeExecuteJavaScript: true,
      contextIsolation: true, // is a feature that ensures that both your preload scripts and Electron internal logical tun in separate context
      preload: path.join(__dirname, "preload.js"),
    },
  });
  win.loadFile(path.join(__dirname, "..", "src", "index.html"));
  isDev && win.webContents.openDevTools();
};

if (isDev) {
  require("electron-reload")(__dirname, {
    electron: path.join(
      __dirname,
      "..",
      "..",
      "node_modules",
      ".bin",
      "electron",
    ),
  });
}

app.whenReady().then(async () => {
  installExtension(REACT_DEVELOPER_TOOLS)
    .then((name) => console.log(`Added Extension:  ${name}`))
    .catch((err) => console.log("An error occurred: ", err));
  createWindow();
});

ipcMain.on("notify", (_, message) => {
  new Notification({
    title: "Hello World",
    body: message,
  }).show();
});

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

Thanks a lot for your help !

score 0 · Answer 1 · answered Jul 18 '22 at 01:42

Leverage the "dom-ready" event to initiate the dev tools instead of when the app is ready. Give this a try

const {
    app,
    BrowserWindow,
    Notification,
    ipcMain
} = require("electron");
const path = require("path");
const isDev = !app.isPackaged;

const {
    default: installExtension,
    REACT_DEVELOPER_TOOLS,
} = require("electron-devtools-installer");

let createWindow = () => {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        backgroundColor: "white",
        title: "TaleSmith",
        icon: path.join(__dirname, "../assets/icons/appIcon.png"),
        webPreferences: {
            nodeIntegration: false,
            worldSafeExecuteJavaScript: true,
            contextIsolation: true, // is a feature that ensures that both your preload scripts and Electron internal logical tun in separate context
            preload: path.join(__dirname, "preload.js"),
        },
    });
    win.loadFile(path.join(__dirname, "..", "src", "index.html"));

    if (isDev) {
        require("electron-reload")(__dirname, {
            electron: path.join(
                __dirname,
                "..",
                "..",
                "node_modules",
                ".bin",
                "electron",
            ),
        });

        // Errors are thrown if the dev tools are opened
        // before the DOM is ready
        win.webContents.once("dom-ready", async () => {
            await installExtension([REACT_DEVELOPER_TOOLS])
                .then((name) => console.log(`Added Extension: ${name}`))
                .catch((err) => console.log("An error occurred: ", err))
                .finally(() => {
                    win.webContents.openDevTools();
                });
        });
    }
};

app.on("ready", createWindow);

ipcMain.on("notify", (_, message) => {
    new Notification({
        title: "Hello World",
        body: message,
    }).show();
});

app.on("window-all-closed", () => {
    if (process.platform !== "darwin") {
        app.quit();
    }
});

app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow();
    }
});

Thanks for your response. However it did the same... But this time i got a really strange message : (node:6716) ExtensionLoadWarning: Warnings loading extension at C:\Users\Admin\AppData\Roaming\project\extensions\fmkadmapgofadopljbjfkapdkoienihi: Manifest version 2 is deprecated, and support will be removed in 2023. See https://developer.chrome.com/blog/mv2-transition/ for more details. — Occalepsus, Jul 21 '22 at 14:35

electron-devtools-installer not working react

1 Answers1