HUGO

Hugo throws error during minification: JSBUILD Could not resolve "javascript path"

I’m having a problem when minifying javascript.

I have the following template code:

{{/* Bootstrap scripts */}}

{{ $jsData := resources.Get "js/bootstrap-5.0.0-beta1/dom/data.js" }}
{{ $jsEventHandler := resources.Get "js/bootstrap-5.0.0-beta1/dom/event-handler.js" }}
{{ $jsManipulator := resources.Get "js/bootstrap-5.0.0-beta1/dom/manipulator.js" }}
{{ $jsToast := resources.Get "js/bootstrap-5.0.0-beta1/toast.js" }}
{{ $jsSelectorEngine := resources.Get "js/bootstrap-5.0.0-beta1/dom/selector-engine.js" }}
{{ $jsCollapse := resources.Get "js/bootstrap-5.0.0-beta1/collapse.js" }}

{{/* Scripts */}}
{{ $jsCookieAlert := resources.Get "js/cookie-alert.js" }}

{{/* Bundle javascripts */}}
{{ $bundle := slice $jsData $jsEventHandler $jsManipulator $jsToast $jsSelectorEngine $jsCollapse $jsCookieAlert | resources.Concat "js/bundle.js" }}
{{ $optimizedBundle := $bundle | js.Build (dict "minify" true) | resources.Minify | fingerprint }}
<script defer src="{{ $optimizedBundle.RelPermalink}}"></script>

Inside the file js/cookie-alert.js I’m initializing my Toast for displaying a cookie alert.

// Initialize and visualize cookie alert
var toastElement = document.querySelector('#cookie-alert');
var toast = new Toast(toastElement, {"autohide": false});
toast.show();

When I run the command:

hugo server -D --disableFastRender

the console throws the following error:

Start building sites … 
ERROR 2021/01/23 13:16:25 js.Build failed: Could not resolve "./dom/event-handler.js"
ERROR 2021/01/23 13:16:25 js.Build failed: Could not resolve "./dom/manipulator.js"
ERROR 2021/01/23 13:16:25 js.Build failed: Could not resolve "./dom/selector-engine.js"
Built in 1509 ms
Error: Error building site: JSBUILD: failed to transform "js/bundle.js" (application/javascript): Could not resolve "./dom/data.js"

But if I remove the js.Build and the resources.Minify from the optimized bundle variable and using it this way:

{{ $optimizedBundle := $bundle | fingerprint }}

everything works fine. The problem here is that I’m not minificating the bundle.

So, how can I minify my bundle? I’m not understanding where I’m doing wrong.

My configuration is:

baseURL = "https://example.com/"
languageCode = "en-EN"
title = "My New Hugo Site"
enableRobotsTXT = true
disableKinds = ["taxonomy", "term"]
assetDir = "resources/assets"

My javascript files are inside resources/assets/js.

Also, inside the assets folder, I have a file called jsconfig.json with the following content

{
 "compilerOptions": {
  "baseUrl": ".",
  "paths": {
   "*": [
    "*"
   ]
  }
 }
}

first make it simpler for test

{{ $optimizedBundle := $bundle | resources.Minify}}

and after this

{{ $optimizedBundle := $bundle | resources.Minify | resources.Fingerprint "sha512" }}

They belong into assets/js, not resources/assets/js. Resources is for files prepared by Hugo.

I was debugging for about an hour and I had some results (but still some other problems). First of all, I was using the wrong bootstrap files. The files I was using weren’t the source files. Instead, I was using the dist files.

Second, the error now I’m having is that I have variables already declared in multiple files:

