Imported 'params' that are piped to js file don't update per page

support
1

Hi, the challenge I’m facing is getting the value of params from within a JS file, as specified in this doc:
https://gohugo.io/hugo-pipes/js/#option

I’m able to retrieve the values, however, the values I get do not match the context of the current page.

.html file

{{ $root := "home" }}
{{ if not .Page.IsHome }}
	{{ $root = .Page.RelPermalink | replaceRE "/" "" }}
{{ end }}
{{ $params = dict "rootId" $root "someArg" "some arg value" "pageSections" .Params.page_sections }}

<div style="color: red;">{{ $params.rootId }}</div> <!-- THIS DISPLAYS CORRECTLY -->

{{ $js := resources.Get "js/jsx-components/PageLayout.jsx" | js.Build (dict "params" $params "shims" $shims "defines" $defines) }}

<script src="{{ $js.RelPermalink }}" defer></script>

From PageLayout.jsx

import * as params from '@params';

console.log({params}); // THIS DOES NOT DISPLAY CORRECTLY. IT WILL SHOW RESPECTIVE VALUES FOR A DIFFERENT PAGE

I’ve attempted to follow a similar pattern as displayed here with some modifications.

This is the first time using Hugo so it’s possible that I’m missing something fundamental. Any help would be appreciated. I’ve created a slimmed down repo if it helps to view the larger scope.

Created a demo repo here: GitHub - seejonlee/hugo-jsx

If you click around the nav items at the top and view the console you’ll notice the differences specified in the code snippets above.

2

It’s important to understand that the above will end up as public/js/jsx-components/PageLayout.js. There can be only one file with that name, so if you want to build one per page, you need to set a unique targetPath in the js.Build options.

3

Well that definitely clarifies what I was experiencing and makes a lot of sense. Thanks @bep, really appreciate your time in taking a look. It’s really cool that Hugo has this capability.

4

To be precise: It will only be copied to public if you use the RelPermalink or similar, not if you just prints the .Content.

The above is also how we make sure to not do unneeded work for the common case (1 JS file for a complete site); it’s built once only.

1 Like
5

Oh that’s cool and good to know. I’ve just scratched the surface of Hugo so very much enjoy learning these bits. Thanks again @bep!

6

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