Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Coral and Granite in Typescript / Archetype 20


Level 2


Disclaimer: New to ts/npm, but want to take advantage of the ui.frontend in archetype 20. I'm migrating a clientlib from ui.apps to ui.frontend in Archetype 20. I converted the js files to ts files. I resolved most warnings and errors after changing the extension from .js to .ts. However, I can not seem to fix errors where I had made a call to Coral and Granite.  In JS, this was allowed. In TS, it causes a compilation error. I understand that I cannot implicitly use an object as I did in my js file, but I can't find a fix.

A line like this:

new Coral.SelectList();

generates this:

TS2304: Cannot find name 'Coral'.


My closing line:

})(document, Granite.$);

generate the same kind of error...

TS2304: Cannot find name 'Granite'.

I tried to resolve the Coral issue first. I tried installing coral-ui to my node_modules folder:

npm i coral-ui

...and adding to my package.json

"coral-ui": "^1.0.3",

"core-js": "^2.5.4",

...and adding to my .ts file

import {Coral} from 'coral-ui';

That changed the error to:

TS2305: Module '"../../[longpathhere]/ui.frontend/node_modules/coral-ui/lib/index"' has no exported member 'Coral'.

When a coworker tried this in a test angular project, that had worked. Any ideas on how to do this the AEM way in ui.frontend?

Thanks in advance.

0 Replies