eBay skin not working on HTML web pages but successfully installed

Question

I am currently trying to use the @ebay/skin package for UI elements in my marko project but they don't seem to be working.

My package.json file looks like this

{
"name": "marko-starter-demo",
"description": "Demo of how to build an app using marko-starter",
"version": "2.0.0",
"dependencies": {
"@ebay/ebayui-core": "^4.3.1",
"@ebay/skin": "^9.3.0",
"axios": "^0.16.2",
"chromedriver": "^77.0.0",
"express": "^4.17.1",
"jquery": "^2",
"marko": "^4.13.10",
"marko-starter": "^2.0.4",
"marko-widgets": "^6.6.6"
},

And my browse.json looks like this

{
"dependencies": [
  "require: jquery",
  "@ebay/skin",
  "@ebay/skin/carousel",
  "@ebay/skin/icon",
  "page.js",
  "custom.less"
]
}

Finally my code looks like this

         <div class="carousel">
    <div class="carousel__container">
        <button class="carousel__control carousel__control--prev" aria-label="Previous Slide - Top Products">
            <svg aria-hidden="true" class="icon icon--chevron-left-small" focusable="false" >
                <use xlink:href="#icon-chevron-left"></use>
            </svg>
        </button>
        <ul class="carousel__list">
            <li>Card 1</li>
            <li>Card 2</li>
            <li>Card 3</li>
            <li>Card 4</li>
            <li>Card 5</li>
            <li>Card 6</li>
            <li>Card 7</li>
            <li>Card 8</li>
        </ul>
        <button class="carousel__control carousel__control--next" aria-label="Next Slide - Top Products">
            <svg aria-hidden="true" class="icon icon--chevron-right-small" focusable="false">
                <use xlink:href="#icon-chevron-right-small"></use>
            </svg>
        </button>
    </div>
</div>

But I can't seem to get the carousel element to be showing properly on my web page as it looks like this I should have successfully installed everything, perhaps I am missing an extra reference somewhere? Any help would be greatly appreciated thanks!

Answer 1

I believe the issue is that you are missing @ebay/ebayui-core/carousel in your browser.json. The ebayUI components are currently implemented in Marko 3 (which can be consumed by Marko 4) but still has this limitation. Also you shouldn’t need to have @ebay/skin in your browser.json since ebayUI will bring it in for you.

Also JSYK ebayUI currently is planning to do a release with all of the components refactored to be in pure Marko 4 within the next couple weeks which would remove this limitation. (Will be released as v5).

Another issue I noticed is that you have marko-widgets@6 installed. You’ll actually want to use marko-widgets@7 which is part of the v3 widget compatibility layer for using v3 widgets in Marko 4. Again once ebayUI is updated to Marko 4 you won’t even need to install marko-widgets.