Open Adam-it opened 8 months ago
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 👍?
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
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
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
this is awesome. I need to do a deep dive on this in the coming weekend. Thanks @Malix-off for sharing. You Rock 🤩
You're welcome ❤️
@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.
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
"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@estruyf @Adam-it ⬆️
🎯 Aim
The aim of this issue is to track the support of es modules in VS Code extensions. Issues with more info:
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