Postcss error building site since yesterday

elperronegro · May 14, 2020, 8:46am

My site has been working fine since I started using PostCSS with Hugo some 6 months ago. Today on starting the hugo server I got the following error message…

Building sites … /snap/hugo/8138/lib/node_modules/postcss-cli/node_modules/fs-extra/lib/mkdirs/make-dir.js:86
      } catch {
              ^
SyntaxError: Unexpected token {
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:617:28)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/snap/hugo/8138/lib/node_modules/postcss-cli/node_modules/fs-extra/lib/mkdirs/index.js:3:44)

In my html…

{{ $options := dict "inlineImports" true }}
{{ $styles := resources.Get "css/output.css" }}
{{ $styles = $styles | resources.PostCSS $options }}
{{ $styles = $styles | minify | fingerprint }}
<link href="{{ $styles.RelPermalink }}" rel="stylesheet" />

// postcss.config.js

const purgecss = require('@fullhuman/postcss-purgecss')
const cssnano = require('cssnano')

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    cssnano({
      preset: 'default'
    }),
    purgecss({
      content: ['content/*.md', 'themes/tailwind/layouts/_default/*.html', 'themes/tailwind/layouts/partials/*.html', 'themes/tailwind/layouts/shortcodes/*.html',],
      whitelist: ['btn', 'btn-blue', 'btn-blue:hover', 'btn-teal', 'btn-teal:hover', 'btn-green', 'btn-green:hover', 'btn-orange', 'btn-orange:hover', 'btn-red', 'btn-red:hover', 'btn-black', 'btn-black:hover' ],
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
    })
  ]
}

Strange that this has happened after upgrade to Hugo 70, although all is working well on a sister site I have with Hugo70/PostCSS. There has been no change to the postCSS config nor build commands.

I am not a node expert and am having trouble solving this and would like some assistance if anybody can shed some light on this. I suspect there is an easy answer but it is beyond me.

Thanks
Richard

davidsneighbour · May 14, 2020, 9:15am

Please use the three backticks around code samples to make it easier to read. or use the </> button above the editor field.

Did you run npm update in your projects root directory after you updated Hugo? That would be my first step. The error is within PostCSS trying to create a directory or something like that. Might resolve itself if there are any updates in PostCSS.

elperronegro · May 14, 2020, 9:21am

Yes, I ran “npm update” but no change. Same error message. Just strange how all was ok yesterday though

davidsneighbour · May 14, 2020, 9:26am

Another “hacky” approach I would try is to delete the node_modules folder and then re-run npm install.

The problems I experienced around PostCSS in any of my projects were always related to some hanging versions. Maybe in package.json you have a fixed version number for postcss (if any) and that is not upgraded somehow. But more than that I can’t say without seeing the full repository to test here locally.

elperronegro · May 14, 2020, 9:48am

I deleted node_modules and re-ran npm install to no avail I’m afraid. Still same error message.

I will cull my site (it’s huge) and replicate the error on a repository.

Appreciate the help so far. Thanks

elperronegro · May 14, 2020, 10:06am

My repository replicating the issue is here

jmooring · May 14, 2020, 11:40am

I’m having the same issue since upgrade to 0.70 yesterday afternoon (using snap package). Still investigating…

davidsneighbour · May 14, 2020, 3:15pm

There is a relatively new bug open about postcss with fast rendering - not sure if that has anything to do with it. Are you building with fastRender as option?

I’ll have a look at your repo tomorrow. Quite late here now.

jmooring · May 14, 2020, 3:49pm

@anthonyfok,

I believe this is isolated to the latest snap package.

$ /snap/hugo/current/bin/hugo version

Hugo Static Site Generator v0.70.0/extended linux/amd64 BuildDate: 2020-05-13T17:30:34Z

I cannot reproduce the problem when installing from the Ubuntu repository, or when building from source.

elperronegro · May 14, 2020, 3:53pm

No I am not using fast rendering

elperronegro · May 14, 2020, 3:54pm

That’s useful, thank you. I will try same. I have been using Hugo via Snap for last 6 months without problem.

jmooring · May 14, 2020, 4:21pm

My test of installing from the Ubuntu repository was invalid. I’m running Ubuntu 20.04, so apt-get install hugo installed 0.68.3, not 0.70.0. See https://packages.ubuntu.com/search?keywords=hugo.

However, my test of building from source is still valid. I still believe this problem is limited to the snap package.

elperronegro · May 14, 2020, 4:42pm

I’m running 20.04 too. Does sound like snap problem. Have reverted back to snap 0.69.2 to get something urgent done. Works fine. PostCSS/PurgeCSS working as normal.

tubia · May 15, 2020, 8:27am

