npx cannot be disabled from exec

[dainfoo]

What version of Hugo are you using (hugo version)?

hugo v0.140.2-aae02ca612a02e085c08366a9c9279f4abb39d94+extended linux/amd64 BuildDate=2024-12-30T15:01:53Z VendorInfo=snap:0.140.2

Does this issue reproduce with the latest release?

Yes.

Problem:

I'm integrating my newly created project with TailwindCSS v4. The Hugo site documentation for TailwindCSS Found here, says that I could use the npm OR the as a standalone executable of the CLI. It is currently not working as I imagined. Looking at the Hugo source code and trying to figure it out, understanding the inner workings, I found something interesting:

On the repository file hugo/resources/resource_transformers/cssjs/tailwindcss.go, line 109 executes a command with the Npx function. The function can be found here: hugo/common/hexec/exec.go. In the header of the function we have:

// Npx will in order:
// 1. Try fo find the binary in the WORKINGDIR/node_modules/.bin directory.
// 2. If not found, and npx is available, run npx --no-install <name> <args>.
// 3. Fall back to the PATH.

This is a good sequence, but has a problem. I'm using the standalone CLI (or at least I want that), npx is installed in my system, because of other projects, but following this approach, it seems that the PATH fallback is never called. When I try to run hugo server --logLevel debug I get this snippet of error:

INFO  tailwindcss: npm ERR! canceled
INFO  tailwindcss: 
INFO  tailwindcss: npm
INFO  tailwindcss: 
INFO  tailwindcss: ERR!
INFO  tailwindcss: A complete log of this run can be found in:
INFO  tailwindcss: npm ERR!     /home/diego/snap/hugo/22151/.npm/_logs/2025-01-06T18_36_16_231Z-debug-0.log

Error: error building site: TAILWINDCSS: failed to transform "/css/main.css" (text/css): npm ERR! canceled

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/diego/snap/hugo/22151/.npm/_logs/2025-01-06T18_36_16_231Z-debug-0.log

Looking further on the logs on /home/diego/snap/hugo/22151/.npm/_logs/2025-01-06T18_36_16_231Z-debug-0.log I have this:

0 verbose cli /snap/hugo/22151/usr/bin/node /snap/hugo/22151/usr/lib/node_modules/npm/bin/npm-cli.js
1 info using [email protected]
2 info using [email protected]
3 timing npm:load:whichnode Completed in 0ms
4 timing config:load:defaults Completed in 1ms
5 timing config:load:file:/snap/hugo/22151/usr/lib/node_modules/npm/npmrc Completed in 1ms
6 timing config:load:builtin Completed in 1ms
7 timing config:load:cli Completed in 1ms
8 timing config:load:env Completed in 0ms
9 timing config:load:file:/home/diego/Projects/penielveiculos/penielveiculos-website/.npmrc Completed in 1ms
10 timing config:load:project Completed in 5ms
11 timing config:load:file:/home/diego/snap/hugo/22151/.npmrc Completed in 0ms
12 timing config:load:user Completed in 0ms
13 timing config:load:file:/snap/hugo/22151/usr/etc/npmrc Completed in 0ms
14 timing config:load:global Completed in 0ms
15 timing config:load:validate Completed in 0ms
16 timing config:load:credentials Completed in 6ms
17 timing config:load:setEnvs Completed in 1ms
18 timing config:load Completed in 16ms
19 timing npm:load:configload Completed in 16ms
20 timing npm:load:mkdirpcache Completed in 1ms
21 timing npm:load:mkdirplogs Completed in 0ms
22 verbose title npm exec tailwindcss --input=- --cwd /home/diego/Projects/penielveiculos/penielveiculos-website --minify
23 verbose argv "exec" "--yes" "false" "--" "tailwindcss" "--input=-" "--cwd" "/home/diego/Projects/penielveiculos/penielveiculos-website" "--minify"
24 timing npm:load:setTitle Completed in 1ms
25 timing config:load:flatten Completed in 2ms
26 timing npm:load:display Completed in 2ms
27 verbose logfile logs-max:10 dir:/home/diego/snap/hugo/22151/.npm/_logs
28 verbose logfile /home/diego/snap/hugo/22151/.npm/_logs/2025-01-06T18_36_16_231Z-debug-0.log
29 timing npm:load:logFile Completed in 3ms
30 timing npm:load:timers Completed in 0ms
31 timing npm:load:configScope Completed in 0ms
32 timing npm:load Completed in 23ms
33 silly logfile start cleaning logs, removing 1 files
34 silly logfile done cleaning log files
35 timing arborist:ctor Completed in 1ms
36 http fetch GET 200 https://registry.npmjs.org/tailwindcss 476ms (cache updated)
37 timing arborist:ctor Completed in 0ms
38 timing arborist:ctor Completed in 0ms
39 timing command:exec Completed in 713ms
40 verbose stack Error: canceled
40 verbose stack     at exec (/snap/hugo/22151/usr/lib/node_modules/npm/node_modules/libnpmexec/lib/index.js:230:17)
40 verbose stack     at async module.exports (/snap/hugo/22151/usr/lib/node_modules/npm/lib/cli.js:78:5)
41 verbose cwd /home/diego/Projects/penielveiculos/penielveiculos-website
42 verbose Linux 5.15.167.4-microsoft-standard-WSL2
43 verbose node v16.20.2
44 verbose npm  v8.19.4
45 error canceled
46 verbose exit 1
47 timing npm Completed in 820ms
48 verbose code 1
49 error A complete log of this run can be found in:
49 error     /home/diego/snap/hugo/22151/.npm/_logs/2025-01-06T18_36_16_231Z-debug-0.log

