js.Build resolve behaviour changes in 0.78.1

support
1

The JS for the paperesque theme is built using Hugo’s asset processing pipeline, but it stopped building as of hugo 0.78.1. I’m not entirely sure why, and would love some help :slight_smile:

The specific error is

Error: Error building site: JSBUILD: failed to transform “js/main.js” (application/javascript): “/Users/fabian/Code/hugoThemes/_script/hugoThemeSite/exampleSite2/themes/paperesque/assets/js/floatingFootnotes.js:1:31”: Could not resolve “@juggle/resize-observer” (mark it as external to exclude it from the bundle)

@juggle/resize-observer is listed in the package.json in the theme, and is has been installed into the node_modules directory, which is checked into the theme’s repo.

When I build the example site for the theme using:

git clone git@github.com:capnfabs/paperesque.git
cd paperesque/exampleSite
hugo serve --themesDir=../..

…then everything works fine, but when I try to add it to as a theme to another repo, the build fails. E.g.:

git clone git@github.com:gohugoio/hugoBasicExample.git basic-example
cd basic-example
mkdir themes && git clone git@github.com:capnfabs/paperesque.git themes/paperesque
HUGO_THEME=paperesque hugo serve

I think it’s got something to do with this comment in the docs:

From Hugo 0.78.1 the start directory for resolving NPM packages (aka. packages that live inside a node_modules folder) is always the main project folder.

My question is, what do I need to do so that the theme can import JS installed in its node_modules directory again?

Thanks in advance!

2

I would just drop the idea of a them having “its node_modules”. You can use hugo npm pack to consolidate these NPM dependencies if needed.

3

Thanks @bep!

So to make sure I understand, if I want to keep using the JS Build Pipeline in the theme, my instructions to people using the theme should be something like:

git clone git@github.com:capnfabs/paperesque.git themes/paperesque
hugo mod npm pack
npm install

Is that correct? If so, is there still a way to use Hugo to build the theme’s JS, but without theme users having to worry about NPM?

4

@capnfabs

I would think that you need to generate the theme’s resources and then commit them in the theme repo. Same as authors are required to do for Hugo (Go) Pipes and Modules, when submitting their theme on the Hugo Themes Showcase.

However I do not use the Hugo JS pipeline myself, since I am allergic to npm (due to past incidents) so I do not know if the above works the same.

Please test locally to see if the exampleSite works with the basic version of Hugo and without npm once the resources are generated.

If you do not have such a local setup then post a link here for me to clone the theme along with its committed resources and I will test it to see if it generates without a npm installation on Hugo basic.

5

Thanks @alexandros!

I would think that you need to generate the theme’s resources and then commit them in the theme repo

I was doing this before, and switched to js.Build (commit) once it landed in Hugo, and after getting requests from users on how to adapt parts of the theme JS to their own themes. I’ll switch back to that to get the theme working for the Hugo themes site again.

6

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.