If someone is asking herself how to revert back to hugo 0.69.2 using snap, here are the steps.

First we list the available revisions for the hugo package in snap:

$ snap list --all hugo
Name  Version  Rev   Tracking         Publisher     Notes
hugo  0.69.2   8093  extended/stable  hugo-authors  disabled
hugo  0.70.0   8140  extended/stable  hugo-authors  -

Then, we revert the package to a previous revision, in our case 8093:

$ snap revert --revision=8093 hugo
hugo reverted to 0.69.2

Double-check if everything is in ordnung:

$ hugo version
Hugo Static Site Generator v0.69.2/extended linux/amd64 BuildDate: 2020-04-24T12:43:32Z

Hugo should be working again, for the moment.

davidsneighbour · May 15, 2020, 8:34am

I played around and found only things, that are NOT the reason for the issue. Might be helpful for somebody who has to debug the underlying issue

it’s not about the output.css file (file size, syntax errors). that file is quite large and commented, but even with a single css line the error still comes up
it’s not an incompatibility with the local and hugos packages. I realized that postcss-cli was not used from your repo, but from within hugo. installing it local, install fs-extra local does not change the error (but uses the local packages)
it’s not a file rights issue
it’s not an issue with the syntax of the template file.

original:

{{ $css := resources.Get "css/output.css" }}
{{ $css = $css | resources.PostCSS }}
{{ if hugo.IsProduction }}
{{ $css = $css | minify | fingerprint | resources.PostProcess }}
{{ end }}

my modified version, assuming, that double processing might be an issue here:

{{ $css := resources.Get "css/output.css" }}
{{ if hugo.IsProduction }}
{{ $css = $css | minify | fingerprint | resources.PostProcess }}
{{ else }}
{{ $css = $css | resources.PostCSS }}
{{ end }}

Comparing the releases there is no update to postcss itself, but a significant update from golibsass 0.5.0 to 0.6.0.

If I would know how my next step would be testing if reversing that single change is stopping the error.

I never had the need to postprocess already existing css. As your postcss processes don’t do anything other than minification and cleanup the following change in your footer template will do what’s needed and keep Hugo happy for now:

{{ $css := resources.Get "css/output.css" }}
{{ if hugo.IsProduction }}
{{ $css = $css | minify | fingerprint }}
{{ else }}
{{ $css = $css | minify }}
{{ end }}

By the way: fingerprinting and THEN postprocessing (as done in the original footer template) will make the fingerprint invalid because the fingerprinted content of the file has changed while being post-processed.

If that is a theme you got from a developer (as in you did not create it by yourself) it’s time to open a bug about the postprocessing in the repo for the theme.

elperronegro · May 15, 2020, 10:34am

Thanks for the comments. The biggest job that postCSS does in this case is to purge all the unused css. The theme is built on Tailwind with it’s substantial size. Purgecss is necessary to bring the final file size down from 1.1mb to 20km. I will do some experimenting with the code as you suggest though and also some tidying up.

Reverting to the previous version of Hugo (69 via snap) does solve the problem in the short-term, but means I cannot update to 70 until this issue is resolved.

The theme is developed by myself, I am not a professional developer, just an enthusiastic amateur!

// postcss.config.js

const purgecss = require('@fullhuman/postcss-purgecss')
const cssnano = require('cssnano')

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    cssnano({
      preset: 'default'
    }),
    purgecss({
      content: ['content/*.md', 'themes/tailwind/layouts/_default/*.html', 'themes/tailwind/layouts/partials/*.html', 'themes/tailwind/layouts/shortcodes/*.html',],
      whitelist: ['btn', 'btn-blue', 'btn-blue:hover', 'btn-teal', 'btn-teal:hover', 'btn-green', 'btn-green:hover', 'btn-orange', 'btn-orange:hover', 'btn-red', 'btn-red:hover', 'btn-black', 'btn-black:hover' ],
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
    })
  ]
}

davidsneighbour · May 15, 2020, 12:28pm

I read on the tailwind github that there is an internal task that is removing unused tags, have a look:

It’s using purgecss under the hood.

jmooring · May 15, 2020, 12:50pm

I’ve created a GitHub issue.

Topic		Replies	Views
Hugo server error support	2	975	September 28, 2020
Error deploying on Render: "Check your Post CSS installation" support	5	1616	October 4, 2022
Having trouble with PostCSS trying to use PurgeCSS support	13	2049	October 8, 2022
Postcss-cli error continue in version 0.97.3 support	6	753	April 20, 2022
If you think Hugo's error messages are ... suboptimal dev	3	1080	April 21, 2022

Postcss error building site since yesterday

Related topics