Questions about warnings on install and errors on build

[Backspaze]

Summary

I set up a project yesterday and ran into some warnings on install and errors on build. I'm wondering if I should create an issue or if this is something that should be handled here in the discussions. The main issue here is Error: error building site: POSTCSS: failed to transform "main.css" (text/css): TypeError: purgecss is not a function which is stopping me from using this and I have not been able to find a solution for it.

The warnings and errors are shown in the steps to reproduce below. I'm thinking that the warnings about some functions that will stop working in the next major version and so on, is more for the developers to help update the templates with up to date functions and dependencies, but please correct me on that if I'm wrong.

In addition to the issues mentioned below, I also stumbled upon #1360 and downgraded Hugo to v0.145.0 which at least fixed that issue, but the main issue remains.

More details

• npm run dev works fine.
• npm run preview creates a preview, but if I click on any of the links I get a message in the browser saying there's a problem with the server. If I cancel the preview and try again, it fails to load the CSS with the following error in the browser console: The http://localhost:4173/scss/app.scss stylesheet didn't load because its MIME type, "text/html", isn't "text/css".
• npm run build generates the main error message quoted below,

Error: error building site: POSTCSS: failed to transform "main.css" (text/css): TypeError: purgecss is not a function
    at Object.<anonymous> (C:\Thulite\thulite-project\config\postcss.config.js:8:9)
    at Module._compile (node:internal/modules/cjs/loader:1529:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1613:10)
    at Module.load (node:internal/modules/cjs/loader:1275:32)
    at Module._load (node:internal/modules/cjs/loader:1096:12)
    at cjsLoader (node:internal/modules/esm/translators:298:15)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:240:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:263:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:540:24)
    at async req (C:\Thulite\thulite-project\node_modules\postcss-load-config\src\req.js:22:13)

When I first tried this, I thought the build process still created a public folder that was somewhat usable, but that turned out to be the remnants of the previous dev and preview builds. In that public folder I could see that the main index.html was referencing rel=stylesheet href="/scss/app.scss", which explains the previously mentioned CSS error, as it should be called main.XXXXXXX....css.

After some more troubleshooting and internet searching, I didn't get anywhere, so today I figured I'll just try and see if this is reproducible and post something here. It turns out it is reproducible, but it still might be a local issue in my environment, so I'll post some specs and steps below.

Specs

OS: Windows 10 Pro 22H2 (19045.6093) 
Hugo: v0.145.0 extended 
NPM: 11.4.2
Node: 20.19.3 

Steps to reproduce

md Thulite

cd .\Thulite\

npm create thulite@latest -- --template doks

√ Project name: ... thulite-project

cd .\thulite-project\

npm install

Generates a bunch of warnings.

npm warn Unknown project config "enable-pre-post-scripts". This will stop working in the next major version of npm.
npm warn Unknown project config "auto-install-peers". This will stop working in the next major version of npm.
npm warn Unknown project config "node-linker". This will stop working in the next major version of npm.
npm warn Unknown project config "prefer-symlinked-executables". This will stop working in the next major version of npm.
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported

added 335 packages, and audited 336 packages in 34s

43 packages are looking for funding
  run `npm fund` for details

2 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

npm run dev

Generates some of the previous warnings.

npm warn Unknown project config "enable-pre-post-scripts". This will stop working in the next major version of npm.
npm warn Unknown project config "auto-install-peers". This will stop working in the next major version of npm.
npm warn Unknown project config "node-linker". This will stop working in the next major version of npm.
npm warn Unknown project config "prefer-symlinked-executables". This will stop working in the next major version of npm.

> thulite-project@0.0.0 dev
> hugo server --disableFastRender --noHTTPCache

Watching for changes in C:\Thulite\thulite-project\{assets,content,layouts,node_modules,package.json,static}
Watching for config changes in C:\Thulite\thulite-project\config\_default, C:\Thulite\thulite-project\config\_default\menus
Start building sites …
hugo v0.145.0-666444f0a52132f9fec9f71cf25b441cc6a4f355+extended windows/amd64 BuildDate=2025-02-26T15:41:25Z VendorInfo=gohugoio


                   | EN
-------------------+-----
  Pages            | 29
  Paginator pages  |  0
  Non-page files   |  0
  Static files     | 13
  Processed images |  4
  Aliases          |  4
  Cleaned          |  0

Built in 3694 ms
Environment: "development"
Serving pages from disk
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)

Press Ctrl+C to stop
Terminate batch job (Y/N)? y

npm run preview

Generates some of the previous warnings again.

