Issues with v28

Question

Issues with v28

Stanzilla opened this issue a year ago · 12 comments

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

Answer 1 · 2024-01-08T02:00:16.000Z

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

Answer 2 · 2024-01-08T06:34:49.000Z

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

Answer 3 · 2024-01-09T08:21:29.000Z

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

Answer 4 · 2024-01-10T01:48:02.000Z

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

Answer 5 · 2024-01-10T11:22:28.000Z

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?

Answer 6 · 2024-01-12T02:19:32.000Z

{ "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.

Answer 7 · 2024-01-13T10:02:26.000Z

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

Answer 8 · 2024-01-14T00:47:20.000Z

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',
          },
        },
      },
    },
  },
}

Answer 9 · 2024-01-14T00:54:10.000Z

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.

Answer 10 · 2024-01-14T10:13:55.000Z

@Stanzilla, add:

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

Answer 11 · 2024-01-14T16:58:28.000Z

@Stanzilla, add:

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

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

Answer 12 · 2024-02-05T07:34:28.000Z

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. 🤔