Issues with v28

[Stanzilla]

Hey there! I just updated my testing branch from 28-beta1 to the final version and it seems like it is no longer required to have the files named as mjs as I get this message now:

Unable to find Electron app at /home/stan/projects/personal/WeakAurasCompanion

Cannot find module '/home/stan/projects/personal/WeakAurasCompanion/dist-electron/main/index.mjs'. Please verify that the package.json has a valid "main" entry

but when I rename them back to js I get this:

Unable to load preload script: /home/stan/projects/personal/WeakAurasCompanion/dist-electron/preload/index.js
(anonymous) @ node:electron/js2c/renderer_init:2
node:electron/js2c/renderer_init:2 Error: require() of ES Module /home/stan/projects/personal/WeakAurasCompanion/dist-electron/preload/index.js not supported.
Instead change the require of index.js in null to a dynamic import() which is available in all CommonJS modules.
    at __node_internal_captureLargerStackTrace (node:internal/errors:496:5)
    at new NodeError (node:internal/errors:405:5)
    at Module._extensions..js (node:internal/modules/cjs/loader:1299:19)
    at Module.load (node:internal/modules/cjs/loader:1126:32)
    at Module._load (node:internal/modules/cjs/loader:967:12)
    at l._load (node:electron/js2c/asar_bundle:2:13642)
    at o._load (node:electron/js2c/renderer_init:2:2455)
    at node:electron/js2c/renderer_init:2:33274
    at node:electron/js2c/renderer_init:2:33726
    at ___electron_webpack_init__ (node:electron/js2c/renderer_init:2:33730)
    at node:electron/js2c/renderer_init:2:33853
    at BuiltinModule.compileForInternalLoader (node:internal/bootstrap/loaders:336:7)
    at BuiltinModule.compileForPublicLoader (node:internal/bootstrap/loaders:272:10)
    at loadBuiltinModule (node:internal/modules/cjs/helpers:57:9)
    at Module._load (node:internal/modules/cjs/loader:943:15)
    at l._load (node:electron/js2c/asar_bundle:2:13642)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:101:12)
    at node:internal/main/run_main_module:23:47

[caoxiemeihao]

Hey! 👋 Upgrade vite-plugin-electron to v0.28.0, It has on mandatory changes.

[Stanzilla]

Hey! 👋

Upgrade vite-plugin-electron to v0.28.0, It has on mandatory changes.

sorry if i wasnt clear here, thats what I did, updated from beta 1 to the final version

[tadmi]

I also have a problem with loading the preload script

Problem disappears if:

• fix manually require => await import

• or changing in simple.mjs => output.format cjs > es

webPreferences:

• contextIsolation: true
• nodeIntegration: false
• sandbox: false

[caoxiemeihao]

The following is require() can usable matrix, preload scripts config seems a bit complicated.

👉 https://github.com/electron/electron/blob/v30.0.0-nightly.20240104/docs/tutorial/esm.md#preload-scripts

┏———————————————————————————————————┳——————————┳———————————┓
│ webPreferences: { }               │  import  │  require  │
┠———————————————————————————————————╂——————————╂———————————┨
│ nodeIntegration: false(undefined) │    ✘     │     ✔     │
┠———————————————————————————————————╂——————————╂———————————┨
│ nodeIntegration: true             │    ✔     │     ✔     │
┠———————————————————————————————————╂——————————╂———————————┨
│ sandbox: true(undefined)          │    ✘     │     ✔     │
┠———————————————————————————————————╂——————————╂———————————┨
│ sandbox: false                    │    ✔     │     ✘     │
┠———————————————————————————————————╂——————————╂———————————┨
│ nodeIntegration: false            │    ✘     │     ✔     │
│ sandbox: true                     │          │           │
┠———————————————————————————————————╂——————————╂———————————┨
│ nodeIntegration: false            │    ✔     │     ✘     │
│ sandbox: false                    │          │           │
┠———————————————————————————————————╂——————————╂———————————┨
│ nodeIntegration: true             │    ✘     │     ✔     │
│ sandbox: true                     │          │           │
┠———————————————————————————————————╂——————————╂———————————┨
│ nodeIntegration: true             │    ✔     │     ✔     │
│ sandbox: false                    │          │           │
┗———————————————————————————————————┸——————————┸———————————┛

• import(✘): SyntaxError: Cannot use import statement outside a module
• require(✘): ReferenceError: require is not defined in ES module scope, you can use import instead

---

From vite-plugin-electron-preload

[Stanzilla]

Interesting, I have

nodeIntegration: true,
nodeIntegrationInWorker: true,
contextIsolation: false,

and sandbox not set at all. My preload script only one import so I assume the default is true.

The docs also say "ESM preload scripts must have the .mjs extension" but after the recent plugin changes it seems like I need to rename it back to js?

[caoxiemeihao]

{ "type": "module" }
┏————————————————————┳——————————┳———————————┓
│       built        │  format  │   suffix  │
┠————————————————————╂——————————╂———————————┨
│ main process       │   esm    │    .js    │
┠————————————————————╂——————————╂———————————┨
│ preload scripts    │   cjs    │   .mjs    │ diff
┠————————————————————╂——————————╂———————————┨
│ renderer process   │    -     │    .js    │
┗————————————————————┸——————————┸———————————┛

