Plan for ESM only modules

[busches]

What's the plan for being able to use ESM only dependencies? There appear to be a few options, transpiling them again or converting our project to also emit ESM. As more and more dependendencies switch to only ESM support, we'll need a way forward to support them in the project or a plan to move off them.

[robertobandini]

Hi @busches I don't know if @dex4er has read this but I think he can give you some information about it.

[dex4er]

It is complicated. We could have ESM modules for main context (not renderer). However, our application mixes the contexts in a lot of components and ie. some React components imports some "node:*" modules ("fs", "crypto", "net", "http", etc.). It is even possible because Electron has some kind of emulator for "require" keyword and it works only for commonjs (not ESM).

I think as far as we have a single "require" in the renderer's index.js it won't be possible to migrate to ESM modules. And it is also all-or-nothing decision, so basically it'll be a major rewriting of the project that brings incompatibliity for plugins.

At least we should try: staying with CommonJS modules will lock us with old versions of the external libraries forever. Moving forward is the only logical solution.

We might do it in some steps:

1. We should switch from Javascript to Typescript for internal modules in this monorepo: we should not transpile our modules as actually we provide only one output: the application itself. It is pointless to use some intermediate Javascript form if all our code in the monorepo is Typescript already.
2. We should migrate from webpack to vite, as it is better prepared for Typescript and it works for us already for plugins.
3. It is not easy to drop webpack as we use some its magical plugins that does a lot of things indirectly, like loading automatically CSS and other assets or autoloading dependency injection. It might be challenging to setup vite for it but hey, we can do some parts explicitely like loading CSS styles directly or loading DI modules.
4. Splitting the contexts will be the most difficult part, especially that renderer calls the Kubernetes SDK, and it relies on nodejs modules imported by emulation in the Electron. Still, we can move some parts to "preloader" for the renderer which can import modules.

It will be a long and painfull way to enable ESM in this project.

The context: https://www.electronjs.org/docs/latest/tutorial/esm

[robertobandini]

Thanks @dex4er!
@busches If you or anyone else has any other information, opinions, or suggestions on this matter, please let us know.