Error calling Concat: slice []interface {} not supported in concat

support
1

Hi,

Thanks for Hugo - it’s awesome.

I’m building my very own custom theme and ran into the same issue that some other people had but couldn’t find any working solution.

I’m still getting this error in late 2022:
error calling Concat: slice interface {} not supported in concat

Concat issue discussed here

I’m trying to concatenate 3 Javascript files and bundle them into one bundle.js file.

Basically Popper, Bootstrap and one custom Javascript file.

My _default/baseof.html looks like this.

`<body class="light" id="top">
	{{ template "header" . }}
	{{ template "main" . }}
	{{ template "footer" . }}
	{{ template "contact-button" . }}
	{{ template "modal-search" . }}

	{{ $global := resources.Get "js/popper.min.js" }}
	{{ $global := resources.Get "js/bootstrap.min.js" }}
	{{ $plugin := resources.Get "js/actions.js"}}
	{{ $js := slice $global $plugin | resources.Concat "js/bundle.js" }}
	<script src="{{ $js.Permalink }}" integrity="{{ $js.Data.Integrity }}"></script>
</body>
`

In my config.toml I’ve also tried playing around with the modules.mounts configuration as it was mentioned in some other posts but without success.

However, I’m highly confused on what the current state of the art is on this matter in 2022.

Since the documentation is three lines long, I’d appreciate it if somebody could maybe post or point to a working example with all things required, not just some pieces one can’t figure out where to put.

I’m using hugo v0.102.3 +extended windows/amd64 BuildDate=2022-09-01T10:16:19Z

Thanks alot in advance.

2

With your JS files in the assets directory…

assets/
└── js/
    ├── actions.js
    ├── bootstrap.min.js
    └── popper.min.js

…this works as expected:

{{ $a := resources.Get "js/actions.js" }}
{{ $b := resources.Get "js/bootstrap.min.js" }}
{{ $c := resources.Get "js/popper.min.js" }}
{{ $js := slice $a $b $c | resources.Concat "js/bundle.js" | minify | fingerprint }}
<script src="{{ $js.Permalink }}" integrity="{{ $js.Data.Integrity }}"></script>
1 Like
3

@jmooring Thank you very, very much.

I’ve got this working now. I’ve had no assets folder, but instead used a static folder to put my css and js files in (which worked). Since this is my first Hugo project, there’s still a lot to pick up.

For all follow-up readers:

  • create a folder in themes/your-theme/assets/
  • then use the code above in your layouts/_default/baseof.html
  • run hugo dev or hugo build

Thanks again for the quick help :slight_smile:

4

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