Hugo theme module with nested module

I have a theme which I have set up as a Hugo module (with a go.mod). The theme then imports alpinejs from this repo - https://github.com/gohugoio/hugo-mod-jslibs/tree/master/alpinejs - via its config.toml.

If I do a hugo mod vendor from the theme directory I can see the partial in the _vendor sub-directory.

However, when I import the theme into my main project, the partial is not available. When running the Hugo server I’m getting the following error message.

...partial "jslibs/alpinejs/script-src.html" not found

If I do hugo mod vendor from my main project directory, the themes files are available but nothing from the sub-module.

Do the imported files from the theme not filter down to the main project?

I’ve read many articles on Hugo modules but can’t quite get this nested module working. Please can someone help clarify?

They do. I’m guessing that you somewhere down the chain has overwritten the mount config for the AlpineJS module.

If you do a hugo config mounts in your project, somewhere down that list should be something ala:

{
   "path": "github.com/gohugoio/hugo-mod-jslibs/alpinejs",
   "dir": "/Users/bep/dev/sites/myproject/_vendor/github.com/gohugoio/hugo-mod-jslibs/alpinejs/",
   "mounts": [
      {
         "source": "layouts",
         "target": "layouts"
      }
   ]
}

If you don’t see the source/target above, you have your source of confusion.

If I run hugo config mounts in my theme’s directory where the alpine module is being imported then I see the output above.

{
    "path": "github.com/gohugoio/hugo-mod-jslibs/alpinejs",
    "dir": "/tmp/hugo_cache/modules/filecache/modules/pkg/mod/github.com/gohugoio/hugo-mod-jslibs/alpinejs@v0.6.0/",
    "mounts": [
      {
        "source": "layouts",
        "target": "layouts"
      }
    ]
}
{
    "path": "github.com/alpinejs/alpine",
    "dir": "/tmp/hugo_cache/modules/filecache/modules/pkg/mod/github.com/alpinejs/alpine@v2.7.0+incompatible/",
    "mounts": [
      {
         "source": "dist",
         "target": "assets/jslibs/alpinejs"
      }
    ]
}

If I run hugo config mounts from the project that is using the theme I only see entries for my project and the theme module. There is no object in the output for the alpine module.

{
    "path": "github.com/eimajtrebor/hugo-theme-test",
    "dir": "/home/jim/projects/hugo-theme-test/",
    "mounts": [
      {
         "source": "layouts",
         "target": "layouts"
      },
      {
         "source": "assets",
         "target": "assets"
      }
    ]
}

Are there any example repos that show a project importing a theme as a Hugo module with the theme also importing a module?

It would be easier for me to help you if you could point me to some … code, e.g. a GitHub repo.

Apologies. I’ve created a version of what I’m trying to do.

Theme repo - https://github.com/eimajtrebor/mytheme
Site repo - https://github.com/eimajtrebor/mysite

So I’m trying to add alpine to the head.html of my site via the theme if that makes sense. So rather than adding Alpine to each site I create, the theme will handle that import and pass its partials down.

Error message when running hugo server.

Failed to render pages: render of "home" failed: execute of template failed: template: index.html:3:8: executing "index.html" at <partial "head.html" .>: error calling partial: "/home/jim/projects/hugo/mytheme/layouts/partials/head.html:1:3": execute of template failed: template: partials/head.html:1:3: executing "partials/head.html" at <partialCached "jslibs/alpinejs/script-src.html" "-">: error calling partialCached: partial "jslibs/alpinejs/script-src.html" not found
1 Like

OK, I see it now.

We should double check that the documentation is clear about this (and we should probably warn about it if we can detect it), but the config directory is only read for the main project. Themes/theme modules is config.toml etc. only.

/cc @jmooring

2 Likes

Perfect, thanks for this.

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