🤦VS Code extensions do not support esm

[Adam-it]

🎯 Aim

The aim of this issue is to track the support of es modules in VS Code extensions.
Issues with more info:

• Enable consuming of ES modules in extensions microsoft/vscode#130367

Currently using CLI for Microsoft 365 directly from PnP builds is not possible due to that, so for now as a temporary workaround the CLI dependency is added from a local version of the package which was reverted to common js
https://github.com/Adam-it/cli-microsoft365/tree/cli-cjs

[Malix-Labs]

Yep, that's a serious disappointment.
Did you try using vite?

[Adam-it]

Yep, that's a serious disappointment.
Did you try using vite?

Not sure how would that help for a dependency that is not used in webview but in the extension itself 🤔. Do you have any example I could check 👍?

[Malix-Labs]

Not sure how would that help for a dependency that is not used in webview but in the extension itself 🤔. Do you have any example I could check 👍?

Yep, I use vite to bundle my VSCode extension
It's WIP, but the bundling part works; it bundles from my typescript source written in ESNext to a CJS build
Here is the source code: https://github.com/Malix-off/VSC-Extension-StashFlow/tree/dev

[Adam-it]

Awesome. I need to check it for sure 🤩. Will it work also if one of the dependencies I use is already build in esm? As this is actually the problem I'm having

[Malix-Labs]

Will it work also if one of the dependencies I use is already build in esm?
As this is actually the problem I'm having

Yes, it's the main point of bundler, fixing the dumbass cjs vs esm fight and optimize code output with minification and circular resolution, and library imports with tree-shaking
There is theoretically no reason vite couldn't fix your problem in one way or another, I believe

[Adam-it]

this is awesome. I need to do a deep dive on this in the coming weekend.
Thanks @Malix-off for sharing. You Rock 🤩

[Malix-Labs]

You're welcome ❤️

[estruyf]

@Malix-off, it is a great tip, also started using Vite a while ago, but now stepping away from it again as Vite dropped CJS support in v5 and will be completely removed in v6.

More information: https://vitejs.dev/guide/migration.html#deprecate-cjs-node-api

I stumbled on this issue as I had some issues with types that were incorrectly referenced during the build and made the extension fail.

It would be better to look at esbuild or tsup to be future-proof.

[Malix-Labs]

Vite dropped CJS support in v5

Nope, they dropped their own CJS Node API, which is a good thing imho because it would be kind of a non-sense to use a bundler in a non-ESM environment anyway (actually I'm a bit surprised they released a CJS Node API in the first place)

It means that to use Vite, you would need to use their ESM API (thus, to develop in ESM rather than CJS (I personally very much recommend that no matter what)), but vite will still be available to output CJS

See https://github.com/Malix-off/VSC-Extension-StashFlow/blob/master/vite.config.ts as an exemple

Edit

1. Okay, I see what you meant because when I tested configs, I stumbled upon the deprecation message.
   That's a false positive because vite takes "module": "cjs" (required for vscode extensions) of package.json as "developing in cjs" rather than "outputing cjs".
   To make it clear that we aren't using cjs, you just have to use the .mjs/.mts extension (docs)
   Oh and btw, thanks for that article, I noticed during my research that you were also the author of it lol

[Malix-Labs]

@estruyf @Adam-it ⬆️

[Adam-it]

related issues and PRs
microsoft/vscode-loader#57
microsoft/vscode-loader#36
microsoft/vscode-loader#56