Building JS assets with npm packages

Maybe I’m going at this the wrong way.

The current site I run build over 15,000 pages of articles, and has an API from a Django instance. The plan is to have hugo manage just the static content and use JS to fetch the different lists of articles.

There’s an index.js file in assets/js, and npm packages are installed in assets/node_modules

index.js:

import 'htmx.org';
import "htmx.org/dist/ext/client-side-templates.js"
import "handlebars"

section.html

{{ $js := resources.Get "js/index.js" | js.Build}}
<script src="{{$js.Permalink}}"></script>

From hugo server:

Error: Error building site: JSBUILD: failed to transform "js/index.js" (text/javascript): 
"/Users/brunoamaral/Labs/gregory-ms-website/assets/node_modules/handlebars/lib/index.js:17:19": 
Could not resolve "fs"

Is this the right way to build javascript assets with hugo?

what am I missing in order to import handlebars ?

Your node_modules directory should be at the root of your project, not in assets. At least that’s how I build all my scripts with Hugo.

thanks for that, moved it to the root and the imports are still working. The “can’t resolve ‘fs’” is still keeping the site from building though

I don’t think fs is built-in in “browser” javascript, that’s only on node. Is it part of your package.json?

Do you have a repo handy?

1 Like

yes, with a branch called htmx:

Unfortunately I cannot get the submodules (I don’t have the rights). So I cannot really make the site work on my machine.

I was able to make your index.js work on a repo of mine, using the same npm dependencies… I just updated the package.json to move fs to “devDependencies” rather than “dependencies”

I usually delete my node_modules dir in between npm install just to be sure…

Hope this will help.

just tried that, but when I enable handlebars i get the ‘fs’ error.

{
  "name": "gregory-ms-website",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/brunoamaral/gregory-ms-website.git"
  },
  "author": "Bruno Amaral & António Lopes",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/brunoamaral/gregory-ms-website/issues"
  },
  "homepage": "https://github.com/brunoamaral/gregory-ms-website#readme",
  "dependencies": {
    "@fullhuman/postcss-purgecss": "^5.0.0",
    "@jvitela/mustache-wax": "^1.0.4",
    "autoprefixer": "^10.4.13",
    "cssnano": "^5.1.14",
    "handlebars": "^4.7.7",
    "htmx.org": "^1.8.4",
    "mustache": "^4.2.0",
    "postcss": "^8.4.19",
    "purgecss": "^5.0.0"
  },

  "devDependencies": {
    "fs": "^0.0.1-security"
  }
}

index.js


import htmx from "htmx.org";
import "htmx.org/dist/ext/client-side-templates.js"
import Handlebars from "handlebars"

hugo server:

Start building sites …
hugo v0.107.0+extended darwin/arm64 BuildDate=unknown
Error: Error building site: JSBUILD: failed to transform "js/index.js" (text/javascript): Could not resolve "fs"
Built in 2098 ms

I’m sorry. It’s hard to reproduce with your exact context, and I can’t do that because of those private submodules.