REACT_DEVELOPER_TOOLS is not loading

[yougotwill]

Hi thanks for making this great package!

I have tested REACT_DEVELOPER_TOOLS and fmkadmapgofadopljbjfkapdkoienihi and the extension does not load in the Chrome Dev Tools Inspector. REDUX_DEVTOOLS does work so the package is working correctly.

[tomgao365]

Hello, I just tested it. After electron started, Chrome Developer Tools did not load the react extension. But after Ctrl+R refreshed the page, the react extension was loaded. Try it.

[Imaginativeone]

$ npm run start

start ts-node ./.erb/scripts/check-port-in-use.js && npm run start:renderer

start:renderer cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack serve --config ./.erb/configs/webpack.config.renderer.dev.ts

Starting preload.js builder... Starting Main Process...

start:preload cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.preload.dev.ts

start:main cross-env NODE_ENV=development electronmon -r ts-node/register/transpile-only .

[webpack-dev-server] Project is running at: [webpack-dev-server] Loopback: http://localhost:1212/ [webpack-dev-server] On Your Network (IPv4): http://10.60.41.111:1212/ [webpack-dev-server] Content not from webpack is served from 'C:\Users\dfranklin\source\repos\Education-and-Practice\Electron\electron-boilerplate-01\public' directory [webpack-dev-server] 404s will fallback to '/index.html' [electronmon] waiting for a change to restart it

(node:31864) ExtensionLoadWarning: Warnings loading extension at C:\Users\dfranklin\AppData\Roaming\Electron\extensions\fmkadmapgofadopljbjfkapdkoienihi: Permission 'scripting' is unknown or URL pattern is malformed.

(Use electron --trace-warnings ... to show where the warning was created) Added Extension: React Developer Tools (node:31864) ExtensionLoadWarning: Warnings loading extension at C:\Users\dfranklin\AppData\Roaming\Electron\extensions\fmkadmapgofadopljbjfkapdkoienihi: Permission 'scripting' is unknown or URL pattern is malformed.

10:35:04.754 > Skip checkForUpdates because application is not packed and dev update config is not forced 10:35:04.757 > checkForUpdatesAndNotify called, downloadPromise is null IPC test: ping [31864:0711/103515.618:ERROR:extensions_browser_client.cc(69)] Extension Error: OTR: false Level: 2 Source: chrome-extension://bhcnidiofgpchmofnhkloaljobhomioo/build/background.js Message: Uncaught TypeError: Cannot read properties of undefined (reading 'ExecutionWorld') ID: bhcnidiofgpchmofnhkloaljobhomioo Type: RuntimeError Context: chrome-extension://bhcnidiofgpchmofnhkloaljobhomioo/build/background.js Stack Trace: { Line: 1 Column: 1 URL: chrome-extension://bhcnidiofgpchmofnhkloaljobhomioo/build/background.js Function: (anonymous function) } [31864:0711/103515.618:ERROR:extension_registrar.cc(539)] Failed to unregister service worker for extension bhcnidiofgpchmofnhkloaljobhomioo [31864:0711/103520.992:ERROR:CONSOLE(2)] "Electron sandboxed_renderer.bundle.js script failed to run", source: node:electron/js2c/sandbox_bundle (2) [31864:0711/103520.992:ERROR:CONSOLE(2)] "TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))", source: node:electron/js2c/sandbox_bundle (2) [31864:0711/103521.003:ERROR:extensions_browser_client.cc(69)] Extension Error: OTR: false Level: 2 Source: chrome-extension://bhcnidiofgpchmofnhkloaljobhomioo/build/background.js Message: Uncaught TypeError: Cannot read properties of undefined (reading 'ExecutionWorld') ID: bhcnidiofgpchmofnhkloaljobhomioo Type: RuntimeError Context: chrome-extension://bhcnidiofgpchmofnhkloaljobhomioo/build/background.js Stack Trace: { Line: 1 Column: 1 URL: chrome-extension://bhcnidiofgpchmofnhkloaljobhomioo/build/background.js Function: (anonymous function) } [31864:0711/103521.004:ERROR:extensions_browser_client.cc(69)] Extension Error: OTR: false Level: 1 Source: manifest.json Message: Service worker registration failed. Status code: 15 ID: bhcnidiofgpchmofnhkloaljobhomioo Type: ManifestError IPC test: ping [31864:0711/103547.829:ERROR:CONSOLE(2)] "Electron sandboxed_renderer.bundle.js script failed to run", source: node:electron/js2c/sandbox_bundle (2) [31864:0711/103547.829:ERROR:CONSOLE(2)] "TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))", source: node:electron/js2c/sandbox_bundle (2) [electronmon] app exited with code 0, waiting for change to restart it [webpack-dev-server] Gracefully shutting down. To force exit, press ^C again. Please wait...

