Warning on react prop `height` of type `string` supplied to `CroppedImage`

[neilpalima]

Screenshots

Version

4.6.0

Describe the bug

Using botAvatarImage in styleOptions or styleSet causes the warning.

Warning:

backend.js:6 Warning: Failed prop type: Invalid prop `height` of type `string` supplied to `CroppedImage`, expected `number`.
    in CroppedImage (created by Avatar)
    in Avatar (created by ConnectFunction)
    in ConnectFunction (created by Context.Consumer)
    in WebChatConnectedComponent (created by StackedLayout)
    in div (created by StackedLayout)
    in StackedLayout (created by ConnectFunction)
    in ConnectFunction (created by Context.Consumer)
    in WebChatConnectedComponent (created by BasicTranscript)
    in li (created by BasicTranscript)
    in ul (created by BasicTranscript)
    in Composer (created by BasicTranscript)
    in div (created by Panel)
    in Panel (created by Context.Consumer)
    in _default (created by BasicTranscript)
    in div (created by BasicTranscript)
    in BasicTranscript (created by ConnectFunction)
    in ConnectFunction (created by Context.Consumer)
    in WebChatConnectedComponent (created by Composer)
    in div (created by FocusBox)
    in FocusBox (created by Composer)
    in Composer (created by Context.Consumer)
    in Composer
    in Unknown (created by ConnectFunction)
    in ConnectFunction (created by ConnectedComposerWithStore)
    in Provider (created by ConnectedComposerWithStore)
    in ConnectedComposerWithStore (created by BasicWebChat)
    in BasicWebChat (created by FullReactWebChat)
    in FullReactWebChat

Expected behavior

No warning

[corinagum]

@neilpalima, I believe this is a syntax error where instead of '90px' (for example, you want to provide 90. This is due to glamor syntax, which is slightly different from CSS. If you turn the string into a number, the error should be resolved.

Just to be sure, could you share your code in both instances (styleOptions and styleSet) so that we can verify?

[neilpalima]

@corinagum , I used this in styleOptions

{
  rootHeight: '100%',
  rootWidth: '100%',
  bubbleBackground: '#12bcc5',
  bubbleBorderWidth: '',
  bubbleBorderColor: '#12bcc5',
  bubbleTextColor: '#fff',
  bubbleBorderRadius: '0px 5px 5px 5px',
  primaryFont: "'Lato', 'sans-serif'",
  bubbleFromUserBorderRadius: '6px',
  bubbleFromUserBackground: '#e1ffc7',
  cardEmphasisBackgroundColor: '#fff',
  fontFamily: 'Lato, Arial, sans-serif',
  botAvatarImage: icon,
  userAvatarInitials: 'P',
}

what should be the correct way?

[corinagum]

The code above doesn't produce a warning when I test it. What does your icon variable look like? Based on the warning, it looks like you might have been trying to establish dimensions, is that correct?

The following code applies an avatar for the bot:

const styleOptions = {
          rootHeight: '100%',
          rootWidth: '100%',
          bubbleBackground: '#12bcc5',
          bubbleBorderWidth: '',
          bubbleBorderColor: '#12bcc5',
          bubbleTextColor: '#fff',
          bubbleBorderRadius: '0px 5px 5px 5px',
          primaryFont: "'Lato', 'sans-serif'",
          bubbleFromUserBorderRadius: '6px',
          bubbleFromUserBackground: '#e1ffc7',
          cardEmphasisBackgroundColor: '#fff',
          fontFamily: 'Arial, sans-serif',
          botAvatarImage:
            'https://docs.microsoft.com/en-us/azure/bot-service/v4sdk/media/logo_bot.svg?view=azure-bot-service-4.0',
          userAvatarInitials: 'P'
        };

Please give me more detail on what you are trying to achieve and I'll do my best to help. :)

[neilpalima]

It was just an imported icon like this

import icon from 'images/icon.png';

even after using the styleOptions you used on my end, I can still get the error.

[neilpalima]

using bubbleBorderWidth: '' causes a warning as well.

backend.js:6 Warning: Failed prop type: Invalid prop `styleSet.options.bubbleBorderWidth` of type `string` supplied to `Bubble`, expected `number`.
    in Bubble (created by ConnectFunction)
    in ConnectFunction (created by Context.Consumer)
    in WebChatConnectedComponent (created by StackedLayout)
    in div (created by StackedLayout)
    in div (created by StackedLayout)
    in div (created by StackedLayout)
    in StackedLayout (created by ConnectFunction)
    in ConnectFunction (created by Context.Consumer)
    in WebChatConnectedComponent (created by BasicTranscript)
    in li (created by BasicTranscript)
    in ul (created by BasicTranscript)
    in Composer (created by BasicTranscript)
    in div (created by Panel)
    in Panel (created by Context.Consumer)
    in _default (created by BasicTranscript)
    in div (created by BasicTranscript)
    in BasicTranscript (created by ConnectFunction)
    in ConnectFunction (created by Context.Consumer)
    in WebChatConnectedComponent (created by Composer)
    in div (created by FocusBox)
    in FocusBox (created by Composer)
    in Composer (created by Context.Consumer)
    in Composer
    in Unknown (created by ConnectFunction)
    in ConnectFunction (created by ConnectedComposerWithStore)
    in Provider (created by ConnectedComposerWithStore)
    in ConnectedComposerWithStore (created by BasicWebChat)
    in BasicWebChat (created by FullReactWebChat)
    in FullReactWebChat

[keremcubuk]

Hi, I'm having same issue. When I try to use botAvatarImage like below. I'm getting CroppedImage warning.

// My Code
const styleOptions = {
   ...
   botAvatarImage:
       'https://docs.microsoft.com/en-us/azure/bot-service/v4sdk/media/logo_bot.svg',
}

Error:

[corinagum]

What browser(s) are you using? Could one of you provide a URL to a bot that exhibits this behavior? Thank you.

[keremcubuk]

What browser(s) are you using? Could one of you provide a URL to a bot that exhibits this behavior? Thank you.

I'm using Google Chrome and Internet Explorer 11. I haven't a public project for showing the error.

[corinagum]

reassigning to @tdurnford to help load balance me a little. Thanks for the help

[neilpalima]

Did you guys able to replicate the issue? Unfortunately, I cannot provide a URL.

[tdurnford]

@neilpalima What bundle are you using? I'm assuming the es5 bundle since you are using IE 11.

[neilpalima]

I haven't tried it on IE. I encountered the error on chrome. Btw, I'm using this boilerplate.

[corinagum]

@neilpalima the link seems to be malformed, could you check and fix?

[neilpalima]

@corinagum sorry for that. It's now updated.

[tdurnford]

I was able to reproduce this error. It looks like the height prop type in the CroppedImage component needs to be updated.

CroppedImage.propTypes = {
  alt: PropTypes.string,
  className: PropTypes.string,
- height: PropTypes.number.isRequired,
+ height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
  src: PropTypes.string.isRequired,
  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
};

https://github.com/microsoft/BotFramework-WebChat/blob/master/packages/component/src/Utils/CroppedImage.js#L38