{ "type": "commonjs" } - default
┏————————————————————┳——————————┳———————————┓
│       built        │  format  │   suffix  │
┠————————————————————╂——————————╂———————————┨
│ main process       │   cjs    │    .js    │
┠————————————————————╂——————————╂———————————┨
│ preload scripts    │   cjs    │    .js    │ diff
┠————————————————————╂——————————╂———————————┨
│ renderer process   │    -     │    .js    │
┗————————————————————┸——————————┸———————————┛

---

The docs also say "ESM preload scripts must have the .mjs extension" but after the recent plugin changes it seems like I need to rename it back to js?

In v0.28.0, the main process uses .js files by default, and the build format output is esm or cjs depending on "type"="module" or "type"="commonjs" .

The Preload scripts is built using the cjs format, and the cjs format is available in most scenarios, When "type"="module" is used, the build file suffix is .mjs. The only difference is the file suffix.

[Stanzilla]

In v0.28.0, the main process uses .js files by default, and the build format output is esm or cjs depending on "type"="module" or "type"="commonjs" .

The Preload scripts is built using the cjs format, and the cjs format is available in most scenarios, When "type"="module" is used, the build file suffix is .mjs. The only difference is the file suffix.

How do I fix this then?

I have

"main": "dist-electron/main/index.js",
"type": "module",

and get

Unable to load preload script: /home/stan/projects/personal/WeakAurasCompanion/dist-electron/preload/index.js
(anonymous) @ node:electron/js2c/renderer_init:2
node:electron/js2c/renderer_init:2 Error: require() of ES Module /home/stan/projects/personal/WeakAurasCompanion/dist-electron/preload/index.js not supported.
Instead change the require of index.js in null to a dynamic import() which is available in all CommonJS modules.
    at __node_internal_captureLargerStackTrace (node:internal/errors:496:5)
    at new NodeError (node:internal/errors:405:5)
    at Module._extensions..js (node:internal/modules/cjs/loader:1299:19)
    at Module.load (node:internal/modules/cjs/loader:1126:32)
    at Module._load (node:internal/modules/cjs/loader:967:12)
    at l._load (node:electron/js2c/asar_bundle:2:13642)
    at o._load (node:electron/js2c/renderer_init:2:2455)
    at node:electron/js2c/renderer_init:2:33274
    at node:electron/js2c/renderer_init:2:33726
    at ___electron_webpack_init__ (node:electron/js2c/renderer_init:2:33730)
    at node:electron/js2c/renderer_init:2:33853
    at BuiltinModule.compileForInternalLoader (node:internal/bootstrap/loaders:336:7)
    at BuiltinModule.compileForPublicLoader (node:internal/bootstrap/loaders:272:10)
    at loadBuiltinModule (node:internal/modules/cjs/helpers:57:9)
    at Module._load (node:internal/modules/cjs/loader:943:15)
    at l._load (node:electron/js2c/asar_bundle:2:13642)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:101:12)
    at node:internal/main/run_main_module:23:47
(anonymous) @ node:electron/js2c/renderer_init:2

I don't see an option to let the plugin generate a mjs for the preload script

[caoxiemeihao]

I don't see an option to let the plugin generate a mjs for the preload script

We will not provide specific option support for preload scripts as this time, as doing so may not necessarily solve all problems. You can built the esm format in the following way.

{
  preload: {
    // Shortcut of `build.rollupOptions.input`.
    // Preload scripts may contain Web assets, so use the `build.rollupOptions.input` instead `build.lib.entry`.
    input: 'electron/preload.ts',
    vite: {
      build: {
        rollupOptions: {
          output: {
+           format: 'esm',
          },
        },
      },
    },
  },
}

[Stanzilla]

I don't see an option to let the plugin generate a mjs for the preload script

We will not provide specific option support for preload scripts as this time, as doing so may not necessarily solve all problems. You can built the esm format in the following way.

{
  preload: {
    // Shortcut of `build.rollupOptions.input`.
    // Preload scripts may contain Web assets, so use the `build.rollupOptions.input` instead `build.lib.entry`.
    input: 'electron/preload.ts',
    vite: {
      build: {
        rollupOptions: {
          output: {
+           format: 'esm',
          },
        },
      },
    },
  },
}

I tried that but that still generates a .js file, not .mjs. If I manually rename it to .mjs everything works so it is just that step that is going wrong.

[tadmi]

@Stanzilla, add:

output: {
+ format: 'esm',
+ entryFileNames: `[name].mjs`
},

[Stanzilla]

@Stanzilla, add:

output: {
+ format: 'esm',
+ entryFileNames: `[name].mjs`
},

perfect, thanks! That should probably be added to the documentation? Or let the plugin handle it?

[caoxiemeihao]

perfect, thanks! That should probably be added to the documentation? Or let the plugin handle it?

A documentation may be needed to explain this, but I haven't figured out where to write it yet. 🤔