video player error Cannot read property 'supportedLocalesOf' of undefined #435
Description
iLib build
after integrating the video player with enact.js I installed all necessary packages and imported all the modules but still, it is throwing this error called
Uncaught TypeError: Cannot read property 'supportedLocalesOf' of undefined
main.js:1493 The above error occurred in the component:
and these are the versions I am using
"dependencies": {
"@enact/core": "^4.7.6",
"@enact/i18n": "^4.7.6",
"@enact/moonstone": "^4.5.4",
"@enact/sandstone": "^2.7.10",
"@enact/spotlight": "^4.7.6",
"@enact/template-webostv": "^4.5.5",
"@enact/ui": "^4.7.6",
"@enact/webos": "^4.7.6",
"ilib": "^14.18.0",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"web-vitals": "^3.4.0"
},
Environment
npm, chromium browser, lg webos device
Code:
import React, { useEffect } from 'react';
import BodyText from '@enact/moonstone/BodyText';
import Button from '@enact/moonstone/Button';
import MoonstoneDecorator from '@enact/moonstone/MoonstoneDecorator';
import Image from '@enact/sandstone/Image';
import Heading from '@enact/sandstone/Heading';
import deviceinfo from '@enact/webos/deviceinfo';
import { Video } from '@enact/sandstone/VideoPlayer';
import VideoPlayer from '@enact/sandstone/VideoPlayer';
const App = () => {
useEffect(() => {
deviceinfo((info) => {
console.log(info);
});
}, []);
return (
<div style={{ height: '100vh' }}>
<BodyText style={{ color: "#fff", padding: "20px" }}>
test</BodyText>
<VideoPlayer
style={{
width: '640px',
height: '360px',
}}
title="Hilarious Cat Video"
poster="https://wallpapercave.com/wp/wp4288169.jpg"
>
<Video>
<source src="https://action-ott-live.s3.ap-south-1.amazonaws.com/MMM_Telugu/mmm_telugu_1080p.mp4" type="video/mp4" />
</Video>
</VideoPlayer>
</div>
);
};
const MyMoonstoneApp = MoonstoneDecorator(App);
export default MyMoonstoneApp;
export { App };
