Sage 9.0.10 - postcss.config.js not working

[wouter-85]

• I've read the guidelines for Contributing to Roots Projects
• This request isn't a duplicate of an existing issue
• I've read the docs and followed them (if applicable)
• This is not a personal support request that should be posted on the Roots Discourse community

Description

After the latest release postcss.config.js gives an error, this

You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.

Steps to reproduce

1. Installed a fresh copy and and use yarn start && yarn build
2. Installed a fresh copy of version 9.0.9, this works like expected

Expected behavior:
Everything for building the website works like a charm

Actual behavior:
The template building does not work like it should work, for example I'm unable to load custom fonts in version 9.0.10 because postcss.config.js doesn't work during development

Reproduces how often:
This issue occured since the latest version 9.0.10

Versions

9.0.10

[viridius-hub]

No solution yet?

[retlehs]

sage 9 is not in active development and the latest release has some issues in certain scenarios

you can use the previous sage 9 release, or we are happy to pay for anyone's time to submit PRs for the sage 9.x branch

To anyone else hung up on this, I found a workaround. My version of this issue was not font related, but rather image related. I was trying to use a background image in my css and stumbled across the same errors.

In looking for a solution, others were suggesting just rolling back to 9.0.9 which certainly worked. That said, I thought it would be nice to just roll back the packages that were at the root of this issue for me rather than rolling back a full version. With that, I narrowed this issue down to a few specific dev dependencies and changed them to the following versions:

"postcss-loader": "~2.1.0",
"postcss-safe-parser": "~3.0",
"resolve-url-loader": "~2.3.1",
"url-loader": "^0.6.2",

After updating my package.json to have those older dev dependencies from 9.0.9, deleting my node_modules, and running a:

yarn && yarn start

my version of this issue worked itself out. Hope that helps anyone else who's currently down this rabbit hole!

[strarsis]

An update to webpack 5 for sage 9.x, WIP: https://github.com/strarsis/sage/tree/webpack5
This also fixes other issues like [Object] or a resolve error when an image is inlined in the styles, BrowserSync, etc.
Changes are surprisingly small for a webpack update between two major versions.

[Jacksoor]

I also had to change:
"file-loader": "^1.1.6"
Maybe the fix detailed here is enough.

[strarsis]

@Jacksoor: You may be interested in trying out this PR: https://github.com/strarsis/sage/tree/webpack5

[Jacksoor]

@strarsis Yes thank you, I managed to get your PR working by replacing my package.json, yarn.lock and all scripts in resources/assets/build.
BrowserSync seems more stable and StyleLint is also working now where before I had to disable it.
Really hope Sage 10 is comming soon or they merge your PR.

[dock70]

Thank you @strarsis! I have yours PR working but I can't manage to set:

background-image: url("../images/my-image.svg");

Always getting:

Module build failed (from ../../node_modules/mini-css-extract-plugin/dist/loader.js):
 ModuleBuildError: Module build failed (from ../../node_modules/css-loader/dist/cjs.js):
 Error: Can't resolve './images/my-image.svg'

Any help?

[strarsis]

@dock70: You have to add one more ../ as the paths are now relative to the style files (which is actually more correct).

[dock70]

Thank you!! I've tried before but it compiles like:
background-image: url(http://idddefence-mvp.test/[object Object]

[strarsis]

@dock70: Many updates have been added to sage 9, including the sage-installer, so you can now install the sage 9 theme as usual:
https://discourse.roots.io/t/sage-9-2-please-test/20067?u=strarsis
This also fixes the [object Object] issue.

[greghollowell]

@Salty-Walty
Downgrading dependancies did the trick for me. Nice one— thanks!

[strarsis]

@greghollowell: https://discourse.roots.io/t/sage-9-1-please-test/20067?u=strarsis

[chatelp]

Thanks for your PR @strarsis. It solved most of my issues, like the other commenters. But I do get a new issue with webpack watch that's now throwing me endless errors:

Any ideas?

(node:12350) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 403)
(node:12350) UnhandledPromiseRejectionWarning: Error: ENOSPC: System limit for number of file watchers reached, watch 'node_modules/webpack/lib/index.js'
    at FSWatcher.<computed> (internal/fs/watchers.js:218:26)
    at Object.watch (fs.js:1525:34)
    at createFsWatchInstance (/home/vagrant/modulor-theme/public/themes/modulor/node_modules/chokidar/lib/nodefs-handler.js:119:15)
    at setFsWatchListener (/home/vagrant/modulor-theme/public/themes/modulor/node_modules/chokidar/lib/nodefs-handler.js:166:15)
    at NodeFsHandler._watchWithNodeFs (/home/vagrant/modulor-theme/public/themes/modulor/node_modules/chokidar/lib/nodefs-handler.js:331:14)
    at NodeFsHandler._handleFile (/home/vagrant/modulor-theme/public/themes/modulor/node_modules/chokidar/lib/nodefs-handler.js:395:23)
    at NodeFsHandler._addToNodeFs (/home/vagrant/modulor-theme/public/themes/modulor/node_modules/chokidar/lib/nodefs-handler.js:629:21)