Named mounts not working with Hugo's generated `jsconfig.json`

support
1

I have a module for Twitter Bootstrap v5 which mounts js to assets/bootstrap.
The mounts are configured here:

With this configured, I just have to import my Bootstrap plugins like import ScrollSpy from 'bootstrap/src/scrollspy' and my JS gets built successfully.
But I noticed a minor caveat, VS Code fails to resolve my import paths, and I think I know why.

Here is my jsconfig.json:

{
 "compilerOptions": {
  "baseUrl": ".",
  "paths": {
   "*": [
    "*",
    "../../../../../tmp/hugo_cache/modules/filecache/modules/pkg/mod/github.com/twbs/bootstrap@v5.0.1+incompatible/js/*"
   ]
  }
 }
}

The issue is that it is telling VS Code to resolve all import paths relative to js rather than bootstrap/js for the Bootstrap module. A fix for this would be for Hugo to add mount point’s target path (relative to assets) and add a key-value pair accordingly in “paths” in jsconfig.json. For example, for this case, jsconfig.json should be like:

{
 "compilerOptions": {
  "baseUrl": ".",
  "paths": {
   "*": ["*"],
   "bootstrap/*": ["../../../../../tmp/hugo_cache/modules/filecache/modules/pkg/mod/github.com/twbs/bootstrap@v5.0.1+incompatible/js/*"]
   ]
  }
 }
}

I can confirm that this works.

1 Like
2

I wrote the current logic with “editing of JS files inside /assets” in mind. Or, that’s what I tested/cared about. I would happy to take a patch that fixes your case as long as it doesn’t break mine :slight_smile: But you need to open an issue on GitHub.

Looking at your mapping, I suspect the culprit here is that I expect the mount to be a directory. Maybe.

3

Yeah, a GitHub issue would be more apt. I’ll create an issue for now, and will try to work up a PR for this by this weekend.

4

I’ve created a PR for this. Since this was my first PR, hope it won’t turn out to be an embarassment: :sweat_smile:

1 Like