npm warn Unknown project config "enable-pre-post-scripts". This will stop working in the next major version of npm.
npm warn Unknown project config "auto-install-peers". This will stop working in the next major version of npm.
npm warn Unknown project config "node-linker". This will stop working in the next major version of npm.
npm warn Unknown project config "prefer-symlinked-executables". This will stop working in the next major version of npm.

> thulite-project@0.0.0 preview
> vite preview --outDir public

  ➜  Local:   http://localhost:4173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Press Ctrl+C to stop
Terminate batch job (Y/N)? y

npm run build

Generates some of the previous warnings and the main error message.

npm warn Unknown project config "enable-pre-post-scripts". This will stop working in the next major version of npm.
npm warn Unknown project config "auto-install-peers". This will stop working in the next major version of npm.
npm warn Unknown project config "node-linker". This will stop working in the next major version of npm.
npm warn Unknown project config "prefer-symlinked-executables". This will stop working in the next major version of npm.

> thulite-project@0.0.0 build
> hugo --minify --gc

Start building sites …
hugo v0.145.0-666444f0a52132f9fec9f71cf25b441cc6a4f355+extended windows/amd64 BuildDate=2025-02-26T15:41:25Z VendorInfo=gohugoio

Total in 2512 ms
Error: error building site: POSTCSS: failed to transform "main.css" (text/css): TypeError: purgecss is not a function
    at Object.<anonymous> (C:\Thulite\thulite-project\config\postcss.config.js:8:9)
    at Module._compile (node:internal/modules/cjs/loader:1529:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1613:10)
    at Module.load (node:internal/modules/cjs/loader:1275:32)
    at Module._load (node:internal/modules/cjs/loader:1096:12)
    at cjsLoader (node:internal/modules/esm/translators:298:15)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:240:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:263:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:540:24)
    at async req (C:\Thulite\thulite-project\node_modules\postcss-load-config\src\req.js:22:13)

[h-enk]

Thanks for reporting your findings — I will take them into account!

I'm working on updating Doks for the latest Hugo (with high priority, available soon) — see also thuliteio/create-thulite#47

[Backspaze]

Thanks for getting back to me. I read through my post again and noticed that there was no clear question in it, so I've updated for clarity.

The main issue here is Error: error building site: POSTCSS: failed to transform "main.css" (text/css): TypeError: purgecss is not a function which is stopping me from using this and I have not been able to find a solution for it.

Do you, or anyone else that might stumble upon this thread, have any idea how I can fix this?

If this is not a local issue on my computer, I figure everyone who's starting a project from scratch using the template should run into this. But I'm not seeing any GitHub issues about this.

I took a look at the linked issue, and followed the breadcrumbs from there, but I couldn't find anything there to solve this.

It would be nice to get npm run preview working also, but as npm run dev works, the main problem here is the failing npm run build.

[Backspaze]

I took another swing at troubleshooting this and found a solution for the main issue. As mentioned in my previous comment, I'm a bit surprised to not see more discussions/issues about this since it happens in the default configuration of the template.

In postcss.config.js there's a line that looks like this: const purgecss = require('@fullhuman/postcss-purgecss');. I changed it to const purgecss = require('@fullhuman/postcss-purgecss').default;, and now npm run build works without errors.

Should the template be updated with this change?

I've also noticed the reason why none of the internal links worked when I ran npm run preview. They all pointed to http://localhost:1313/, which is the address used in npm run dev, while preview publishes at http://localhost:4173/. This mashup only happens if you first run npm run dev and then run npm run preview. If you run npm run build and then npm run preview, the preview works fine.

It's affected by the baseURL setting and the commands entered under scripts in package.json, which by default is configured as shown below. Anyway, as the correct order in which to use the commands is (as I understand it) dev > build > preview, I've not done any more digging to find the correct options to use for the scripts to avoid this issue,

  "scripts": {
    "create": "hugo new",
    "dev": "hugo server --disableFastRender --noHTTPCache",
    "format": "prettier **/** -w -c",
    "build": "hugo --minify --gc",
    "preview": "vite preview --outDir public"
  },

[h-enk]

In postcss.config.js there's a line that looks like this: const purgecss = require('@fullhuman/postcss-purgecss');. I changed it to const purgecss = require('@fullhuman/postcss-purgecss').default;, and now npm run build works without errors.

Should the template be updated with this change?

This is the new way: https://purgecss.com/getting-started.html

And this is what the new template should look like/now looks like: https://github.com/thuliteio/doks/blob/main/config/postcss.config.js

[h-enk]

The Thulite/Hugo workflow is described here — I will add an updated version to the Doks docs: https://vermeer.thulite.io/docs/start-here/workflow/

So, dev is a development preview and preview is the preview of a production build (which thus needs build)

[h-enk]

See the new Workflow guide