Clarity: Clarity Icons build fails

[TekSiDoT]

Describe the bug

The following error occurs during an attempt to build @clr/icons using either npm run build or npm run icons:build:

...
[./src/clr-icons/shapes/social-shapes.ts] 28.1 KiB {shapes/social-shapes} {shapes/social-shapes.min} {clr-icons.min} {shapes/all-shapes} {shapes/all-shapes.min} [built]
[./src/clr-icons/shapes/technology-shapes.ts] 218 KiB {shapes/technology-shapes} {shapes/technology-shapes.min} {clr-icons.min} {shapes/all-shapes} {shapes/all-shapes.min} [built]
[./src/clr-icons/shapes/text-edit-shapes.ts] 19.4 KiB {shapes/text-edit-shapes} {shapes/text-edit-shapes.min} {clr-icons.min} {shapes/all-shapes} {shapes/all-shapes.min} [built]
[./src/clr-icons/shapes/travel-shapes.ts] 20.6 KiB {shapes/travel-shapes} {shapes/travel-shapes.min} {clr-icons.min} {shapes/all-shapes} {shapes/all-shapes.min} [built]
    + 3 hidden modules

ERROR in [at-loader] ./node_modules/@types/vfile/index.d.ts:11:31
    TS7016: Could not find a declaration file for module 'vfile-message'. '/Users/jens/Projects/vas-clarity/node_modules/vfile-message/index.js' implicitly has an 'any' type.
  Try `npm install @types/vfile-message` if it exists or add a new declaration (.d.ts) file containing `declare module 'vfile-message';`
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @clr/[email protected] icons:build:web: `webpack --config ./src/clr-icons/webpack.icons.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @clr/[email protected] icons:build:web script.
...

How to reproduce

1. Clone vmware/clarity repository
2. npm i or yarn
3. npm run build or npm run icons:build
4. Error will be thrown

Expected behavior

Clarity Icons should be able to be built.

Versions

• Angular: [8]
• Node: [12]
• Clarity: [3.0.0-next.1 and 3.0.0-next.2]

Device:

• Type: MacBook
• OS: Catalina
• Browser Not applicable

Additional notes

Building the core, angular or ui packages works fine if called individually.

[gnomeontherun]

Yes, we've run into this when updating to Node 12, which is why we haven't. Currently we use Node 10-11, and haven't invested in figuring this one out until we get past updating to Angular 9.

[TekSiDoT]

Good to know, thank you!

[TekSiDoT]

Tests with different versions of Node and NPM had the same result as described above. The following versions were tested using NVM:

Node.js 10.15.3 with NPM 6.4.1
Node.js 10.16.3 with NPM 6.9.0
Node.js 11.15.0 with NPM 6.7.0
Node.js 12.13.0 with NPM 6.12.0

However, what did solve the issue is correcting the reference to the types of vfile-message inside the vfile package.

Path: node_modules/@types/vfile/index.d.ts
Line: 11
Change import * as vfileMessage from 'vfile-message'; to import * as vfileMessage from 'vfile-message/node_modules/vfile-message';

... which is pretty weird and not a proper fix at all, but it does enable locally building and testing for the time being.

[gnomeontherun]

Right, this seems to be a dependency problem, not entirely sure why Node 12 kicks this up, but normally this isn't a problem because we don't expect people to be building Clarity from source.

[TekSiDoT]

Background:
We've checked out the current state of the Datagrid Master Detail view in 3.0.0-next.1 and -considering the rather early state of the release - have been impressed with the quality of the functionality.
Because of that we have decided to move forward and build one of our products feature on this bleeding edge of Clarity. Unfortunately, we're currently blocked by #3999 . We're now trying to build and patch clarity/master locally.

[gnomeontherun]

Gotcha, I had a working fix for that previously that needs to be updated with current master. I've been looking into it, but will dig faster!

[TekSiDoT]

Gotcha, I had a working fix for that previously that needs to be updated with current master. I've been looking into it, but will dig faster!

No worries, we managed to build, package and reference Clarity locally and are therefore no longer blocked on this issue. Thanks!

[gnomeontherun]

Still stuck on this one for now, need to get Angular 9 update working right and then revisit Node update separately. Until then use Node 10.

[gnomeontherun]

Fixed by #4232

[TekSiDoT]

Confirmed Working

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.