React UIKit v3 warning - Replace fill-available to stretch, because spec had been changed

I’m using React UIKit v3, I got an warning message Replace fill-available to stretch, because spec had been changed

The error message:

My project enviroments following:

  • React: ^18.2.0,
  • @sendbird/uikit-react: ^3.3.2

@Sravan_S Hi Sravan,
Can you help me with this problem?

@minhdat97 just faced the same issue when I upgraded my React project to v18.2.0 too. Not sure if it helps but I made some changes in the generated CSS in their package in node_modules and it worked for me.

If you just search for height: fill-available and justify-content: start in the generated CSS file you’ll find the places where you need to change them. For reference, the source files for those changes are in the following files:

Change line from height: fill-available; to height: stretch;

Change line from justify-content: start; to justify-content: flex-start;

Not sure how Sendbird will address this issue because as we can see those changes should to be made in their SCSS source files instead.

Hope it helps you somehow.

@minhdat97 I wanted to share an update about the issue you reported. Sendbird released a new version today (v3.4.3) and they seem to have fixed those CSS issues.

I was able to build my React 18 app after upgrading @sendbird/uikit-react dependency to this new version.

Hope it works for you too!

1 Like

I just upgraded to latest @sendbird/uikit-react, the error fixed but i got another error. The error message is: TypeError: Cannot read properties of undefined (reading ‘channelUrl’)

Hello @minhdat97 ,

Are you still facing this issue? Could you please try with the latest version of UIKit React v3.5.2
Let me know if you have any query.