Error building ui5-webcomponents

[brodo]

Describe the bug
When I follow the instructions in the readme, I get an error.

To reproduce
Steps to reproduce the behavior:

1. Clone the repo
2. run yarn
3. run yarn build

The following error occurs

$ postcss src/**/parameters-bundle.css --config config/postcss.bundles --base src --dir dist/css/
FOLDER/ui5-webcomponents/node_modules/less/lib/less/functions/function-registry.js:35
export default makeRegistry( null );
^^^^^^

SyntaxError: Unexpected token export
    at Module._compile (internal/modules/cjs/loader.js:718:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:785:10)
    at Module.load (internal/modules/cjs/loader.js:641:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:681:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (/Users/brodo/Development/ui5-webcomponents/packages/main/lib/postcss-process-derived-colors/less-functions.js:1:18)
    at Module._compile (internal/modules/cjs/loader.js:774:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:785:10)
    at Module.load (internal/modules/cjs/loader.js:641:32)
error Command failed with exit code 1.

Context

• UI5 Web Components version
• OS/Platform: Mac OS 14.14.6
• Other information: node version 12.3.1, yarn version 1.19.1

Any ideas why this could be? Thanks in advance.

[pskelin]

Hi @brodo,
can you check which version of less you got in node_modules?

Should be 3.9.0 after a clean install, that's what yarn.lock has in it, and it seems you got a higher one.

ui5-webcomponents (master)]$ head node_modules/less/package.json 
{
  "name": "less",
  "version": "3.9.0",
  "description": "Leaner CSS",
  "homepage": "http://lesscss.org",
  "author": {
    "name": "Alexis Sellier",
    "email": "[email protected]"
  },
  "contributors": [

In case you got another version, can it be that you ran yarn and the yarn.lock file was not present? Something probably got mixed up, you need the yarn.lock file and you'll get the correct versions for the dependencies necessary for a successful build.

Regards,
Petar

[brodo]

I see. That was indeed the problem. However I deleted yarn.lock because if I keep it, building the fsevents package using node-gyp fails.

This is because ui5-webcomponents uses cpx which in turn uses an outdated version of chokidar, which uses a version of fsevents which does not work with Node 12 because the V8 API changed. I tried dealing with it by adding a newer fsevents version (1.2.9) to the package.jsons "resolutions" section, but for some strange reason I still get the old error:

Release/obj.target/fibers/src/fibers.o
../src/fibers.cc:68:2: error: no template named 'Handle'

Which should not happen if yarn would use [email protected]

I also tried running yarn with the --ignore-optional flag. This works, however yarn build does not if you install dependencies that way.

[pskelin]

All right then. In that case, I am preparing an upgrade of all packages and will give it a try with node 12 as well.
#814

I'll keep this open for tracking.

[brodo]

Thanks a lot! Some more info which might be helpful: There has not been a new release of cpx since September 2016. There is a bug open already for updating (or removing) the old chokidar dependency: mysticatea/cpx#47
Maybe you need to move away from cpx... 🤷‍♂