It is clear that it is trying to use npm under the hood. But it is not what it should do, at least for my needs.

I've found in ChatGPT (I don't know where it pick this from, or if it made it up, but it told me to add this to the partials/head/css.html of my theme skeleton:

{{- $opts := dict "binary" "tailwindcss" "minify" true }}

I will be honest that I didn't find in the source code of Hugo where this could be getting into, but I've tried for peace of mind. Same thing, It didn't work (as I suspected).

With all this information I think that could be a "bug", or at least a lack of configuration, for enabling the use of TailwindCSS without the Npx exec function.

Am I crazy, of this make sense?

[bep]

Looking at the code we do have a third fallback (PATH) if NPX fails, which I suspect it doesn't do in your case.

It is clear that it is trying to use npm under the hood. But it is not what it should do, at least for my needs.

NPX is, as I understand it, bundled into NPM.

I've found in ChatGPT

ChatGPT is doing a lot of guessing.

[jmooring]

My first thought is to test this setup with something other than the snap package.

The Hugo snap package is strictly confined. Our snap package includes Node, Dart Sass, and other apps to which we shell out. Our snap package does not include the TailwindCSS standalone CLI. And I don't see that changing unless they provide executables for all the platforms that our Snap can run on.

[dainfoo]

Looking at the code we do have a third fallback (PATH) if NPX fails, which I suspect it doesn't do in your case.

It is clear that it is trying to use npm under the hood. But it is not what it should do, at least for my needs.

NPX is, as I understand it, bundled into NPM.

I've found in ChatGPT

ChatGPT is doing a lot of guessing.

I imagined that about ChatGPT, it looked a lot of a made-up response. But I'm learning Hugo, so could be something that exists, and I didn't know about. I will try the @jmooring recommendation. I will try Hugo binary directly. But for what it look like, it's like the PATH is only fallback if npm is not installed (and yes, npx is part of npm), witch is not my case, it is, but I don't want to use it.

[dainfoo]

My first thought is to test this setup with something other than the snap package.

The Hugo snap package is strictly confined. Our snap package includes Node, Dart Sass, and other apps to which we shell out. Our snap package does not include the TailwindCSS standalone CLI. And I don't see that changing unless they provide executables for all the platforms that our Snap can run on.

Thanks for your orientation @jmooring, but it didn't work. Here are the logs:

Watching for changes in /home/diego/Projects/penielveiculos/penielveiculos-website/{archetypes,assets,content,data,i18n,layouts,static,themes}
Watching for config changes in /home/diego/Projects/penielveiculos/penielveiculos-website/hugo.yaml, /home/diego/Projects/penielveiculos/penielveiculos-website/themes/penielveiculos/hugo.yaml
Start building sites … 
hugo v0.140.2-aae02ca612a02e085c08366a9c9279f4abb39d94+extended linux/amd64 BuildDate=2024-12-30T15:01:53Z VendorInfo=gohugoio

Built in 1394 ms
Error: error building site: TAILWINDCSS: failed to transform "/css/main.css" (text/css): npm error npx canceled due to missing packages and no YES option: ["[email protected]"]
npm notice
npm notice New major version of npm available! 10.9.0 -> 11.0.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.0.0
npm notice To update run: npm install -g [email protected]
npm notice
npm error A complete log of this run can be found in: /home/diego/.npm/_logs/2025-01-06T21_02_40_226Z-debug-0.log

[bep]

npm error npx canceled due to missing packages and no YES option:

Yea, right ... We check that npx exists, but not that it succeeds, which we should probably do.

If you want a global tailwindcss install, have you considered:

npm install -g tailwindcss@next

That should work with npx.

[dainfoo]

