ERROR in SeekBar/SDK 0.21(@amazon-devices/kepler-ui-components": "^2.0.0")

Hi Vega Team!
when I tried to use SeekBar like this


in SDK0.21 and updated kepler-ui-components from “~2.0.0” to “^2.0.0” .

I got the following error
ERROR 10:36:29 Warning: Text strings must be rendered within a component.%s in Slider
Please refer to the [error.log.txt] file for details.

error.log.txt (6.3 KB)

By the way, the same error also occurs in the video sample app.
GitHub - AmazonAppDev/vega-video-sample: This sample app shows you how to implement a W3C media player and the core multimedia functionality, such as interactive screens, a video player, search, and focus management.

Is there any way to fix this problem?
thank you

Hey @soseh

Thanks for sharing this issue, I’m looking into it with the team and will get back to you with an update ASAP.
Im the meantime, I tried to reproduce your error and failed. May I know what changes you had applied to the sample app before you got this error?

Warm regards,
Ivy

Hey @Ivy_Mahajan

Thank you for confirming.
Just to be sure,
I downloaded the video sample source again using Git Clone.
and then checked it in the main branch.
It also reproduces the problem.

As a reproduction step, just play any content and display the control bar.

as shown in the attached file.
you can see I haven’t changed anything in source.

For your convenience, I have attached the entire log from launching the app to reproducing the problem.

log.txt (56.2 KB)

By the way my sdk version is 0.21.4839.

Warm regards,
soseh

Hi @soseh

Thanks for the detailed report :slight_smile:

From the Sample App, we can see that the Seekbar is imported as
import { SeekBar as KUICSeekbar } from '@amazon-devices/kepler-ui-components';
whereas from your code, you are importing seekbar as import { SeekBar } from '@amazon-devices/kepler-ui-components';
It looks like the app is trying to render text content directly without wrapping it in a <text> component.
This error is displayed on the console when the app is run in the debug variant, which imports the seek bar.

I have discussed with internal teams to understand if the seekbar needs to be enclosed in <text> component like this.
We are offering the following workarounds for now:

  1. Run the app in the release variant (if it accommodates to your use case).
  2. Ignore the log, as we understand it does not affect the app’s functionality.

However, rest assured, to minimize your confusion, we will fix this issue in the component library, very soon.

Hope this helps.
Warm regards,
Ivy