DevTools extention does not load

[TheAutomaTom]

Describe the bug
electron-devtools-installer's VUEJS3_DEVTOOLS extension does not load.

To Reproduce
Steps to reproduce the behavior:

1. Fork and clone the repo.
2. Uncomment lines 48 to 57 of packages\main\src\index.ts
3. Add requirements, npm i electron-devtools-installer (also tried as dev dependency)
4. Download packages, npm i
5. ctrl+shift+P => Reload developer window to remove error at import statement.
6. Debug in dev mode, either by F5 or npm run watch
7. See error in terminal, "Failed install extension: TypeError: installExtension is not a function."

Expected behavior
No error reported in the terminal, and devtools would display a "Vue" tab.

Additional context
I notice that going to the definition of electron-devtools-installer only shows a function named intall(). Changing the call to this didn't solve the problem. The packages' docs say to use installExtention(). I have not tried with any other dev tools, as I only use Vue 3.

I was installing electron-devtools-installer ^3.2.0, but after seeing v3.2.0 is labelled "build: failing," I rolled back to versions 3.1 and 3.0, with no positive result.

[Tanimodori]

This is happening on my side. I change the installer to use a local one, and adjusted the show code of devtools. Now I get 95% of success chance of it.

[TheAutomaTom]

@Tanimodori are you describe "not using the extension?" I notice v3.2.0 has been released for 2 years. This is really my first experience with electron or that package... I wonder where the fault is?

[TheAutomaTom]

Yup, no extension works fine! Electron's docs outline an easy path to success. I'm sure the extension adds some convenience... but it's not working.

[cawa-93]

This should work. module.default.default 🤯🤔

if (import.meta.env.DEV) {
  app
    .whenReady()
    .then(() => import('electron-devtools-installer'))
    .then(module => {
      console.log(module);
      return module.default.default(module.default.VUEJS3_DEVTOOLS, {
        loadExtensionOptions: {
          allowFileAccess: true,
        },
      });
    })
    .catch(e => console.error('Failed install extension:', e));
}

Same issue as here, I assume

[Tanimodori]

@cawa-93 For that auto updater issue, as long as you set esModuleInterop to true in tsconfig, it will be resolved.

[cawa-93]

@cawa-93 For that auto updater issue, as long as you set esModuleInterop to true in tsconfig, it will be resolved.

But it did't fixed this issue. 🤔 Ok. Maybe auto updater issue is't relevant to this

[Tanimodori]

I personally loads the extension from locally installed Chrome extension dir:

if (import.meta.env.DEV) {
  app.whenReady().then(() => {
    if (!process.env['APPDATA']) {
      throw new Error('Could not load extensions from local');
    }
    const extPath = join(
      process.env['APPDATA'],
      '../Local/Google/Chrome/User Data/Default/Extensions/nhdogjmejiglipccpnnnanhbledajbpd',
    );
    const extVersions = readdirSync(extPath);
    const VUE_DEVTOOLS_PATH = join(extPath, extVersions[0])
    session.defaultSession.loadExtension(VUE_DEVTOOLS_PATH, {
      allowFileAccess: true,
    });
  });
}

More info: vuejs/devtools#2035 (comment)

[acurrieclark]

I found the same issue when I was installing Redux Dev Tools. For some reason the default import from electron-devtools-installer wasn't working as I expected. I had to reference the default directly:

import installExtension, { REDUX_DEVTOOLS } from "electron-devtools-installer";

app.whenReady().then(() => {
  ((installExtension as any).default as typeof installExtension)(REDUX_DEVTOOLS)
    .then(name => console.log(`Added Extension:  ${name}`))
    .catch(err => console.log("An error occurred: ", err));
});

[Tanimodori]

@acurrieclark Your issue is a duplicate of vitejs/vite#2139, which is caused by diffrent default export path between commonJs and ESM. You can turn on TS esModuleInterop flag to automatically do the default export unwrap for you.

[acurrieclark]

@Tanimodori thats really good to know! Thank you

[FlashAndromeda]

Hi! I managed to solve this issue by using the solution found in this comment. Turns out you have to manually set the extension ID. I still however get the error about the extension working on manifest v2 and not v3. Vue devtools has a working manifest v3 fork however I don't know how to use it here. Would be nice to update the template with a fix for this and using manifest v3 fork.