Transforming ES modules to Commonjs for Electron and Node

[aminya]

Is your feature request related to a problem? Please describe.

Can Vite add support for transforming ES modules to CommonJS for Electron and Node?

For these two environments, ES modules are not supported (or do not have first-class support like the browsers). For that reason, the output code should use require and exports instead of using import and export.

For the dev mode, this transformation is necessary.

For the production model, if Rollup is able to bundle everything, it will be less of an issue, but there are still situations that the code uses dynamic requires which Rollup has issues bundling.

Describe the solution you'd like
Adding a transformer that converts import/exports back to commonjs in the last step.

Describe alternatives you've considered

Additional context

As the owner of atom-community I was planning to use Vite for the Atom packages in our organization. But the issue is that for Atom packages, we need to use commonjs because Electron doesn't support import/exports.

There was a similar issue here (#2218), but the solution mentioned there isn't general because we need to list all the modules that use require manually.

[xiaoxiangmoe]

@aminya see https://github.com/xiaoxiangmoe/vite-plugin-commonjs-externals

And if we need use cjs package in node_modules, we also need #2511 to be done.

[aminya]

@aminya see xiaoxiangmoe/vite-plugin-commonjs-externals

As I mentioned this doesn't solve my issue because we need to list all the modules that use require manually.

And if we need use cjs package in node_modules, we also need #2511 to be done.

Yes, I need a generic solution that covers all of the code.

[nomagick]

Hey @aminya for dynamic require(), try this:

patch-vite.ts

const hack1 = 'req';
const hack2 = 'uire';
const theRequire: any = window[hack1 + hack2 as any];
export default function patchedRequire(module: string): any {
    return theRequire(module);
}

[aminya]

Hey @aminya for dynamic require(), try this:

patch-vite.ts

const hack1 = 'req';
const hack2 = 'uire';
const theRequire: any = window[hack1 + hack2 as any];
export default function patchedRequire(module: string): any {
    return theRequire(module);
}

JavaScript always surprises me with some new strange behavior. 😄 I don't actually recommend you to do this in production as it probably bypasses a lot of optimizations.

[darkomenx]

Is there any news about this feature ?

[bluwy]

Vite is ESM-first and is built on the foundation of it, so unfortunately this isn't possible in Vite. The goal is to also push the usage of ESM forward, so supporting CJS would be a slight step back. However, there has been success of using ESM in electron and node, e.g. https://github.com/cawa-93/vite-electron-builder and SvelteKit/Astro. Closing with the reasons above.