resources.Concat with js - slice interface not supported in concat

[asagray]

I have a partial that looks like this:

{{ $main := resources.Get "js/main.js" }}
{{ $jquery := resources.Get "node_modules/jquery/dist/jquery.min.js" }}
{{ $bridget := resources.Get "node_modules/jquery-bridget/jquery-bridget.js" }}
{{ $flickity := resources.Get "node_modules/flickity/dist/flickity.pkgd.min.js" }}

{{ $js := slice $jquery $bridget $flickity $main | resources.Concat "js/app.js" | minify | fingerprint }}

<script type="text/javascript" src="{{ $js.Permalink }}" integrity="{{ $js.Data.Integrity }}"></script>

The error I receive is as follows:

execute of template failed: template: partials/site/scripts.html:6:60: executing “partials/site/scripts.html” at <resources.Con
cat>: error calling Concat: slice interface {} not supported in concat

Line 6 looks very similar to the example code shown here. What gives?

[asagray]

Update: I believe I solved the above with mounts, but I can’t verify because piping CSS isn’t working either in 0.73.0/extended.

#Mounting Node Modules for Pipes
[module]

  [[module.mounts]]
  source ="node_modules/jquery/dist/jquery.min.js"
  target = "assets/js/vendor/jquery.min.js"

  [[module.mounts]]
  source ="node_modules/jquery-bridget/jquery-bridget.js"
  target = "assets/js/vendor/jquery-bridget.js"

  [[module.mounts]]
  source = "node_modules/flickity/dist/flickity.pkgd.min.js"
  target = "assets/js/vendor/flickity.pkgd.min.js"

Error:

template: partials/site/styles.html:4:46: executing "partials/site/styles.html" at 
 <toCSS>: error calling toCSS: type <nil> not supported in Resource transformations

In styles.html I have

{{ $mycss := resources.Get "sass/main.scss" | toCSS | minify }}
<link rel="stylesheet" href="{{ $mycss.Permalink }}">

And there is definitely an /assets/sass/main.scss file with a series of includes

[asagray]

Update 3: It appears that using mounts causes resources.ToCSS to fail. Once removed, the CSS generated fine. Now I’m back where I started with the original concat error.

[ainstushar]

@asagray

toCSS

See this:

Module mounts incompatible with PostCSS import?

See https://gohugo.io/hugo-modules/configuration/#module-config-mounts. When the mounts config was introduced in Hugo 0.56.0, we were careful to preserve the existing staticDir and similar configuration to make sure all existing sites just continued to work. But you should not have both. So if you add a mounts section you should make it complete and remove the old staticDir etc. settings. That is immediately followed by this example: [[module.mounts]] source = "content" …

Did you mount assets folder using the new modules system?

Try adding this to config.toml
[[module.mounts]]
source = “assets”
target = “assets”

[totoff]

For everybody struggling with this problem: I had the same trouble and solved it by putting all files simply under assets/js like so:

