Client-side compilation errors don't always show #4498
Description
TL:DR - less.js is returning the wrong error.
Most the time less.js (client-side compilation) returns helpful errors, although occasionally it will return styles-l and styles-m can not be found. I presume there is something in one of my Less files that is stopping those files from being compiled.
My issue is that error is not the true problem, the problem is the error in my less file and not the fact that those files are 404ing.
Steps to reproduce
- I have this file -
app/design/frontend/PartyShowroom/default/Magento_Cms/web/css/source/_extend.lesswhich contains the following:
@import '../layout/homepage/_homepage-carousel.less';
@import '../layout/homepage/_homepage-themes.less';
@import '../layout/homepage/_featured-products.less';- Now when I load the front-end I get the following errors:
FileError: 'http://URL-HERE/static/frontend/PartyShowroom/default/en_GB/css/styles-l.css' wasn't found (404) in styles-l.css FileError: 'http://URL-HERE/static/frontend/PartyShowroom/default/en_GB/css/styles-m.css' wasn't found (404) in styles-m.css
- And when I remove the 3 imports the front-end works again.
This means that something in one of those less files is causing the problem, the error should reflect that.
Expected result
I expect to see an error related to one of the imported files, for example:
NameError: variable @none is undefined
in _extend.less on line 2, column 14:
1testing {
2 display: @none;
3}
Actual result
FileError: 'http://URL-HERE/static/frontend/PartyShowroom/default/en_GB/css/styles-l.css' wasn't found (404) in styles-l.css
FileError: 'http://URL-HERE/static/frontend/PartyShowroom/default/en_GB/css/styles-m.css' wasn't found (404) in styles-m.css