8000 NaN is an invalid value for the 'minWidth' CSS style property when setting styles in <ChatBot> component · Issue #315 · react-chatbotify/react-chatbotify · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

NaN is an invalid value for the 'minWidth' CSS style property when setting styles in <ChatBot> component #315

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
SiddhantOjhaTIAA opened this issue May 22, 2025 · 10 comments
Closed

NaN is an invalid value for the 'minWidth' CSS style property when setting styles in <ChatBot> component #315

SiddhantOjhaTIAA opened this issue May 22, 2025 · 10 comments
Assignees
@tjtanjin
Labels
bug Something isn't working

Comments

@SiddhantOjhaTIAA
Copy link

Bug Description:
In an application with React 19 + Next 15, I am using ChatBot component from react-chatbotify library.
I'm experiencing an issue with the component. It is showing the following error even if I provide the minWidth still, I encounter the following error:

Console Error

`NaN` is an invalid value for the `minWidth` css style property.

Steps To Reproduce:
Steps to reproduce the bug behavior:

  1. Install React ChatBotify version 2.0.0-beta.33:

npm install react-chatbotify@2.0.0-beta.33

  1. Import and use the component in your React application:
import ChatBot from 'react-chatbotify';

<ChatBot 
              styles={{ chatWindowStyle: {width: '600px'}}}
              themes={{ id: 'minimal_midnight', version: '0.1.0' }}
              settings={{
                footer: { text: 'AIOPS, powered by gAIt' },
                general: { embedded: true, showFooter: true },
                botBubble: { simStream: true },
                header: { title: 'AIOPS AI Agent' },
                audio: { disabled: true },
                chatInput: { allowNewline: true },
              }}
              flow={{
                start: {
                  message: `Hi ${userFirstName}, ask me anything related to recent failed customer experiences!`,
                  path: 'loop',
                  options: helpOptions
                },
                loop: {
                  message: async (params) => {
                    await call_gAIt(params);
                  },
                  path: 'loop',
                },
              }}
            />
  1. Observe the error in the browser console.

Expected behavior:
The minWidth style should be applied correctly without causing any errors.

Screenshots:

Image

Library version:
2.0.0-beta.33

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser: [e.g. chrome, safari]

Mobile (please complete the following information):

  • Device: [e.g. iPhone12]
  • OS: [e.g. iOS8.1]
  • Browser: [e.g. edge, firefox]

Additional context:

  • This issue may be related to the changes introduced in version 2, where styles are now handled via the styles prop instead of the options prop.
  • Ensure that the styles prop is correctly structured and that all values are valid CSS values.
  • Even if adding an additional minWidth still this is not resolved.
@SiddhantOjhaTIAA SiddhantOjhaTIAA added the bug Something isn't working label May 22, 2025
@tjtanjin
Copy link
Member

Hey @SiddhantOjhaTIAA, did a quick test on the playground with your code but could not reproduce it 😢 Do you have a public project I can pull to reproduce this issue?

@SiddhantOjhaTIAA
Copy link
Author

@tjtanjin Not it's not an public project, Sorry I can't share my project with you.
But I am also not sure why I am getting this error related to minWidth, Is it something related to react version I am not sure.
But while using with react 18 I have not encountered this issue.

I tried multiple things to fixed this and also added the attribute minWidth but still it is not getting resolved.

@tjtanjin
Copy link
Member

@tjtanjin Not it's not an public project, Sorry I can't share my project with you.
But I am also not sure why I am getting this error related to minWidth, Is it something related to react version I am not sure.
But while using with react 18 I have not encountered this issue.

I tried multiple things to fixed this and also added the attribute minWidth but still it is not getting resolved.

To clarify, this is an issue you only faced in React 19 but not when you were on React 18? Was there anything else that was changed or was it only the version?

@tjtanjin
Copy link
Member

@SiddhantOjhaTIAA Just took a look at the code and found the cause, though I'd be a little perplexed if this was uniquely React 19 🤨

You can change your width from '600px' to just 600 and it should work. Internal calculations were handled incorrectly for a string input which I'll fix in the next release. Hope this helps!

@SiddhantOjhaTIAA
Copy link
Author

@tjtanjin Adding width just 600 worked, but if we need to make our application responsive so when adding size in percentage "%".
We are encountering same error.
Here is an example for reference.

<ChatBot
              styles={{
                chatWindowStyle: {
                  width: '100%',
                  height: '100%',
                  backgroundColor: '#2A3040',
                  paddingTop: '1%',
                  paddingBottom: '0px',
                  marginBottom: '5%'
                },
                botBubbleStyle: {
                  marginBottom: '8px',
                  color: '#ffffff',
                  fontSize: 'larger',
                  width: '100%',
                  backgroundColor: '#36364E',
                  border: '3px solid #012332'
                }}

For this I guess we can't hardcode any value, so we will be needing the attribute that's support string entries.
Thank you for understanding. Let me know if you have any idea how can I handle this scenario.

@tjtanjin
Copy link
Member

Hey @SiddhantOjhaTIAA, if you're using % then the current handling of calculations will break. I'll see if I can push the fix when I get back in a couple of hours.

@SiddhantOjhaTIAA
Copy link
Author

@tjtanjin Thanks a lot.

@tjtanjin
Copy link
Member

This is now fixed in beta.38 😊

@tjtanjin Thanks a lot.

@tjtanjin
Copy link
Member

Assuming this is no longer an issue, feel free to reach out again if so! 😊

@SiddhantOjhaTIAA
Copy link
Author

@tjtanjin Thank you, This fix worked, thank you for your quick response and help.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@tjtanjin tjtanjin

Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@tjtanjin @SiddhantOjhaTIAA
0