[Imaginativeone]

main.ts

/* eslint global-require: off, no-console: off, promise/always-return: off */

/**
 * This module executes inside of electron's main process. You can start
 * electron renderer process from here and communicate with the other processes
 * through IPC.
 *
 * When running `npm run build` or `npm run build:main`, this file is compiled to
 * `./src/main.js` using webpack. This gives us some performance wins.
 */
import path from 'path';
import { app, BrowserWindow, shell, ipcMain } from 'electron';
import { autoUpdater } from 'electron-updater';
import log from 'electron-log';
import MenuBuilder from './menu';
import { resolveHtmlPath } from './util';
import { installExtension, REACT_DEVELOPER_TOOLS } from '@tomjs/electron-devtools-installer';

class AppUpdater {
  constructor() {
    log.transports.file.level = 'info';
    autoUpdater.logger = log;
    autoUpdater.checkForUpdatesAndNotify();
  }
}

let mainWindow: BrowserWindow | null = null;

ipcMain.on('ipc-example', async (event, arg) => {
  const msgTemplate = (pingPong: string) => `IPC test: ${pingPong}`;
  console.log(msgTemplate(arg));
  event.reply('ipc-example', msgTemplate('pong'));
});

if (process.env.NODE_ENV === 'production') {
  const sourceMapSupport = require('source-map-support');
  sourceMapSupport.install();
}

const isDebug =
  process.env.NODE_ENV === 'development' || process.env.DEBUG_PROD === 'true';

if (isDebug) {
  require('electron-debug')();
}

const installExtensions = async () => {
  const installer = require('electron-devtools-installer');
  const forceDownload = !!process.env.UPGRADE_EXTENSIONS;
  const extensions = ['REACT_DEVELOPER_TOOLS'];

  return installer
    .default(
      extensions.map((name) => installer[name]),
      forceDownload,
    )
    .catch(console.log);
};

const createWindow = async () => {
  if (isDebug) {
    await installExtensions();
  }

  const RESOURCES_PATH = app.isPackaged
    ? path.join(process.resourcesPath, 'assets')
    : path.join(__dirname, '../../assets');

  const getAssetPath = (...paths: string[]): string => {
    return path.join(RESOURCES_PATH, ...paths);
  };

  mainWindow = new BrowserWindow({
    show: false,
    width: 1024,
    height: 728,
    icon: getAssetPath('icon.png'),
    webPreferences: {
      preload: app.isPackaged
        ? path.join(__dirname, 'preload.js')
        : path.join(__dirname, '../../.erb/dll/preload.js'),
    },
  });

  mainWindow.loadURL(resolveHtmlPath('index.html'));

  mainWindow.on('ready-to-show', () => {
    if (!mainWindow) {
      throw new Error('"mainWindow" is not defined');
    }
    if (process.env.START_MINIMIZED) {
      mainWindow.minimize();
    } else {
      mainWindow.show();
    }
  });

  mainWindow.on('closed', () => {
    mainWindow = null;
  });

  const menuBuilder = new MenuBuilder(mainWindow);
  menuBuilder.buildMenu();

  // Open urls in the user's browser
  mainWindow.webContents.setWindowOpenHandler((edata) => {
    shell.openExternal(edata.url);
    return { action: 'deny' };
  });

  // Remove this if your app does not use auto updates
  // eslint-disable-next-line
  new AppUpdater();
};

/**
 * Add event listeners...
 */

