Skip to content

Vite Plugin with ESM support for main #3439

@joezappie

Description

@joezappie

Pre-flight checklist

  • I have read the contribution documentation for this project.
  • I agree to follow the code of conduct that this project uses.
  • I have searched the issue tracker for a bug that matches the one I want to file, without success.

Electron Forge version

7.2.0

Electron version

v28.0.0

Operating system

Windows 10 22H2

Last known working Electron Forge version

N/A

Expected behavior

I see that V28 brings ESM support (Hooray!). I'd like to switch my projects over but I'm having issues getting the Vite template to build. I successfully got a normal electron-forge app to build but using the vite template I cannot as it still converts it to cjs.

Actual behavior

Vite converts main.js to cjs, in which it then errors out because the package.json has been updated to include "type": "module".

App threw an error during load
ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and 'C:\Users\joeja\projects\deleteme-vite\pack
age.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at file:///C:/Users/joeja/projects/deleteme-vite/.vite/build/main.js:1:22
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

Steps to reproduce

  1. yarn create electron-app test-esm-vite --template=vite
  2. Add "type": "module", to package.json
  3. Change forge.config.js to export default
  4. Change the header of src/index.js to:
import { app, BrowserWindow } from "electron";
import path from "path";
import * as url from "url";

import { handleSquirrelEvent } from "./squirrel.js";

const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
  1. Add an esm squirrel event handler that works with import: ./squirrel.js
  2. Change vite.*.config.mjs to vite.*.config.js
  3. Update forge.config.js paths for plugin-vite to remove .mjs

Additional information

Looking through the vite plugin code, there is still a reference stating that Electron doesn't support ESM which is no longer true. Can this be updated?

Line 76 in file: https://github.com/electron/forge/blob/main/packages/plugin/vite/src/ViteConfig.ts

         build: {
            lib: entry
              ? {
                  entry,
                  // Electron can only support cjs.
                  formats: ['cjs'],
                  fileName: () => '[name].js',
                }
              : undefined,

I tried overriding this in my defineConfig({}) but haven't had any luck:

{
            // `entry` is just an alias for `build.lib.entry` in the corresponding file of `config`.
            entry: "src/main.js",
            formats: ["es"],
            config: "vite.main.config.js",
          },

I know this is an on going effort to update everything. I'd figure I'd bring it to attention since the code now says something that's untrue and because I can't figure out what the work around to override this.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions