0

Experimenting with LWC and getting the following error following a recipe:

Unable to resolve ui/card from root/compositionContactSearch/compositionContactSearch.html

Am I missing an import or something? Is ui-card and ui-input a component? If so, from where, I'm not seeing uiCard or uiInput in the modules folder. I see there is a ui/app folder that is a sibling to modules parent, but there is no mention of ui-card or ui-input in those classes.

Lightning Recipes OSS: https://github.com/trailheadapps/lwc-recipes-oss

App.js

import { LightningElement } from 'lwc';

export default class App extends LightningElement {

}

App.html

<template>
                <c-composition-contact-search></c-composition-contact-search>
</template>

compositionContactSearch.js

import { LightningElement, api } from 'lwc';

const DELAY = 350;

    export default class CompositionContactSearch extends LightningElement {
        error;

        handleKeyChange(event) {
            window.clearTimeout(this.delayTimeout);
            const searchKey = event.target.value;
            this.delayTimeout = setTimeout(() => {
                try {
                    this.contacts = contacts();
                } catch (e) {
                    this.error = e;
                }
            }, DELAY);
        }

            get contacts() {
            return [
                {
                    Id: 'Edit the name and description of your component.',
                    icon: 'utility:edit',
                },
                {
                    Id:
                        'Create permanent, shareable URLs that anyone can view within your org.',
                    icon: 'utility:save',
                },
                {
                    Id: 'View changes to code instantly with Live Compilation.',
                    icon: 'utility:refresh',
                },
                {
                    Id: 'Style your components with SLDS.',
                    icon: 'utility:brush',
                },
                {
                    Id: 'Download and upload components as zip files.',
                    icon: 'utility:download',
                },
            ];
        }
    }

compositionContactSearch.html

<template>
    <ui-card title="CompositionContactSearch">
        <div>
            <ui-input
                type="search"
                onchange={handleKeyChange}
                label="Search"
            ></ui-input>
            <template if:true={contacts}>
                <template for:each={contacts} for:item="contact">
                    <recipe-contact-tile
                        key={contact.Id}
                        contact={contact}
                    ></recipe-contact-tile>
                </template>
            </template>
        </div>
        <template if:true={error}>
            <recipe-error-panel errors={error}></recipe-error-panel>
        </template>
        <recipe-view-source
            source="recipe/compositionContactSearch"
            slot="footer"
        >
            Create an experience component by assembling multiple child
            components. Type a few characters in the search bar to experience
            the recipe.
        </recipe-view-source>
    </ui-card>
</template>
1

This is mentioned in one of the issues of the repository. The ui-card is a base component and is not present in the UI folder.

It is a dependency in package.xml and comes from this package.

If you want to see the code, browse the files here.

See more details here.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.