app.on('window-all-closed', () => {
  // Respect the OSX convention of having the application in memory even
  // after all windows have been closed
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app
  .whenReady()
  .then(() => {
    installExtension(REACT_DEVELOPER_TOOLS) // equals to installExtension("nhdogjmejiglipccpnnnanhbledajbpd")
      .then(ext => console.log(`Added Extension:  ${ext.name}`))
      .catch(err => console.log('An error occurred: ', err));
    })
  .then(() => {
    createWindow();
    app.on('activate', () => {
      // On macOS it's common to re-create a window in the app when the
      // dock icon is clicked and there are no other windows open.
      if (mainWindow === null) createWindow();
    });
  })
  .catch(console.log);

// import { app } from 'electron';
// import { installExtension, VUEJS_DEVTOOLS } from '@tomjs/electron-devtools-installer';

// // Install Vue.js DevTools
// app.whenReady().then(() => {
//   installExtension(VUEJS_DEVTOOLS) // equals to installExtension("nhdogjmejiglipccpnnnanhbledajbpd")
//     .then(ext => console.log(`Added Extension:  ${ext.name}`))
//     .catch(err => console.log('An error occurred: ', err));
// });

[Imaginativeone]

It seems that my REACT_DEVELOPER_TOOLS aren't installing. Please help.

[tomgao365]

@Imaginativeone Hello, please try to use the electron API to load the extension directly to see if there is any problem. Replace

installExtension(REACT_DEVELOPER_TOOLS) // equals to installExtension("nhdogjmejiglipccpnnnanhbledajbpd")
      .then(ext => console.log(`Added Extension:  ${ext.name}`))
      .catch(err => console.log('An error occurred: ', err));
    })

To

 import { session} from 'electron';
   session.defaultSession
      .loadExtension(
        `C:\\Users\\dfranklin\\AppData\\Roaming\\Electron\\extensions\\fmkadmapgofadopljbjfkapdkoienihi`,
      )
    .then(ext => console.log(`Added Extension:  ${ext.name}`))
     .catch(err => console.log('An error occurred: ', err));

[Imaginativeone]

/* eslint global-require: off, no-console: off, promise/always-return: off */

/**
 * This module executes inside of electron's main process. You can start
 * electron renderer process from here and communicate with the other processes
 * through IPC.
 *
 * When running `npm run build` or `npm run build:main`, this file is compiled to
 * `./src/main.js` using webpack. This gives us some performance wins.
 */
import path from 'path';
import { app, BrowserWindow, shell, ipcMain, session } from 'electron';
import { autoUpdater } from 'electron-updater';
import log from 'electron-log';
import MenuBuilder from './menu';
import { resolveHtmlPath } from './util';
import { installExtension, REACT_DEVELOPER_TOOLS } from '@tomjs/electron-devtools-installer';

class AppUpdater {
  constructor() {
    log.transports.file.level = 'info';
    autoUpdater.logger = log;
    autoUpdater.checkForUpdatesAndNotify();
  }
}

let mainWindow: BrowserWindow | null = null;

ipcMain.on('ipc-example', async (event, arg) => {
  const msgTemplate = (pingPong: string) => `IPC test: ${pingPong}`;
  console.log(msgTemplate(arg));
  event.reply('ipc-example', msgTemplate('pong'));
});

if (process.env.NODE_ENV === 'production') {
  const sourceMapSupport = require('source-map-support');
  sourceMapSupport.install();
}

const isDebug =
  process.env.NODE_ENV === 'development' || process.env.DEBUG_PROD === 'true';

if (isDebug) {
  require('electron-debug')();
}

const installExtensions = async () => {
  const installer = require('electron-devtools-installer');
  const forceDownload = !!process.env.UPGRADE_EXTENSIONS;
  const extensions = ['REACT_DEVELOPER_TOOLS'];

  return installer
    .default(
      extensions.map((name) => installer[name]),
      forceDownload,
    )
    .catch(console.log);
};

const createWindow = async () => {
  if (isDebug) {
    await installExtensions();
  }

  const RESOURCES_PATH = app.isPackaged
    ? path.join(process.resourcesPath, 'assets')
    : path.join(__dirname, '../../assets');

  const getAssetPath = (...paths: string[]): string => {
    return path.join(RESOURCES_PATH, ...paths);
  };

  mainWindow = new BrowserWindow({
    show: false,
    width: 1024,
    height: 728,
    icon: getAssetPath('icon.png'),
    webPreferences: {
      preload: app.isPackaged
        ? path.join(__dirname, 'preload.js')
        : path.join(__dirname, '../../.erb/dll/preload.js'),
    },
  });

  mainWindow.loadURL(resolveHtmlPath('index.html'));

  mainWindow.on('ready-to-show', () => {
    if (!mainWindow) {
      throw new Error('"mainWindow" is not defined');
    }
    if (process.env.START_MINIMIZED) {
      mainWindow.minimize();
    } else {
      mainWindow.show();
    }
  });

  mainWindow.on('closed', () => {
    mainWindow = null;
  });

  const menuBuilder = new MenuBuilder(mainWindow);
  menuBuilder.buildMenu();

  // Open urls in the user's browser
  mainWindow.webContents.setWindowOpenHandler((edata) => {
    shell.openExternal(edata.url);
    return { action: 'deny' };
  });

  // Remove this if your app does not use auto updates
  // eslint-disable-next-line
  new AppUpdater();
};