npm error npx canceled due to missing packages and no YES option:

Yea, right ... We check that npx exists, but not that it succeeds, which we should probably do.

If you want a global tailwindcss install, have you considered:

npm install -g tailwindcss@next

That should work with npx.

Yeah, this is a solution that I thought of since the beginning. But the problem is that, with TailwindCSS v4 (which is a total rewrite using Rust), we now have the option to ditch the node ecosystem completely. And this is my goal. I have the tailwindcss binary globally on my system already, it is in my PATH. The binary replaces all the postcss external need and the other plugins, it is self contained like Hugo, this is a huge benefit.

Do you understand my point?

And I think a lot of folks now and in the future will go in that direction.

[jmooring]

On Linux, not using a snap, with the standalone Tailwind CLI installed (named tailwindcss and in my PATH)...

jmooring@ubuntu:~/code/hugo-docker-test (main)$ hugo

Start building sites … 
hugo v0.141.0-DEV-b7b49fb0f8302c22aa983505546c9f14bea6687e+extended linux/amd64 BuildDate=2025-01-06T14:07:05Z

ERROR TAILWINDCSS: failed to transform "/temp/css" (application/octet-stream). You need to install TailwindCSS CLI. See https://gohugo.io/functions/css/tailwindcss/: binary with name "tailwindcss" not found using npx
Total in 508 ms
Error: error building site: render: failed to render pages: render of "/home/jmooring/code/hugo-docker-test/content/other-tests/tailwindcss.md" failed: "/home/jmooring/code/hugo-docker-test/layouts/_default/tailwindcss.html:16:23": execute of template failed: template: _default/tailwindcss.html:16:23: executing "main" at <.Content>: error calling Content: TAILWINDCSS: failed to transform "/temp/css" (application/octet-stream). You need to install TailwindCSS CLI. See https://gohugo.io/functions/css/tailwindcss/: binary with name "tailwindcss" not found using npx

jmooring@ubuntu:~/code/hugo-docker-test (main)$ tailwindcss -v
≈ tailwindcss v4.0.0-beta.8

[dainfoo]

On Linux, not using a snap, with the standalone Tailwind CLI installed (named tailwindcss and in my PATH)...

jmooring@ubuntu:~/code/hugo-docker-test (main)$ hugo

Start building sites … 
hugo v0.141.0-DEV-b7b49fb0f8302c22aa983505546c9f14bea6687e+extended linux/amd64 BuildDate=2025-01-06T14:07:05Z

ERROR TAILWINDCSS: failed to transform "/temp/css" (application/octet-stream). You need to install TailwindCSS CLI. See https://gohugo.io/functions/css/tailwindcss/: binary with name "tailwindcss" not found using npx
Total in 508 ms
Error: error building site: render: failed to render pages: render of "/home/jmooring/code/hugo-docker-test/content/other-tests/tailwindcss.md" failed: "/home/jmooring/code/hugo-docker-test/layouts/_default/tailwindcss.html:16:23": execute of template failed: template: _default/tailwindcss.html:16:23: executing "main" at <.Content>: error calling Content: TAILWINDCSS: failed to transform "/temp/css" (application/octet-stream). You need to install TailwindCSS CLI. See https://gohugo.io/functions/css/tailwindcss/: binary with name "tailwindcss" not found using npx

jmooring@ubuntu:~/code/hugo-docker-test (main)$ tailwindcss -v
≈ tailwindcss v4.0.0-beta.8

Now you nailed the problem.

[jmooring]

Note that even if we fix this, you cannot use the Hugo snap if you use the Tailwind standalone CLI.

[dainfoo]

Note that even if we fix this, you cannot use the Hugo snap if you use the Tailwind standalone CLI.

I've already ditch the snap. I'm using the binary from the release page, see:

hugo v0.140.2-aae02ca612a02e085c08366a9c9279f4abb39d94+extended linux/amd64 BuildDate=2024-12-30T15:01:53Z VendorInfo=gohugoio

[bep]

I haven't read the latest comments, but I do agree that this behaviour is ... annoying, so I'm fixing it.

[bep]

I will push a fix for this, but I suspect there must be a odd issue with npx and the new TailwindCLI. If I put tailwindcss in my path and make sure to get rid of all other NPM installs of that, then:

• npx which tailwindcss => /Users/bep/bin/tailwindcss
• npx tailwindcss -h => could not determine executable to run

I will fix this by changing the "try order" for tailwindcss.

[dainfoo]

I haven't read the latest comments, but I do agree that this behaviour is ... annoying, so I'm fixing it.

Thank you @bep for understanding. It means a lot! This will help a lot my workflow! It's fantastic how you guys fix things quickly!

Thanks for all the hard work!!