Hugo Pipes not picking up local npx installation

support
1

I’ve purchased a theme from gethugothemes and am attempting to follow the instructions here:

I have unzipped the theme into my hugo project’s themes/ directory, set the theme in the hugo.toml file and copied the theme’s exampleSite files into my project root. I then call hugo server.

Unfortunately, this fails with an error:

Error: error building site: POSTCSS: failed to transform "css/style.css" (text/css). Check your PostCSS installation; install with "npm install postcss-cli". See https://gohugo.io/hugo-pipes/postcss/: binary with name "npx" not found

However, I do have npx installed:

$ which npx
/home/jaypipes/.nvm/versions/node/v19.4.0/bin/npx

$ hugo env
hugo v0.115.4-dc9524521270f81d1c038ebbb200f0cfa3427cc5+extended linux/amd64 BuildDate=2023-07-20T06:49:57Z VendorInfo=snap:0.115.4
GOOS="linux"
GOARCH="amd64"
GOVERSION="go1.19.11"
github.com/sass/libsass="3.6.5"
github.com/webmproject/libwebp="v1.2.4"
github.com/sass/dart-sass/protocol="2.1.0"
github.com/sass/dart-sass/compiler="1.64.0"
github.com/sass/dart-sass/implementation="1.64.0"

I have made zero other changes and have followed the instructions on the above linked documentation page exactly.

2

You need to ask the theme author then…

3

I have sent them an email about this already, yes.

However, I don’t believe it has to do with the theme. I think this is a Hugo Pipes issue as outlined in Hugo Pipes not picking up local npx installation

4

From my comment on the closed GitHub issue:

Please create a topic on the forum, and be prepared to share your project repository, privately if you wish.

5

Maybe I’m not understanding something, Joe, but isn’t that exactly what I have done here? I created a topic…

6

We’re missing this bit…

7

I cannot share the repository because this is a theme I downloaded (for $$$) and they disallow publicly sharing.

I was able to make progress by copying the package.json file from the theme into my top-level project root and running npm install then npm dev run.

For people who are not web developers and steeped in the (excruciatingly overcomplicated) world of all the Javascript tooling and endless libraries and frameworks, it’s very difficult to use Hugo with any of these themes that rely on the node.js toolset…

It’s like you need a PhD in CSS and Javascript just to get the most basic things to work…

8

A post was split to a new topic: PostCSS problem with Cloudflare Pages

9

Try updating NodeJS dependencies step:
- name: Install Node.js dependencies
run: |
[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true
sudo npm install -g postcss-cli
sudo npm install -g npx --force
npm install tailwindcss@latest