/**
 * Add event listeners...
 */

app.on('window-all-closed', () => {
  // Respect the OSX convention of having the application in memory even
  // after all windows have been closed
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app
  .whenReady()
  .then(() => {
    // installExtension(REACT_DEVELOPER_TOOLS) // equals to installExtension("nhdogjmejiglipccpnnnanhbledajbpd")
    //   .then(ext => console.log(`Added Extension:  ${ext.name}`))
    //   .catch(err => console.log('An error occurred: ', err));
    session.defaultSession
      .loadExtension(
        `C:\\Users\\dfranklin\\AppData\\Roaming\\Electron\\extensions\\fmkadmapgofadopljbjfkapdkoienihi`,
      )
    .then(ext => console.log(`Added Extension:  ${ext.name}`))
    .catch(err => console.log('An error occurred: ', err));
    })
  .then(() => {
    createWindow();
    app.on('activate', () => {
      // On macOS it's common to re-create a window in the app when the
      // dock icon is clicked and there are no other windows open.
      if (mainWindow === null) createWindow();
    });
  })
  .catch(console.log);

// import { app } from 'electron';
// import { installExtension, VUEJS_DEVTOOLS } from '@tomjs/electron-devtools-installer';

// // Install Vue.js DevTools
// app.whenReady().then(() => {
//   installExtension(VUEJS_DEVTOOLS) // equals to installExtension("nhdogjmejiglipccpnnnanhbledajbpd")
//     .then(ext => console.log(`Added Extension:  ${ext.name}`))
//     .catch(err => console.log('An error occurred: ', err));
// });

[Imaginativeone]

$ npm run start

start ts-node ./.erb/scripts/check-port-in-use.js && npm run start:renderer

start:renderer cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack serve --config ./.erb/configs/webpack.config.renderer.dev.ts

Starting preload.js builder... Starting Main Process...

start:preload cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.preload.dev.ts

start:main cross-env NODE_ENV=development electronmon -r ts-node/register/transpile-only .

[webpack-dev-server] Project is running at: [webpack-dev-server] Loopback: http://localhost:1212/ [webpack-dev-server] On Your Network (IPv4): http://10.60.41.111:1212/ [webpack-dev-server] Content not from webpack is served from 'C:\Users\dfranklin\source\repos\Education-and-Practice\Electron\electron-boilerplate-01\public' directory [webpack-dev-server] 404s will fallback to '/index.html' [electronmon] waiting for a change to restart it

(node:44336) ExtensionLoadWarning: Warnings loading extension at C:\Users\dfranklin\AppData\Roaming\Electron\extensions\fmkadmapgofadopljbjfkapdkoienihi: Permission 'scripting' is unknown or URL pattern is malformed.

(Use electron --trace-warnings ... to show where the warning was created) Added Extension: React Developer Tools (node:44336) ExtensionLoadWarning: Warnings loading extension at C:\Users\dfranklin\AppData\Roaming\Electron\extensions\fmkadmapgofadopljbjfkapdkoienihi: Permission 'scripting' is unknown or URL pattern is malformed.

11:15:05.887 > Skip checkForUpdates because application is not packed and dev update config is not forced 11:15:05.890 > checkForUpdatesAndNotify called, downloadPromise is null IPC test: ping [44336:0711/111516.407:ERROR:extensions_browser_client.cc(69)] Extension Error: OTR: false Level: 2 Source: chrome-extension://bhcnidiofgpchmofnhkloaljobhomioo/build/background.js Message: Uncaught TypeError: Cannot read properties of undefined (reading 'ExecutionWorld') ID: bhcnidiofgpchmofnhkloaljobhomioo Type: RuntimeError Context: chrome-extension://bhcnidiofgpchmofnhkloaljobhomioo/build/background.js Stack Trace: { Line: 1 Column: 1 URL: chrome-extension://bhcnidiofgpchmofnhkloaljobhomioo/build/background.js Function: (anonymous function) } [44336:0711/111516.408:ERROR:extension_registrar.cc(539)] Failed to unregister service worker for extension bhcnidiofgpchmofnhkloaljobhomioo [44336:0711/111521.711:ERROR:CONSOLE(2)] "Electron sandboxed_renderer.bundle.js script failed to run", source: node:electron/js2c/sandbox_bundle (2) [44336:0711/111521.711:ERROR:CONSOLE(2)] "TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))", source: node:electron/js2c/sandbox_bundle (2) [44336:0711/111521.719:ERROR:extensions_browser_client.cc(69)] Extension Error: OTR: false Level: 2 Source: chrome-extension://bhcnidiofgpchmofnhkloaljobhomioo/build/background.js Message: Uncaught TypeError: Cannot read properties of undefined (reading 'ExecutionWorld') ID: bhcnidiofgpchmofnhkloaljobhomioo Type: RuntimeError Context: chrome-extension://bhcnidiofgpchmofnhkloaljobhomioo/build/background.js Stack Trace: { Line: 1 Column: 1 URL: chrome-extension://bhcnidiofgpchmofnhkloaljobhomioo/build/background.js Function: (anonymous function) } [44336:0711/111521.719:ERROR:extensions_browser_client.cc(69)] Extension Error: OTR: false Level: 1 Source: manifest.json Message: Service worker registration failed. Status code: 15 ID: bhcnidiofgpchmofnhkloaljobhomioo Type: ManifestError

[tomgao365]

@Imaginativeone First load

After press F5 or Ctrl+R

[Imaginativeone]

import { app, BrowserWindow, shell, ipcMain } from 'electron'
import { createRequire } from 'node:module'
import { fileURLToPath } from 'node:url'
import path from 'node:path'
import os from 'node:os'
import { update } from './update'
import { installExtension, REACT_DEVELOPER_TOOLS } from '@tomjs/electron-devtools-installer';

const require = createRequire(import.meta.url)
const __dirname = path.dirname(fileURLToPath(import.meta.url))

// The built directory structure
//
// ├─┬ dist-electron
// │ ├─┬ main
// │ │ └── index.js    > Electron-Main
// │ └─┬ preload
// │   └── index.mjs   > Preload-Scripts
// ├─┬ dist
// │ └── index.html    > Electron-Renderer
//
process.env.APP_ROOT = path.join(__dirname, '../..')

export const MAIN_DIST = path.join(process.env.APP_ROOT, 'dist-electron')
export const RENDERER_DIST = path.join(process.env.APP_ROOT, 'dist')
export const VITE_DEV_SERVER_URL = process.env.VITE_DEV_SERVER_URL

process.env.VITE_PUBLIC = VITE_DEV_SERVER_URL
  ? path.join(process.env.APP_ROOT, 'public')
  : RENDERER_DIST

// Disable GPU Acceleration for Windows 7
if (os.release().startsWith('6.1')) app.disableHardwareAcceleration()

// Set application name for Windows 10+ notifications
if (process.platform === 'win32') app.setAppUserModelId(app.getName())

if (!app.requestSingleInstanceLock()) {
  app.quit()
  process.exit(0)
}

let win: BrowserWindow | null = null
const preload = path.join(__dirname, '../preload/index.mjs')
const indexHtml = path.join(RENDERER_DIST, 'index.html')

async function createWindow() {
  win = new BrowserWindow({
    title: 'Main window',
    icon: path.join(process.env.VITE_PUBLIC, 'favicon.ico'),
    webPreferences: {
      preload,
      // Warning: Enable nodeIntegration and disable contextIsolation is not secure in production
      // nodeIntegration: true,

      // Consider using contextBridge.exposeInMainWorld
      // Read more on https://www.electronjs.org/docs/latest/tutorial/context-isolation
      // contextIsolation: false,
    },
  })

  if (VITE_DEV_SERVER_URL) { // #298
    win.loadURL(VITE_DEV_SERVER_URL)
    // Open devTool if the app is not packaged
    win.webContents.openDevTools()
  } else {
    win.loadFile(indexHtml)
  }

  // Test actively push message to the Electron-Renderer
  win.webContents.on('did-finish-load', () => {
    win?.webContents.send('main-process-message', new Date().toLocaleString())
  })

  // Make all links open with the browser, not with the application
  win.webContents.setWindowOpenHandler(({ url }) => {
    if (url.startsWith('https:')) shell.openExternal(url)
    return { action: 'deny' }
  })

  // Auto update
  update(win)
}

// createWindow, then Install React DevTools
app.whenReady().then(createWindow)
  .then(() => {
    // installExtension(REACT_DEVELOPER_TOOLS) // equals to installExtension("nhdogjmejiglipccpnnnanhbledajbpd")
    //   .then(ext => console.log(`Added Extension:  ${ext.name}`))
    //   .catch(err => console.log('An error occurred: ', err));
    session.defaultSession.loadExtension(
        `C:\\Users\\dfranklin\\AppData\\Roaming\\Electron\\extensions\\fmkadmapgofadopljbjfkapdkoienihi`,
      )
    .then(ext => console.log(`Added Extension:  ${ext.name}`))
    .catch(err => console.log('An error occurred: ', err));
});

// app.whenReady().then(createWindow)

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

app.on('second-instance', () => {
  if (win) {
    // Focus on the main window if the user tried to open another
    if (win.isMinimized()) win.restore()
    win.focus()
  }
})

app.on('activate', () => {
  const allWindows = BrowserWindow.getAllWindows()
  if (allWindows.length) {
    allWindows[0].focus()
  } else {
    createWindow()
  }
})

// New window example arg: new windows url
ipcMain.handle('open-win', (_, arg) => {
  const childWindow = new BrowserWindow({
    webPreferences: {
      preload,
      nodeIntegration: true,
      contextIsolation: false,
    },
  })

  if (VITE_DEV_SERVER_URL) {
    childWindow.loadURL(`${VITE_DEV_SERVER_URL}#${arg}`)
  } else {
    childWindow.loadFile(indexHtml, { hash: arg })
  }
})

// import { app } from 'electron';
// import { installExtension, REACT_DEVELOPER_TOOLS } from '@tomjs/electron-devtools-installer';

// Install React DevTools
// app.whenReady().then(() => {
//   installExtension(REACT_DEVELOPER_TOOLS) // equals to installExtension("nhdogjmejiglipccpnnnanhbledajbpd")
//     .then(ext => console.log(`Added Extension:  ${ext.name}`))
//     .catch(err => console.log('An error occurred: ', err));
// });

[Imaginativeone]

$ npm run dev

electron-vite-react@2.2.0 dev vite

vite v5.3.2 building for development...

watching for file changes... vite v5.3.2 building for development...

watching for file changes...

VITE v5.3.2 ready in 495 ms

➜ Local: http://localhost:5173/ ➜ Network: use --host to expose

build started...

build started... transforming... transforming... ✓ 1 modules transformed. rendering chunks... ✓ 2 modules transformed. computing gzip size... rendering chunks... dist-electron/preload/index.mjs 10.40 kB │ gzip: 4.43 kB │ map: 5.62 kB built in 166ms. computing gzip size... dist-electron/main/index.js 4.94 kB │ gzip: 1.85 kB │ map: 10.97 kB built in 172ms.

(node:40056) UnhandledPromiseRejectionWarning: ReferenceError: session is not defined at file:///C:/Users/dfranklin/source/repos/Education-and-Practice/Electron/electron-vite-react/dist-electron/main/index.js:99:3 (Use electron --trace-warnings ... to show where the warning was created) (node:40056) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1) [40056:0711/114733.170:ERROR:CONSOLE(1)] "Request Autofill.enable failed. {"code":-32601,"message":"'Autofill.enable' wasn't found"}", source: devtools://devtools/bundled/core/protocol_client/protocol_client.js (1) ERROR: The process "40056" not found.

[tomgao365]

@Imaginativeone

(node:40056) UnhandledPromiseRejectionWarning: ReferenceError: session is not defined

You should import session

 import { session} from 'electron';

This plugin just downloads the corresponding extension before calling the session.defaultSession.loadExtension method. Check your computer

1. Check if the extension is downloaded successfully, for example, check if the path C:\Users\dfranklin\AppData\Roaming\Electron\extensions\fmkadmapgofadopljbjfkapdkoienihi is decompressed normally
2. Check if session.defaultSession.loadExtension is successful
3. Refresh the page and check if React Develop Tools is loaded

[Imaginativeone]

[Imaginativeone]

Aaahh...it's not loading new stuff there. Gotta figure out why not.

[Imaginativeone]

Are you open to posting a working demo app?

[Imaginativeone]

Never mind...found it.

[tomgao365]

@Imaginativeone You can try pnpm create @tomjs/app@latest

electron-react.zip

[tomgao365]

@Imaginativeone Good luck, I'm going to sleep.