Compilation Error: "yarn start" throws errors related to less loaders

Hi. I'm following the 2. Quick Start – Volto Hands-On — Plone Training 2024 documentation training. I have followed the instructions accordingly however I am getting the following error:

ERROR in ./node_modules/@plone/volto/theme/themes/pastanaga/extras/extras.less 5:0
Module parse failed: Unexpected token (5:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| // and make behave it like the SemanticUI ones
| 
> & {
|   @import 'main';
| }
 @ ./src/theme.js 5:0-67
 @ ./node_modules/@plone/volto/src/start-client.jsx 4:0-21
 @ ./src/client.js 4:0-47 5:0-6

ERROR in ./node_modules/semantic-ui-less/semantic.less 14:0
Module parse failed: Unexpected token (14:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
| /* Global */
> & { @import "definitions/globals/reset"; }
| & { @import "definitions/globals/site"; }
| 
 @ ./src/theme.js 4:0-40
 @ ./node_modules/@plone/volto/src/start-client.jsx 4:0-21
 @ ./src/client.js 4:0-47 5:0-6

webpack 5.76.1 compiled with 2 errors in 13646 ms

System Details
OS: Windows 11 10.0.2231
Node: 18.19.1
NVM: 1.1.12
Yarn: 1.22.21
NPM: 10.2.4

I have ensured that all system requirements are met and pre-requisites are configured. My initial assumption was to specify a less loader however I am not able to do so properly because I am not familiar with the razzle build tool. I've tried to override the modifyWebpackConfig but I might be doing something wrong because it does not work. As this is just an assumption I am not sharing the modifications that I have made.

Could anybody kindly point out how to fix this?

If I recall, you need to be using Yarn 3, not 1.
see: Error installing yarn 3 (according to Plone install docs) - #17 by acsr

1 Like

Yes I have tried Yarn 3.2.3 but the result is apparently the same. I do however, get a ton of warnings when setting up the project using yarn (both in 1 and 3). I checked another solution where it mentioned that the warnings are not a core issue and volto would still run just fine, so I did not pay much attention to it.

The error is apparently raised for 2 files listed below:
./node_modules/@plone/volto/theme/themes/pastanaga/extras/extras.less
./node_modules/semantic-ui-less/semantic.less

Based on their paths I attempted to manually apply the necessary loaders in the razzle.config.js:

However, the error messages remain the same (as posted initially).

It would be highly appreciated if someone could suggest a solution or cause to this issue