Latest version is failing to install dev tools:

[cawa-93]

Latest version is failing to install dev tools:

An error occurred:  Error: Invalid header: Does not start with Cr24
    at crxToZip (z:\MyApp\node_modules\unzip-crx-3\dist\index.js:32:15)
    at z:\MyApp\node_modules\unzip-crx-3\dist\index.js:69:32
    at callHanler (z:\MyApp\node_modules\yaku\lib\yaku.js:719:16)
    at tryCatcher (z:\MyApp\node_modules\yaku\lib\yaku.js:436:32)
    at z:\MyApp\node_modules\yaku\lib\yaku.js:575:38
    at flush (z:\MyApp\node_modules\yaku\lib\yaku.js:478:17)
    at process.processTicksAndRejections (node:internal/process/task_queues:77:11) 
      {stack: 'Error: Invalid header: Does not start with Cr…ons (node:internal/process/task_queues:77:11)', 
      message: 'Invalid header: Does not start with Cr24'}

Seems like it's the package's probelm, using "electron-devtools-installer": "^3.2.0"

I'm surprised we don't have a workaround outlined in the code. Do you think adding something like this would be helpful? I found this code on here somewhere: I'm sorry I forgot who wrote it, originally!

  // This is the workaround for `electron-devtools-installer`
  // To get your extension-id:
  // 1. In a chrome browser, go to url `chrome://extensions/`
  // 2. Select dev tools extension
  // 3. Look in address bar.
  // 4. Find that folder here:
  //      `C:\Users\YOUR_NAME_HERE\AppData\Local\Google\Chrome\User Data\Default\Extensions`
  // 5. The version's folder name for the path `extensionVersion` seen below.
  if (import.meta.env.DEV) {
    const { app, session } = require("electron");
    const path = require("path");
    const os = require("os");
    const extensionId = "\\nhdogjmejiglipccpnnnanhbledajbpd";
    const basePath = "AppData\\Local\\Google\\Chrome\\User Data\\Default\\Extensions";
    const extensionVersion = "\\6.5.0_0";
    const vueDevToolsPath = path.join( os.homedir(), basePath, extensionId, extensionVersion );
    app.whenReady().then(async () => {
      await session.defaultSession.loadExtension(vueDevToolsPath);
    })
    .catch(e => console.error("Failed to install dev tools:", e));
  }

Originally posted by @TheAutomaTom in https://github.com/cawa-93/vite-electron-builder/discussions/906#discussioncomment-6887484

[cawa-93]

@TheAutomaTom, It's it issue for any extension, or for vue devtools only?

[TheAutomaTom]

I assume it is the extension at fault. They sound like they fixed it 3 years ago, but I get the same error. I will open a ticket there and see if there is any response.

Still, are you using devtools, and if so, are you using our code on main?

[cawa-93]

1. Seems extension id for VUEJS3_DEVTOOLS is deprecated, or changed, or something else. Chrome webstore return 404 🤷‍♂️.
2. I set id for latest vue.js devtools (nhdogjmejiglipccpnnnanhbledajbpd) and it resolve issue.
3. I also have to add forceDownload: true. After forst run, I remove it and extension still works.

     return installExtension('nhdogjmejiglipccpnnnanhbledajbpd', {
       loadExtensionOptions: {
         allowFileAccess: true,
         forceDownload: true, // 👈
       },
     });

4. I still getting some errors in output, but extension seems works.

   (node:1728) ExtensionLoadWarning: Warnings loading extension at C:\Users\kozac\AppData\Roaming\vite-electron-builder\extensions\nhdogjmejiglipccpnnnanhbledajbpd:
     Manifest version 2 is deprecated, and support will be removed in 2023. See https://developer.chrome.com/blog/mv2-transition/ for more details.
   
   (Use `electron --trace-warnings ...` to show where the warning was created)
   [1728:0901/204141.351:ERROR:CONSOLE(2)] "Electron sandboxed_renderer.bundle.js script failed to run", source: node:electron/js2c/sandbox_bundle (2)
   [1728:0901/204141.351:ERROR:CONSOLE(2)] "TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))", source: node:electron/js2c/sandbox_bundle (2)

As alternative workaround you can use standalone vue devtools.

[zeid0ne]

Hello, i have the same error

[ReevMich]

1. Seems extension id for VUEJS3_DEVTOOLS is deprecated, or changed, or something else. Chrome webstore return 404 🤷‍♂️.
2. I set id for latest vue.js devtools (nhdogjmejiglipccpnnnanhbledajbpd) and it resolve issue.
3. I also have to add forceDownload: true. After forst run, I remove it and extension still works.

    return installExtension('nhdogjmejiglipccpnnnanhbledajbpd', {
      loadExtensionOptions: {
        allowFileAccess: true,
        forceDownload: true, // 👈
      },
    });

4. I still getting some errors in output, but extension seems works.

   (node:1728) ExtensionLoadWarning: Warnings loading extension at C:\Users\kozac\AppData\Roaming\vite-electron-builder\extensions\nhdogjmejiglipccpnnnanhbledajbpd:
    Manifest version 2 is deprecated, and support will be removed in 2023. See https://developer.chrome.com/blog/mv2-transition/ for more details.
   
   (Use `electron --trace-warnings ...` to show where the warning was created)
   [1728:0901/204141.351:ERROR:CONSOLE(2)] "Electron sandboxed_renderer.bundle.js script failed to run", source: node:electron/js2c/sandbox_bundle (2)
   [1728:0901/204141.351:ERROR:CONSOLE(2)] "TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))", source: node:electron/js2c/sandbox_bundle (2)

As alternative workaround you can use standalone vue devtools.

cawa-93 solution worked for me.

Here is my block:

const VUEJS3_DEVTOOLS = "nhdogjmejiglipccpnnnanhbledajbpd";
  app.whenReady()
      .then(() => import("electron-devtools-installer"))
      .then((module) => {
      const { default: installExtension } =
          // @ts-expect-error Hotfix for https://github.com/cawa-93/vite-electron-builder/issues/915
          typeof module.default === "function" ? module : (module.default as typeof module);

      return installExtension(VUEJS3_DEVTOOLS, {
          loadExtensionOptions: {
              allowFileAccess: true,
          },
      });
  })
  .catch((e) => console.error("Failed install extension:", e));