Coral and Granite in Typescript / Archetype 20 | Community
Skip to main content
Level 2
November 20, 2019

Coral and Granite in Typescript / Archetype 20

  • November 20, 2019
  • 0 replies
  • 1531 views

Hello,

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'.

...or...

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.