Running PostCSS - ESM loader Error

[southcoder]

I’m having terrible problems with Hugo and PostCSS. Everything was working fine for months then suddenly I started getting this problem with unchanged code.
I’m running Hugo extended .DEB, rather than a Snap on Ubuntu 20,04LTS.
I have reinstalled Node with NVM using multiple versions.
I have also tried running NPM globally and also locally inside the Hugo project directory.
I have a simple project stripped right back for testing but nothing I try seems to do any good.

Does anybody recognise this error message? My config is set out below that…

ERROR MESSAGE:-
Start building sites …
hugo v0.93.2-643B5AE9+extended linux/amd64 BuildDate=2022-03-04T12:21:49Z VendorInfo=gohugoio
Error: Error building site: POSTCSS: failed to transform “scss/custom.css” (text/css): internal/process/esm_loader.js:74
internalBinding(‘errors’).triggerUncaughtException(
^
Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only file and data URLs are supported by the default ESM loader. Received protocol ‘node:’
at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:751:11)
at Loader.resolve (internal/modules/esm/loader.js:85:40)
at Loader.getModuleJob (internal/modules/esm/loader.js:229:28)
at ModuleWrap. (internal/modules/esm/module_job.js:51:40)
at link (internal/modules/esm/module_job.js:50:36) {
code: ‘ERR_UNSUPPORTED_ESM_URL_SCHEME’
}
Total in 609 ms

NODE & NPM:-
v16.13.1 (npm v8.1.2)

FILE: postcss.config.js:-
module.exports = {
“plugins”: {
“autoprefixer”: {}
}
};

FILE: package.json
{
“name”: “ns-lightning-test”,
“version”: “1.0.0”,
“description”: “test”,
“main”: “postcss.config.js”,
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”
},
“author”: “NS”,
“license”: “ISC”,
“dependencies”: {
“autoprefixer”: “^10.4.2”,
“browserslist”: “^4.20.0”,
“postcss”: “^8.4.8”,
“postcss-cli”: “^9.1.0”
}
}

Thank you for your time in reading my post. Any help would be greatly appreciated…

[davidsneighbour]

@southcoder

“scss/custom.css”

What is inside of that file? You probably have something going on there along the lines of an inline image that is wrongly formatted. The error is quite clear on that: “Only file and data URLs are supported”.

[bep]

@southcoder

I have a simple project stripped right back for testing but nothing I try seems to do any good.

It would be much easier to help you if you could somehow link to that source (e.g. on GitHub).

[southcoder]

Thank you, David, I will pursue that line of investigation and see if that is the case. My only worry is that this error is now occurring with Hugo projects that previously worked. Maybe I was missing something. I will try to simplify the test css file and see if that helps. I will report back when done testing.

[southcoder]

Hi Bep, thank you for replying. I am going to check out a couple more things and if still stumped then I will place my code on Github later today. Thank you so much for responding and I really appreciate it. I will reply back on here later.

[southcoder]

Hi Bep, I downloaded a simple Hugo theme then tried to use PostCSS in a simple css file. I zipped it up and added it here…

GitHub - SouthCoder/PostCSS-Example: Error example for Hugo Forum

The PostCSS call is being made in “themes/cleanwhite/layouts/partials/head.html” against “css/zanshang.css”

Still getting the same error, which leads me to think the problem is somewhere in my Ubuntu environment.

ERROR:-

Error: Error building site: POSTCSS: failed to transform “css/zanshang.css” (text/css): internal/process/esm_loader.js:74 internalBinding(‘errors’).triggerUncaughtException( ^

Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only file and data URLs are supported by the default ESM loader. Received protocol ‘node:’ at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:751:11) at Loader.resolve (internal/modules/esm/loader.js:85:40) at Loader.getModuleJob (internal/modules/esm/loader.js:229:28) at ModuleWrap. (internal/modules/esm/module_job.js:51:40) at link (internal/modules/esm/module_job.js:50:36) { code: ‘ERR_UNSUPPORTED_ESM_URL_SCHEME’ }

[jmooring]

I can build your sample without errors. From the root of the project:

$ npm install -D postcss postcss-cli autoprefixer
$ hugo

                   | EN  
-------------------+-----
  Pages            | 10  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     | 51  
  Processed images |  0  
  Aliases          |  1  
  Sitemaps         |  1  
  Cleaned          |  0  

hugo v0.93.3-44E3C002+extended linux/amd64
node v16.14.0 / npm 7.5.4

EDIT

I noticed that my npm version is a bit old, so updated to 8.5.3 and rebuilt the site.
No problems.

[southcoder]

jmooring, a big thank you to yourself and also to Bep and the other members for responding to confirm that this is not a code issue. It was really very much appreciated and means I will waste no more time looking at the code. I have no idea what it causing the problem, which appeared out of nowhere, so I will now proceed to test and remove and reinstall Node/NPM, one last time before a complete rebuild. Cheers…

[jmooring]

If you can, remove nvm from the picture and re-test.

[southcoder]

Definitely worth a try. Thank you, I’ll give that a go and report back.

[southcoder]

A quick update. Knowing that the code was correct and ending up in a mess with NodeJS, I ended up reinstalling an old Ubuntu build. I then globally installed NodeJS 16 and NPM. I also globally installed the required PostCSS NMP libraries, namely postcss postcss-cli and autoprefixer.
I got an initial message telling me that “autoprefixer” could not be found, which I resolved using the options clause of Hugo “resources.PostCSS”, as in the code sample below:-

{{ $options := dict “use” “autoprefixer” }}

{{ $style := resources.Get “scss/custom.scss” | toCSS | postCSS $options | minify | fingerprint “sha512” }}

A big thanks to all of the fantastic members on here who took the trouble to help me. It is really appreciated and led me firmly in the right direction to finding a solution. I hope my feedback here regarding the “PostCSS options” also serve as a help to anybody who might ever have a similar error message concerning “autoprefixer not found”, Cheers.

[southcoder]

Hi Bep, I thought I might have seen an issue reported recently where “autoprefixer” could not be found with recent versions of nodejs and npm. I cannot remember the issue reference. However, I believed I resolved this issue same issue through the use of the PostCSS options mentioned in my last comment.
Further details, if they are helpful are that I have all npm modules installed globally, not locally and was using a standard “postcss.config.js”. I’m using Node v16.14.0 and npm 8.3.1.
I thought I’d mention this in case it might be of any help. I happened to try it after my Ubuntu rebuild and got lucky. Thank you once again for all of your help on this wonderful forum. Much appreciated. Cheers.

[bep]

I had a quick look at your project, and I don’t see a local package.json, which I assume you install all you need globally which I suspect is maybe the culprit.

[southcoder]

Thanks, Bep. That appears to have been the case but also that my Node/NPM was broken beyond practical repair. My Ubuntu workstation was overdue for a rebuild anyway, so I rebuilt with standard Ubuntu 20.04 and reinstalled Node/NPM. This got rid of the original error. Everything is now up and running nicely with globally installed NPM and PostCSS is working very well. I also learned a bit more, which is always a good thing. Thank you very much for all the help and advice. This is a really great forum and we’re lucky to have it, and an expert like yourself to help us all out. Cheers.