{{ $jquery := resources.Get "js/jquery.min.js" // working }}
{{ $jquery := resources.Get "jquery/dist/jquery.js" // not working }}

No idea why it is like so but it solved my problem.

[wbd]

I had the same problem as the OP @asagray, but was able to solve it. Thanks to @ainstushar’s pointer to the “static” mount which is necessary.

in my config.toml:

[module]

  [[module.mounts]]
  source = "static"
  target = "static"

  [[module.mounts]]
  # I pick a specific js file, so only this one file gets mounted
  source = "node_modules/mapbox-gl/dist/mapbox-gl.js"
  target = "static/js/mapbox.js"

  [[module.mounts]]
  # I pick a specific css file, so only this one file gets mounted
  source = "node_modules/mapbox-gl/dist/mapbox-gl.css"
  target = "static/css/mapbox.css"

in my baseof.html:

{{ $maps := resources.Get "/js/mapbox.js" }}
{{ $script := slice $maps | resources.Concat "/js/bundle.js" }}

I get the mapbox.js file next to the bundle.js file in dist/static/js.
mapbox.js is not part of bundle.js. So you have to load it separately.
But that’s just another ( potential ) challenge waiting to be conquered.

[rustyPaul]

Hi,

I’ve been getting the same issue and while I can get it to compile using modules, once I do it doesn’t generate any pages so I think I’ve managed to get an invalid config.toml file somehow (in updating from an old version of hugo to the latest one). I’ve setup the config.toml as suggested to import the relevant files, I added the following to the bottom of the file

[module]

  [[module.mounts]]
    source = "static"
    target = "static"

  [[module.mounts]]
    source = "node_modules/gsap/dist/gsap.min.js"
    target = "static/assets/plugins/gsap/gsap.min.js"
  [[module.mounts]]
    source = "node_modules/gsap/dist/Draggable.min.js"
    target = "static/assets/plugins/gsap/Draggable.min.js"

but then when I import them in my footer partial

{{ $gsapCore := resources.Get  "/assets/plugins/gsap/gsap.min.js" }}
{{ $gsapDraggable := resources.Get  "/assets/plugins/gsap/Draggable.min.js" }}

{{ $pluginJS := slice $gsapCore $gsapDraggable | resources.Concat "assets/js/plugins.js" |  minify }}

I get the following error

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

If I move the module config to the top of my config.toml, then it mounts the files correctly, copies them into the generated public folder but throws a different error on compilation

found no layout file for "HTML" for kind "taxonomy"

If I remove the modules section, and the import then it compiles successfully (There are no missing layout files)

This led me to wonder if I had a malformed config.toml file? I’ve included it at the bottom. Could I also need to update my version of go to use the mounts properly? I’m running on local and compiling using hugo -v

Any help would be gratefully appreciated! I’ll go back to manually copying and importing in the meantime.

assetDir = "static/assets/"
baseURL = "http://hugo.test/"
languageCode = "en-us"
relativeurls = false
theme = "tailwind"
title = "test"
summaryLength = 30

[[menu.nav]]
name = "Back"
URL = "/"
weight = 1
[[menu.nav]]
URL = "/faq"
name = "FAQ"
weight = 2
[[menu.nav]]
URL = "/logout"
name = "Logout"
weight = 3

[params]
custom_css = ["css/custom.css"]
gmapAPI = ""
home = "Home"
logo = "images/logo-white.png"
logoalt = "Logo"
[params.counter]
bgImage = "images/backgrounds/bg-1.jpg"
enable = false
[[params.footer.socialIcon]]
icon = "tf-ion-social-facebook"
url = "#"
[[params.footer.socialIcon]]
icon = "tf-ion-social-twitter"
url = "#"
[[params.footer.socialIcon]]
icon = "tf-ion-social-google-outline"
url = "#"
[[params.footer.socialIcon]]
icon = "tf-ion-social-youtube"
url = "#"
[[params.footer.socialIcon]]
icon = "tf-ion-social-linkedin"
url = "#"
[[params.footer.socialIcon]]
icon = "tf-ion-social-dribbble-outline"
url = "#"
[[params.footer.socialIcon]]
icon = "tf-ion-social-pinterest-outline"
url = "#"
[taxonomies]
category = "categories"
tag = "tags"

[outputFormats.jsonfeed]
  mediaType = "application/json"
  baseName = "feed"
  isPlainText = true

[outputs]
  home = ["html", "jsonfeed"]

[module]

  [[module.mounts]]
    source = "static"
    target = "static"

  [[module.mounts]]
    source = "node_modules/gsap/dist/gsap.min.js"
    target = "static/assets/plugins/gsap/gsap.min.js"
    
  [[module.mounts]]
    source = "node_modules/gsap/dist/Draggable.min.js"
    target = "static/assets/plugins/gsap/Draggable.min.js"