Hugo bookshop_bindings not found

[isaac1620]

Error:

themes/cook/layouts/product-tour/single.html:2:7": execute of template failed: template: product-tour/single.html:2:7: executing "main" at <partial "bookshop_bindings" .Params>: error calling partial: partial "bookshop_bindings" not found

themes/cook/layouts/product-tour/single.html:1:3": execute of template failed: template: product-tour/single.html:1:3: executing "product-tour/single.html" at <partial "bookshop" (slice "sample" (dict "text" "Hello from the sample component"))>: error calling partial: partial "bookshop" not found

[bglw]

👋 Hi @isaac1620

The first thing to check would be that the Hugo module is correctly added — making sure require github.com/cloudcannon/bookshop/hugo/v3 is in your go.mod file and that the equivalent import is in your config.toml.

If those are correct, it's usually the case that Hugo itself is confused about its current modules. When that happens, I find that running hugo mod clean followed by hugo mod tidy can set things right.

Let me know if that resolves things for you :)

[isaac1620]

Thanks, @bglw!

I still got the error when starting the Hugo server:

/themes/cook/layouts/product-tour/single.html:2:3": execute of template failed: template: product-tour/single.html:2:3: executing "product-tour/single.html" at <partial "bookshop" (slice "sample" (dict "text" "Hello from the sample component"))>: error calling partial: partial "bookshop" not found
ERROR: "hugo-server" exited with 1.

My setup is as below:

hugo v0.122.0 go version go1.21.6 darwin/arm64 node v20.11.1

// config.toml

[module]
replacements = "components.local -> ../component-library"

[[module.imports]]
path = 'components.local'

[[module.imports]]
path = 'github.com/cloudcannon/bookshop/hugo/v3'

// go.mod

module indebted.local

go 1.21.6

require github.com/cloudcannon/bookshop/hugo/v3 v3.10.0 // indirect

// go.sum

github.com/cloudcannon/bookshop/hugo/v3 v3.10.0 h1:qia8zkLkWFQoh9+I1CcIw6NBObmucsCoEBQtpdGhIjg=
github.com/cloudcannon/bookshop/hugo/v3 v3.10.0/go.mod h1:s7mIonDhtsLcn10ZKuVXyqd6BDHI8vT1WQhZw8rPfY8=

// component-library/config.toml

[[module.mounts]]
source = "."
target = "themes/cook/layouts/partials/bookshop"

[[module.mounts]]
source = "."
target = "themes/cook/assets/bookshop"

[bglw]

Thanks for the code samples @isaac1620 :)

Can you try removing the themes/cook/ prefix from the target values in your component library config?

In other words, try:

// component-library/config.toml

[[module.mounts]]
source = "."
target = "layouts/partials/bookshop"

[[module.mounts]]
source = "."
target = "assets/bookshop"

The target here isn't looking for a path on your filesystem, but instead a path that Hugo should pretend the file is at in its internal "virtual filesystem". Per the Hugo docs:

Where it should be mounted into Hugo’s virtual filesystem. It must start with one of Hugo’s component folders: static, content, layouts, data, assets, i18n, or archetypes.

[isaac1620]

Same error @bglw

error calling partial: partial "bookshop" not found

[isaac1620]

It works now @bglw , I was using hugo.yaml as the config and not config.toml.

So, I just converted the .toml config to .yaml config

// hugo.yaml

module:
  replacements: "components.local -> ../component-library"
  imports:
    - path: 'components.local'
    - path: 'github.com/cloudcannon/bookshop/hugo/v3'

Might add that to docs at https://github.com/CloudCannon/bookshop/blob/main/guides/hugo.adoc#connecting-your-bookshop-to-hugo

[bglw]

Ah, glad to hear it's working :) I'll make an edit to the docs to make that clearer.

[isaac1620]

Hey @bglw

Is it possible to use an existing reusable components in *.hugo.html files. If yes, how to do it properly?

For example, hero-heading component that is stored in themes/cook/layouts/partials

I got error in CC when I tried to use an existing reusable component and load it in the live editor, but works perfectly when viewing in live URL https://dandy-banjo.cloudvent.net/product-tour

[bglw]

Hey again @isaac1620 👋

It is possible, but it requires a bit more setup work to get these files in place, as Bookshop in the Visual Editor uses its own Hugo setup that doesn't share your files on disk (hence the error).

The process for this is documented here: https://github.com/CloudCannon/bookshop/blob/main/guides/hugo-extra-files.md

As an example, I would expect something like the following Bookshop config to help in your situation:

const fs = require("fs");

module.exports = {
  engines: {
    "@bookshop/hugo-engine": {
      extraFiles: {
        "layouts/partials/hero-heading.html": fs.readFileSync("themes/cook/layouts/partials/hero-heading.html", { encoding: "utf8" })
      }
    }
  }
}

(I would avoid mapping files to a theme directory for Bookshop, as the Hugo site it simulates doesn't use a theme. In the above example, I'm just placing the component from the repo's themes directory into the simulated Hugo's main partials directory)

Let me know if that gets you going :)