Impossible de résoudre le problème "react-horizontal-scrolling-menu/build/scrollMenu".

Question

J'ai un code react js dans une application magento pwa.

Il possède un composant appelé categoryList et je dois ajouter un menu déroulant horizontal pour cette liste de catégories.

Voici mon code

const mapCategory = categoryItem => {
    const { items } = categoryItem.productImagePreview;
    return {
        ...categoryItem,
        productImagePreview: {
            items: items.map(item => {
                const { small_image } = item;
                return {
                    ...item,
                    small_image:
                        typeof small_image === 'object'
                            ? small_image.url
                            : small_image
                };
            })
        }
    };
};

const list = [
    { name: 'item1' },
    { name: 'item2' },
    { name: 'item3' },
    { name: 'item4' },
    { name: 'item5' },
    { name: 'item6' },
    { name: 'item7' },
    { name: 'item8' },
    { name: 'item9' }
];
const MenuItem = ({ text, selected }) => {
    return (
        <div
            className="menu-item"
        >
            {text}
        </div>
    );
};
export const Menu = (list) => list.map(el => {
    const { name } = el;

    return (
        <MenuItem
            text={name}
            key={name}
        />
    );
});
const Arrow = ({ text, className }) => {
    return (
        <div
            className={className}
        >{text}</div>
    );
};
const ArrowLeft = Arrow({ text: '<', className: 'arrow-prev' });
const ArrowRight = Arrow({ text: '>', className: 'arrow-next' });

const CategoryList = props => {
    const { id, title } = props;
    const talonProps = useCategoryList({
        query: categoryListQuery,
        id
    });
    const { childCategories, error, loading } = talonProps;

    const classes = mergeClasses(defaultClasses, props.classes);
    console.log('ssss' +childCategories);
    const header = title ? (
        <div className={classes.header}>
            <h2 className={classes.title}>
                <span>{title}</span>
            </h2>
        </div>
    ) : null;

    let child;
    if (error) {
        child = (
            <div className={classes.fetchError}>
                Data Fetch Error: <pre>{error.message}</pre>
            </div>
        );
    }
    if (loading || !childCategories) {
        child = fullPageLoadingIndicator;
    } else if (childCategories.length === 0) {
        child = (
            <div className={classes.noResults}>No child categories found.</div>
        );
    } else {

        const { selected } = this.state;
        // Create menu from items
        const menu = Menu(list, selected);
        child = (
            <div className={classes.content}>
                {childCategories.map((item, index ) => (
                    <CategoryTile item={mapCategory(item)} key={index} />
                ))}
                <ScrollMenu data={menu}
                arrowLeft={ArrowLeft}
                arrowRight={ArrowRight}
                onSelect=''
                />
            </div>
        );
    }
    return (
        <div className={classes.root}>
            {header}
            {child}
        </div>
    );
};

CategoryList.propTypes = {
    id: number,
    title: string,
    classes: shape({
        root: string,
        header: string,
        content: string
    })
};

export default CategoryList;

J'obtiens l'erreur suivante lorsque j'essaie d'utiliser ce code. L'erreur semble concerner l'impossibilité de résoudre un paquet ou un module spécifique.

ERROR in ./src/components/CategoryList/categoryList.js
Module not found: Error: Can't resolve 'react-horizontal-scrolling-menu/build/scrollMenu' in '/var/www/html/apekade/apekade-pwa/packages/pwa-neosolax/src/components/CategoryList'
 wdm: Failed to compile.

Je ne sais pas si j'ai placé le code correctement. Je suis un débutant. Aidez-moi s'il vous plaît.

Answer 1

L'exécution d'un simple "npm install --update --save" a fonctionné pour moi, après avoir lutté pendant une heure pour résoudre ce problème.