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

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?

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

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.

See this:

Did you mount assets folder using the new modules system?

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

1 Like

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.

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.

1 Like

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"