Need help with replacing 'theme' with module imports

support
1

Hello,

I have been reading a lot about Hugo Modules and how to use module imports to replace ‘theme’ in site config and git submodules.

I attempted something in my theme’s git branch but am unsuccessful; I get his error (got the same error on Netlify branch deployment too).

Error: module “hugo-bare-min-theme” not found; either add it as a Hugo Module or store it in “/opt/build/repo/exampleSite/themes”.: module does not exist

Steps to reproduce the issue:

git clone https://github.com/kaushalmodi/hugo-bare-min-theme
cd hugo-bare-min-theme
git checkout use-module-imports
cd exampleSite
hugo

GitHub link (if you prefer to just quickly browse the source online and spot my mistakes)

References used:

I am using go 1.16 locally (go 1.17.6 on Netlify) and hugo v0.92.0.

2

Great! I make a second pass at looking my exampleSite config and I spot the issue… I was still setting theme in there. Now the site is starting to build but I am stumbling on a new error:

Error: Error building site: failed to render pages: render of “page” failed: “/tmp/hugo_cache/modules/filecache/modules/pkg/mod/github.com/kaushalmodi/hugo-search-fuse-js@v0.0.0-20220120142753-a11dcf9d1a83/layouts/_default/search.html:55:24”: execute of template failed: template: _default/search.html:55:24: executing “footer” at <readFile “themes/hugo-search-fuse-js/static/js/search.js”>

This one, I understand the error, need to remove the hard-coded themes/ in the readFile… but still need to figure out “how”.

3

I have this in layouts/_default/search.html in a hugo-search-fuse-js that I am attempting to use as a module:

  <!-- Below works *only if* this theme component is named "hugo-search-fuse-js"
       AND *if* the themesDir is left at the default value of "themes".  -->
  {{ $search_js_md5 := (readFile "themes/hugo-search-fuse-js/static/js/search.js" | md5) }}
  <script src={{ printf "%s?%s" ("js/search.js" | absURL) $search_js_md5 }}></script>

So the readFile "themes/hugo-search-fuse-js/static/js/search.js" obviously fails as there’s no themes/ directory in my main site directory any more.

How to fix that?

4

I would just drop using readFile. There are several issues with readFile (where it looks for files), but I have not wanting to spend time on as reading files directly like this throws caching and dependency managment (e.g. Hugo reloads on changes) out with the bath water …

So, I suggest that you put (or mount) all of these files into /assets and then do:

{{ $js := resources.Get "hugo-search-fuse-js/js/search.js" }}

… or something.

With the above you don’t have to worry (too much) about where the file lives …

1 Like
5

I can’t follow your issue I think. Modules are supposed to mount right into the root folder, so a theme module should mount it’s templates into layouts, not themes/themename/layouts. Does that help you?

6

Thanks @bep . That helped me get one step closer to getting the theme → module transition working.

This commit fixed that site building error: Get search.js from assets/ using resources.Get · kaushalmodi/hugo-search-fuse-js@fbfe3aa · GitHub

Now the site builds, but it fails to pick up the search.json from hugo-search-fuse-js layouts even when I have outputs = ["html", "json"] in the exampleSite’s search.md.

7

ok, the outputs front-matter wasn’t the issue; I forgot to update the script src :man_facepalming:

All fixed with:

  {{ $search_js := resources.Get "js/search.js" }}
  <script src={{ printf "%s?%s" $search_js.RelPermalink ($search_js | md5) }}></script>

and moving static/js/search.js in that fuse js theme component repo to assets/js/search.js.

Thanks!

full commit for future reference

8

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