Start building sites … 
ERROR 2021/01/24 17:20:04 js.Build failed: Could not resolve "../util/index"
ERROR 2021/01/24 17:20:04 js.Build failed: Multiple exports with the same name "default"
ERROR 2021/01/24 17:20:04 js.Build failed: Multiple exports with the same name "default"
ERROR 2021/01/24 17:20:04 js.Build failed: "getjQuery" has already been declared
ERROR 2021/01/24 17:20:04 js.Build failed: "onDOMContentLoaded" has already been declared
ERROR 2021/01/24 17:20:04 js.Build failed: "TRANSITION_END" has already been declared
ERROR 2021/01/24 17:20:04 js.Build failed: "emulateTransitionEnd" has already been declared
ERROR 2021/01/24 17:20:04 js.Build failed: "getTransitionDurationFromElement" has already been declared
ERROR 2021/01/24 17:20:04 js.Build failed: "reflow" has already been declared
ERROR 2021/01/24 17:20:04 js.Build failed: "typeCheckConfig" has already been declared
ERROR 2021/01/24 17:20:04 js.Build failed: Could not resolve "./util/index"
ERROR 2021/01/24 17:20:04 js.Build failed: "Data" has already been declared
ERROR 2021/01/24 17:20:04 js.Build failed: Could not resolve "./dom/data"
ERROR 2021/01/24 17:20:04 js.Build failed: "EventHandler" has already been declared
ERROR 2021/01/24 17:20:04 js.Build failed: Could not resolve "./dom/event-handler"
ERROR 2021/01/24 17:20:04 js.Build failed: "Manipulator" has already been declared
ERROR 2021/01/24 17:20:04 js.Build failed: Could not resolve "./dom/manipulator"
ERROR 2021/01/24 17:20:04 js.Build failed: Could not resolve "./base-component"
ERROR 2021/01/24 17:20:04 js.Build failed: Multiple exports with the same name "default"
ERROR 2021/01/24 17:20:04 js.Build failed: Multiple exports with the same name "default"
ERROR 2021/01/24 17:20:04 js.Build failed: "getjQuery" has already been declared
ERROR 2021/01/24 17:20:04 js.Build failed: "onDOMContentLoaded" has already been declared
ERROR 2021/01/24 17:20:04 js.Build failed: "TRANSITION_END" has already been declared
ERROR 2021/01/24 17:20:04 js.Build failed: "emulateTransitionEnd" has already been declared
ERROR 2021/01/24 17:20:04 js.Build failed: "getSelectorFromElement" has already been declared
ERROR 2021/01/24 17:20:04 js.Build failed: "getElementFromSelector" has already been declared
ERROR 2021/01/24 17:20:04 js.Build failed: "getTransitionDurationFromElement" has already been declared
ERROR 2021/01/24 17:20:04 js.Build failed: "isElement" has already been declared
ERROR 2021/01/24 17:20:04 js.Build failed: "reflow" has already been declared
ERROR 2021/01/24 17:20:04 js.Build failed: "typeCheckConfig" has already been declared
ERROR 2021/01/24 17:20:04 js.Build failed: "Data" has already been declared
ERROR 2021/01/24 17:20:04 js.Build failed: "EventHandler" has already been declared
ERROR 2021/01/24 17:20:04 js.Build failed: "Manipulator" has already been declared
ERROR 2021/01/24 17:20:04 js.Build failed: "SelectorEngine" has already been declared
ERROR 2021/01/24 17:20:04 js.Build failed: Could not resolve "./dom/selector-engine"
ERROR 2021/01/24 17:20:04 js.Build failed: "BaseComponent" has already been declared
ERROR 2021/01/24 17:20:04 js.Build failed: "NAME" has already been declared
ERROR 2021/01/24 17:20:04 js.Build failed: "DATA_KEY" has already been declared
ERROR 2021/01/24 17:20:04 js.Build failed: "EVENT_KEY" has already been declared
ERROR 2021/01/24 17:20:04 js.Build failed: "Default" has already been declared
ERROR 2021/01/24 17:20:04 js.Build failed: "DefaultType" has already been declared
ERROR 2021/01/24 17:20:04 js.Build failed: "EVENT_SHOW" has already been declared
ERROR 2021/01/24 17:20:04 js.Build failed: "EVENT_SHOWN" has already been declared
ERROR 2021/01/24 17:20:04 js.Build failed: "EVENT_HIDE" has already been declared
ERROR 2021/01/24 17:20:04 js.Build failed: "EVENT_HIDDEN" has already been declared
ERROR 2021/01/24 17:20:04 js.Build failed: "CLASS_NAME_SHOW" has already been declared
ERROR 2021/01/24 17:20:04 js.Build failed: Multiple exports with the same name "default"
Built in 1513 ms
Error: Error building site: JSBUILD: failed to transform "js/bundle.js" (application/javascript): "getjQuery" has already been declared

How can I solve this problem that in multiple files bootstrap is declarin the same variables?

This is a different issue. Please open a new post with these errors AND how you set up your javascript libraries AND the layout file that has js.Build in it.