Building JS assets with npm packages

support
1

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 ?

2

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.

1 Like
3

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

4

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
5

yes, with a branch called htmx:

6

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.

7

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
8

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