Newcomer: importing more than one module (js.Build Could not resolve)

support
1

Hi folks, my first post here :wave:t2:

I’ve been having a great a great experience with Hugo so far and want to thank you all to begin with.

As for my question, it relates to being stuck at importing more than one module.

My goal initially is to import Alpine.js and instantpage from github.com/gohugoio/hugo-mod-jslibs.

My config.yaml:

module:
  imports:
    path: "github.com/gohugoio/hugo-mod-jslibs-dist/alpinejs/v3"

I’m able to import that fine, and this is my go.mod (redacted):

module [username].github.io/[repo]

go 1.17

require github.com/gohugoio/hugo-mod-jslibs-dist/alpinejs/v3 v3.900.100 // indirect

I then bring this in in my baseof.html like so:

{{- $options := dict "targetPath" "js/bundle.js" -}}
{{- $jsBundle := resources.Get "js/index.js" | js.Build $options | resources.Minify | fingerprint -}}
<html>
<body>
…
<script src="{{ $jsBundle.RelPermalink }}" integrity="{{ $jsBundle.Data.Integrity }}" defer></script>
</body>
</html>

My assets/js/index.js looks like this:

import Alpine from 'jslibs/alpinejs/v3/alpinejs/dist/module.esm.js'
import intersect from 'jslibs/alpinejs/v3/intersect/dist/module.esm.js'
import persist from 'jslibs/alpinejs/v3/persist/dist/module.esm.js'

(function () {
    Alpine.plugin(intersect)
    Alpine.plugin(persist)

    Alpine.store('darkMode', {
        on: true,

        toggle() {
            this.on = ! this.on
        }
    })

    Alpine.start()
})();

This is my jsconfig.json:

{
 "compilerOptions": {
  "baseUrl": ".",
  "paths": {
   "*": [
    "../../../../../var/folders/lr/4xm1k9254jdf470t3pfggx2m0000gn/T/hugo_cache/modules/filecache/modules/pkg/mod/github.com/gohugoio/hugo-mod-jslibs-dist/alpinejs/v3@v3.900.100/packages/*"
   ]
  }
 }
}

So this works just fine :sparkles: (as far as I can tell, I’m not a ninja).

However, when I try to also bring in instantpage – things go downhill quickly.

module:
  imports:
    path: "github.com/gohugoio/hugo-mod-jslibs-dist/alpinejs/v3"
    path: "github.com/gohugoio/hugo-mod-jslibs/instantpage"

The module is downloaded just fine with hugo mod get or simply running the server.

However, js.Build then fails to resolve intersect.js and persist.js.

% hugo server -D
Start building sites … 
hugo v0.96.0+extended darwin/arm64 BuildDate=unknown
ERROR 2022/04/09 04:06:54 js.Build failed: Could not resolve "jslibs/alpinejs/v3/intersect/dist/module.esm.js"
ERROR 2022/04/09 04:06:54 js.Build failed: Could not resolve "jslibs/alpinejs/v3/persist/dist/module.esm.js"
Error: Error building site: JSBUILD: failed to transform "js/index.js" (application/javascript): Could not resolve "jslibs/alpinejs/v3/alpinejs/dist/module.esm.js"
Built in 1901 ms

I feel that I haven’t found the right guide or documentation regarding this just yet.

I did find a user here on the forum with a similar issue, but he resolved it himself and did not share any insights in those details.

If anyone could consider pointing me in the right direction or just giving some general hints I feel I’d be able to get further and learn more (this is probably embarrassingly easy).

I’m on go version go1.17.8 darwin/amd64 and hugo v0.96.0+extended darwin/arm64 BuildDate=unknown on a MacBook Pro M1 at macOS 12.3.1.

Stay safe out there.

Kind regards,
Carl

2

The above isn’t valid YAML; see the example here:

1 Like
3

Many thanks (många tack)!

I knew it would be trivial, glad you took your time to give feedback.

/ Carl

1 Like
4

Yea, well, the above reminds me that we should do the upgrade to the YAML v3, as that would have given an error for the duplicate keys in your example.

1 Like
5

I’m basically a human fuzzer at this point :slight_smile:

1 Like
6

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.