Unable to bundle extension with ESBUILD

[roidy]

Does this issue occur when all extensions are disabled?: Yes

• VS Code Version: 1.66.2
• OS Version: Windows 10 / Windows 11 and OSX

Steps to Reproduce:

1. Follow these instructions https://code.visualstudio.com/api/working-with-extensions/bundling-extension#run-esbuild
2. The output shows the extension still isn't bundled

D:\Projects\VSCODE_Extensions\kodi-localize>vsce package
Executing prepublish script 'npm run vscode:prepublish'...

> kodi-localize@0.1.3 vscode:prepublish
> npm run esbuild-base -- --minify


> kodi-localize@0.1.3 esbuild-base
> esbuild ./src/extension.ts --bundle --outfile=out/main.js --external:vscode --format=cjs --platform=node "--minify"

  out\main.js  309.8kb

Done in 28ms
 WARNING  A 'repository' field is missing from the 'package.json' manifest file.
Do you want to continue? [y/N] y
This extension consists of 563 files, out of which 246 are JavaScript files. For performance reasons, you should bundle your extension: https://aka.ms/vscode-bundle-extension . You should also exclude unnecessary files by adding them to your .vscodeignore: https://aka.ms/vscode-vscodeignore
 DONE  Packaged: D:\Projects\VSCODE_Extensions\kodi-localize\kodi-localize-0.1.3.vsix (563 files, 1.25MB)

4. Referring to this issue Extension bundling with ESBuild documentation does not work #136831 the user noted:-

Solution turned out to be adding out/ and node_modules/ to .vscodeignore. Docs are just a little confusing in terms of what steps are for webpack and which steps are for esbuild.

5. After adding node_modules/ to my .vscodeignore my extension now bundles.

DONE Packaged: D:\Projects\VSCODE_Extensions\kodi-localize\kodi-localize-0.1.3.vsix (11 files, 86.44KB)

However the issue is my extension no longer activates or runs, before bundling the extension works fine.

[kraabrsg]

similar problem here with a selfmade zowe extension... (1.66.0, win 10). Also esbuild, if "node_modules/" is removed from vscodeignore file it is working like expected (und quite big)...

[roidy]

Any help please?

[connor4312]

Hm, I'm having trouble reproducing what you're running into following the instructions in the docs. The .vscodeignore file that we recommend in the publishing step https://code.visualstudio.com/api/working-with-extensions/bundling-extension#publishing already include node_modules. When I run with that, I see that node_modules gets excluded as I would expect.

This section is linked to in the esbuild portion of the docs:

Finally, you will want to update your .vscodeignore file so that compiled files are included in the published extension. Check out the Publishing section for more details.

Are there additional repro steps I should use for this?

[kraabrsg]

@connor4312 ended up here with excluding the needed modules with ! in the vscodeignore file
There are a lot of the them needed for the extension (can be seen when starting the extension with the developer tools)..., the needed modules are not added (i guess the esbuild plugin would be needed ).

[connor4312]

@kraabrsg I don't think you're running into the same issue as the author. If you use esbuild, node_modules are not needed.

[mohanraj-r]

Thanks @connor4312 I was wondering the same

• so if esbuild is used to bundle out to a single file guess vscodeignore file is not needed?
• should the esbuild prepublish be followed with a packaging command with the no deps option e.g. "vscode:package": "vsce package --no-dependencies"? I don't see the corresponding followup packaging command in either the docs or the linked example https://github.com/microsoft/vscode-test-adapter-converter/blob/main/package.json

[mohanraj-r]

Could this be related to esbuild's inability to process dynamic imports evanw/esbuild#700 ? When I add --log-level=debug option to esbuild I see a number of This call to "require" will not be bundled because the argument is not a string literal. Could this be why esbuild is not building the extension correctly? Is there a non-trivial vscode extension project out there that uses esbuild?

[connor4312]

so if esbuild is used to bundle out to a single file guess vscodeignore file is not needed?

You still want the ignore file to omit your node_modules, sources, and so on.

Could this be why esbuild is not building the extension correctly?

Yes, as the message says, it won't bundle that statement. Dynamic require statements are incompatible with most bundlers.

Is there a non-trivial vscode extension project out there that uses esbuild?

Many of our new extensions use esbuild, e.g. the built-in notebook renderers extension

[kraabrsg]

@kraabrsg I don't think you're running into the same issue as the author. If you use esbuild, node_modules are not needed.

@connor4312 well it is exactly the same case.
1.) adding all node_modules to the vscodeignore file
2.) when bundling the extension with ESBUILD it is working, but when loading the extension and investigating with the developer tools you see errors:
module 'xxx' not found
3.)excluding those modules one by one (vscodeignore) untill no error is displayed, then everything works. But that was quite a daunting task, there must be better ways to do this...

[mohanraj-r]

Is there a way to explicitly include a glob pattern e.g. node_modules with.vscodeignore ?
When vsce package --no-dependencies is specified, it doesn't include node_modules even without any .vscodeignore file. Some clarification on this would be much appreciated.

[connor4312]

Is there a way to explicitly include a glob pattern e.g. node_modules with.vscodeignore ?

Yea, you can add negations after you ignore something, like

node_modules/**
!node_modules/foo/**

This works the same as a .gitignore

but when loading the extension and investigating with the developer tools you see errors: module 'xxx' not found

I don't have enough info from what you posted to provide advice. Usually you'll get warnings or errors from your bundler if it can't resolve and import, such as what Mohan posted. Unless you import things in esoteric ways that the bundler doesn't know to look for. Otherwise, it's expected that you'll get a single static file (or set of files, depending on your configuration) that can be consumed without node_modules.

[VSCodeTriageBot]

This issue has been closed automatically because it needs more information and has not had recent activity. See also our issue reporting guidelines.

Happy Coding!