Hi Hugo folks!
I’am having some problems while implementing a javascript + partial + shortcode.
What is my goal?
I’m trying to add a contact form functionality bind with a 3rd party web3forms backend service. All was working well until I wanted to add a custom Thank you page functionality in a div below the contact form that I would manage it from a javascript file using the innerHTML property. You can see how I do it in the javascript code below.
The Error
So I needed to pass some translation data and the source page name (contact in this case) to that javascript code since the website is multilingual. This is where I got stuck getting the following build error:
$ hugo server -D
WARN deprecated: site config key paginate was deprecated in Hugo v0.128.0 and will be removed in a future release. Use pagination.pagerSize instead.
Watching for changes in /disk/Projeler/web/himtec_dummy/{assets,content,hugo-blox,i18n,layouts}
Watching for changes in /home/ismail/.cache/hugo_cache/modules/filecache/modules/pkg/mod/github.com/!hugo!blox/hugo-blox-builder/modules/{blox-plugin-netlify@v1.1.2-0.20231108143325-448ed0e3bd2b,blox-tailwind@v0.2.1-0.20240602133901-492e343c2a33}
Watching for config changes in /disk/Projeler/web/himtec_dummy/config/_default, /home/ismail/.cache/hugo_cache/modules/filecache/modules/pkg/mod/github.com/!hugo!blox/hugo-blox-builder/modules/blox-plugin-netlify@v1.1.2-0.20231108143325-448ed0e3bd2b/config.yaml, /home/ismail/.cache/hugo_cache/modules/filecache/modules/pkg/mod/github.com/!hugo!blox/hugo-blox-builder/modules/blox-tailwind@v0.2.1-0.20240602133901-492e343c2a33/hugo.yaml, /disk/Projeler/web/himtec_dummy/go.mod
Start building sites …
hugo v0.134.3-5fb333b9f5ff4ec018f9d78910177d0bec1befb0+extended linux/amd64 BuildDate=2024-09-19T14:28:20Z VendorInfo=gohugoio
ERROR render of "home" failed: "/home/ismail/.cache/hugo_cache/modules/filecache/modules/pkg/mod/github.com/!hugo!blox/hugo-blox-builder/modules/blox-tailwind@v0.2.1-0.20240602133901-492e343c2a33/layouts/_default/baseof.html:7:5": execute of template failed: template: landing/list.html:7:5: executing "landing/list.html" at <partial "site_head" .>: error calling partial: "/home/ismail/.cache/hugo_cache/modules/filecache/modules/pkg/mod/github.com/!hugo!blox/hugo-blox-builder/modules/blox-tailwind@v0.2.1-0.20240602133901-492e343c2a33/layouts/partials/site_head.html:261:6": execute of template failed: template: partials/site_head.html:261:6: executing "partials/site_head.html" at <partialCached "init.html" .>: error calling partialCached: "/home/ismail/.cache/hugo_cache/modules/filecache/modules/pkg/mod/github.com/!hugo!blox/hugo-blox-builder/modules/blox-tailwind@v0.2.1-0.20240602133901-492e343c2a33/layouts/partials/init.html:5:15": execute of template failed: template: partials/init.html:5:15: executing "partials/init.html" at <.Content>: error calling Content: "/disk/Projeler/web/himtec_dummy/content/contact/index.md:18:1": failed to render shortcode "forms/contact_form": failed to process shortcode: "/disk/Projeler/web/himtec_dummy/layouts/shortcodes/forms/contact_form.html:2:7": execute of template failed: template: shortcodes/forms/contact_form.html:2:7: executing "shortcodes/forms/contact_form.html" at <partial "forms/contact_form" .>: error calling partial: "/disk/Projeler/web/himtec_dummy/layouts/partials/forms/contact_form.html:29:64": execute of template failed: template: partials/forms/contact_form.html:29:64: executing "partials/forms/contact_form.html" at <js.Build>: error calling Build: no Resource provided in transformation
ERROR render of "404" failed: "/home/ismail/.cache/hugo_cache/modules/filecache/modules/pkg/mod/github.com/!hugo!blox/hugo-blox-builder/modules/blox-tailwind@v0.2.1-0.20240602133901-492e343c2a33/layouts/_default/baseof.html:7:5": execute of template failed: template: 404.html:7:5: executing "404.html" at <partial "site_head" .>: error calling partial: "/home/ismail/.cache/hugo_cache/modules/filecache/modules/pkg/mod/github.com/!hugo!blox/hugo-blox-builder/modules/blox-tailwind@v0.2.1-0.20240602133901-492e343c2a33/layouts/partials/site_head.html:261:6": execute of template failed: template: partials/site_head.html:261:6: executing "partials/site_head.html" at <partialCached "init.html" .>: error calling partialCached: "/home/ismail/.cache/hugo_cache/modules/filecache/modules/pkg/mod/github.com/!hugo!blox/hugo-blox-builder/modules/blox-tailwind@v0.2.1-0.20240602133901-492e343c2a33/layouts/partials/init.html:5:15": execute of template failed: template: partials/init.html:5:15: executing "partials/init.html" at <.Content>: error calling Content: "/disk/Projeler/web/himtec_dummy/content/contact/index.md:18:1": failed to render shortcode "forms/contact_form": failed to process shortcode: "/disk/Projeler/web/himtec_dummy/layouts/shortcodes/forms/contact_form.html:2:7": execute of template failed: template: shortcodes/forms/contact_form.html:2:7: executing "shortcodes/forms/contact_form.html" at <partial "forms/contact_form" .>: error calling partial: "/disk/Projeler/web/himtec_dummy/layouts/partials/forms/contact_form.html:29:64": execute of template failed: template: partials/forms/contact_form.html:29:64: executing "partials/forms/contact_form.html" at <js.Build>: error calling Build: no Resource provided in transformation
ERROR render of "page" failed: "/home/ismail/.cache/hugo_cache/modules/filecache/modules/pkg/mod/github.com/!hugo!blox/hugo-blox-builder/modules/blox-tailwind@v0.2.1-0.20240602133901-492e343c2a33/layouts/_default/baseof.html:7:5": execute of template failed: template: _default/single.html:7:5: executing "_default/single.html" at <partial "site_head" .>: error calling partial: "/home/ismail/.cache/hugo_cache/modules/filecache/modules/pkg/mod/github.com/!hugo!blox/hugo-blox-builder/modules/blox-tailwind@v0.2.1-0.20240602133901-492e343c2a33/layouts/partials/site_head.html:261:6": execute of template failed: template: partials/site_head.html:261:6: executing "partials/site_head.html" at <partialCached "init.html" .>: error calling partialCached: "/home/ismail/.cache/hugo_cache/modules/filecache/modules/pkg/mod/github.com/!hugo!blox/hugo-blox-builder/modules/blox-tailwind@v0.2.1-0.20240602133901-492e343c2a33/layouts/partials/init.html:5:15": execute of template failed: template: partials/init.html:5:15: executing "partials/init.html" at <.Content>: error calling Content: "/disk/Projeler/web/himtec_dummy/content/contact/index.md:18:1": failed to render shortcode "forms/contact_form": failed to process shortcode: "/disk/Projeler/web/himtec_dummy/layouts/shortcodes/forms/contact_form.html:2:7": execute of template failed: template: shortcodes/forms/contact_form.html:2:7: executing "shortcodes/forms/contact_form.html" at <partial "forms/contact_form" .>: error calling partial: "/disk/Projeler/web/himtec_dummy/layouts/partials/forms/contact_form.html:29:64": execute of template failed: template: partials/forms/contact_form.html:29:64: executing "partials/forms/contact_form.html" at <js.Build>: error calling Build: no Resource provided in transformation
ERROR render of "section" failed: "/home/ismail/.cache/hugo_cache/modules/filecache/modules/pkg/mod/github.com/!hugo!blox/hugo-blox-builder/modules/blox-tailwind@v0.2.1-0.20240602133901-492e343c2a33/layouts/_default/baseof.html:7:5": execute of template failed: template: _default/list.html:7:5: executing "_default/list.html" at <partial "site_head" .>: error calling partial: "/home/ismail/.cache/hugo_cache/modules/filecache/modules/pkg/mod/github.com/!hugo!blox/hugo-blox-builder/modules/blox-tailwind@v0.2.1-0.20240602133901-492e343c2a33/layouts/partials/site_head.html:261:6": execute of template failed: template: partials/site_head.html:261:6: executing "partials/site_head.html" at <partialCached "init.html" .>: error calling partialCached: "/home/ismail/.cache/hugo_cache/modules/filecache/modules/pkg/mod/github.com/!hugo!blox/hugo-blox-builder/modules/blox-tailwind@v0.2.1-0.20240602133901-492e343c2a33/layouts/partials/init.html:5:15": execute of template failed: template: partials/init.html:5:15: executing "partials/init.html" at <.Content>: error calling Content: "/disk/Projeler/web/himtec_dummy/content/contact/index.md:18:1": failed to render shortcode "forms/contact_form": failed to process shortcode: "/disk/Projeler/web/himtec_dummy/layouts/shortcodes/forms/contact_form.html:2:7": execute of template failed: template: shortcodes/forms/contact_form.html:2:7: executing "shortcodes/forms/contact_form.html" at <partial "forms/contact_form" .>: error calling partial: "/disk/Projeler/web/himtec_dummy/layouts/partials/forms/contact_form.html:29:64": execute of template failed: template: partials/forms/contact_form.html:29:64: executing "partials/forms/contact_form.html" at <js.Build>: error calling Build: no Resource provided in transformation
Built in 279 ms
Error: error building site: render: failed to render pages: render of "page" failed: "/home/ismail/.cache/hugo_cache/modules/filecache/modules/pkg/mod/github.com/!hugo!blox/hugo-blox-builder/modules/blox-tailwind@v0.2.1-0.20240602133901-492e343c2a33/layouts/_default/baseof.html:7:5": execute of template failed: template: _default/single.html:7:5: executing "_default/single.html" at <partial "site_head" .>: error calling partial: "/home/ismail/.cache/hugo_cache/modules/filecache/modules/pkg/mod/github.com/!hugo!blox/hugo-blox-builder/modules/blox-tailwind@v0.2.1-0.20240602133901-492e343c2a33/layouts/partials/site_head.html:261:6": execute of template failed: template: partials/site_head.html:261:6: executing "partials/site_head.html" at <partialCached "init.html" .>: error calling partialCached: "/home/ismail/.cache/hugo_cache/modules/filecache/modules/pkg/mod/github.com/!hugo!blox/hugo-blox-builder/modules/blox-tailwind@v0.2.1-0.20240602133901-492e343c2a33/layouts/partials/init.html:5:15": execute of template failed: template: partials/init.html:5:15: executing "partials/init.html" at <.Content>: error calling Content: "/disk/Projeler/web/himtec_dummy/content/contact/index.md:18:1": failed to render shortcode "forms/contact_form": failed to process shortcode: "/disk/Projeler/web/himtec_dummy/layouts/shortcodes/forms/contact_form.html:2:7": execute of template failed: template: shortcodes/forms/contact_form.html:2:7: executing "shortcodes/forms/contact_form.html" at <partial "forms/contact_form" .>: error calling partial: "/disk/Projeler/web/himtec_dummy/layouts/partials/forms/contact_form.html:29:64": execute of template failed: template: partials/forms/contact_form.html:29:64: executing "partials/forms/contact_form.html" at <js.Build>: error calling Build: no Resource provided in transformation
Environment
The Theme
Sorry, I noted that I can’t use more than 2 links since I am a new user. That’s why I deleted the url of the theme
Hugo Blox with Landing Page template
Hugo Env
$ hugo env
hugo v0.134.3-5fb333b9f5ff4ec018f9d78910177d0bec1befb0+extended linux/amd64 BuildDate=2024-09-19T14:28:20Z VendorInfo=gohugoio
GOOS="linux"
GOARCH="amd64"
GOVERSION="go1.23.0"
github.com/sass/libsass="3.6.6"
github.com/webmproject/libwebp="v1.3.2"
The Source Code Group
index.md (contact page)
---
title: Contact
toc: false
show_date: false
pager: false
show_related: false
reading_time: false
share: false
---
#### Email
info@example.com
### Write Us
Write us your thoughts or questions.
{{< forms/contact_form >}}
contact_form.html shortcode
<div>
{{ partial "forms/contact_form" . }}
</div>
contact_form.html partial
The error output points to this file where I use the js.Build command.
<div class="mb-3">
<form method="post" id="form">
<input type="hidden" name="access_key" value="b0907061-6ff2-4111-9c32-5bb1f435e7bf">
<input type="hidden" name="from_name" value="Contact Form">
<input type="hidden" name="subject" value="New Contact Form">
<input type="checkbox" name="botcheck" id="" style="display: none;">
<div class="form-group form-inline">
<label for="inputName">{{ i18n "form_name" }}</label><br>
<input type="text" name="name" class="form-control w-100" id="inputName" placeholder="{{ i18n "form_name" | default "Name" }}" required><br>
</div>
<div class="form-group form-inline">
<label for="inputEmail">{{ i18n "form_email" }}</label><br>
<input type="email" name="email" class="form-control w-100" id="inputEmail" placeholder="{{ i18n "form_email" | default "Email" }}" required><br>
</div>
<div class="form-group">
<label for="inputMessage">{{ i18n "form_message" }}</label><br>
<textarea name="message" class="form-control" id="inputMessage" rows="5" placeholder="{{ i18n "form_message" | default "Message" }}" required></textarea><br>
</div>
<button type="submit" class="btn btn-outline-primary my-2 px-3 py-2 w-100">{{ i18n "form_send" | default "Send" }}</button>
<div id="result"></div>
</form>
</div>
{{ $i18n := dict "form_msg_please_wait" (i18n "form_msg_please_wait") "form_msg_success" (i18n "form_msg_success") "form_msg_success_contact" (i18n "form_msg_success_contact") "form_msg_failure" (i18n "form_msg_failure") }}
{{ $opts := dict "i18n" $i18n "page" "contact" }}
{{ $jsbuilt := resources.Get "js/form_handler_web3forms.js" | js.Build $opts }} <!-- The ERROR line -->
<script src="{{ $jsbuilt.RelPermalink }}" defer></script>
form_handler_web3forms.js javascript file
import {page, i18n} from "@params"
console.debug(`page: ${page}`);
const form = document.getElementById('form');
const result = document.getElementById('result');
form.addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData(form);
const object = Object.fromEntries(formData);
const json = JSON.stringify(object);
result.innerHTML = i18n['form_msg_please_wait']
fetch('https://api.web3forms.com/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: json
})
.then(async (response) => {
let json = await response.json();
if (response.status == 200) {
if (page == "about") {
result.innerHTML = i18n['form_msg_success_contact'];
}
else if (page == "contact") {
result.innerHTML = i18n['form_msg_success_quote'];
}
else {
result.innerHTML = i18n['form_msg_success_contact'];
}
} else {
console.log(response);
result.innerHTML = json.message;
}
})
.catch(error => {
console.log(error);
result.innerHTML = "Something went wrong!";
})
.then(function() {
form.reset();
setTimeout(() => {
result.style.display = "none";
}, 3000);
});
});
I also prepared a minimal reproducible working example that can be modified and build: GitHub - kozmotronik/himtec_dummy. So if someone spots the error, please consider fixing and making a pull request.
According to the js.Build syntax, I don’t see any reason for this error in the code. As far as I see, I do provide the resource to js.Build, but it denies building anyway.
I would appreciate if someone points me out what I am doing wrong.
Any idea or help is highly appreciated. Thanks in advance and thanks for your time.