[Rendering] adaptivecards-react should list swiper as dependency

[Vivihung]

Target Platforms

NodeJS

SDK Version

adaptivecards-react v1.1.1

Application Name

Web app

Problem Description

Following the instructions of adaptivecards-react to render an adaptive card in an React app. Hit the following errors

Module not found: Error: Can't resolve 'swiper' in 'MY_APP_ROOT\webapp\node_modules\adaptivecards\lib' ERROR in ./node_modules/adaptivecards/lib/carousel.js 51:15-32 Module not found: Error: Can't resolve 'swiper' in 'MY_APP_ROOT\webapp\node_modules\adaptivecards\lib'

After manually installing swiper from npm, the issue is resolved.

Per observation, adaptivecards-react has hard dependency on swiper which should be listed in the documentation. The following command should be npm install react adaptivecards-react swiper --save

Screenshots

Card JSON

var card = {
        type: 'AdaptiveCard',
        version: '1.0',
        body: [
            {
                type: 'TextBlock',
                text: 'Here is a ninja cat',
            },
            {
                type: 'TextBlock',
                text: 'Here is another ninja cat',
            },
            {
                type: 'Image',
                url: 'http://adaptivecards.io/content/cats/1.png',
            },
        ],
    };

Sample Code Language

Typescript

Sample Code

// ....
// test adaptive card
    var card = {
        type: 'AdaptiveCard',
        version: '1.0',
        body: [
            {
                type: 'TextBlock',
                text: 'Here is a ninja cat',
            },
            {
                type: 'TextBlock',
                text: 'Here is another ninja cat',
            },
            {
                type: 'Image',
                url: 'http://adaptivecards.io/content/cats/1.png',
            },
        ],
    };

    var hostConfig = {
        fontFamily: 'Segoe UI, Helvetica Neue, sans-serif',
    };
    
    return (
         <AdaptiveCard payload={card} hostConfig={hostConfig} />
    );