Clay: How can Clay components be used within a React portlet?

[sandwichnyc]

What is your question?

Hi,

I'm trying to play around with adding the Clay components to a React portlet that I generated via Liferay's JS toolkit but it's not working. I installed Clay via npm and just included one component in my AppComponent like so:

import {ClayButton} from 'clay';

But when I navigate to the page there are a bunch of these errors in the Chrome console:

Uncaught (in promise) Error: Namespace "ClayTooltip.incrementaldom" already declared.
    at Object.goog.module (clay.js:1)
    at ClayTooltip.soy.js:17
    at Object.goog.DEPENDENCIES_ENABLED.goog.loadModule (clay.js:1)
    at Function.<anonymous> (ClayTooltip.soy.js:6)
    at Loader._setModuleImplementation (loader.js:1025)
    at defineModules (loader.3.js:1399)
    at config-parser.js:11

Is this because Clay is already included in Liferay by default (but not as React components)? If so, is there a workaround/fix?

[julien]

Hi @sandwichnyc,

It looks like you're using the "metal.js + soy" version of ClayButton - which is published as clay-button on the npm reigstry.

If you want the React component, you'll need to install it via yarn add @clayui/button or npm install @clayui/button.

Let me know if that helps.

[sandwichnyc]

Thanks @julien - that did the trick. If I want to get all the components rather than getting them one by one, do I just install @clayui?

[matuzalemsteles]

hey @sandwichnyc We don't have a package that bundles all React components yet, so you have to install all packages separately.

[sandwichnyc]

Got it. Thanks for your help. 👍

[matuzalemsteles]

hey @sandwichnyc I am closing this issue once your question has been answered, if you have any further questions please feel free to open another issue.