# Nextjs App crashes when ui=true

**URL:** <https://community.bitmovin.com/t/nextjs-app-crashes-when-ui-true/3422>\
**Category:** Support\
**Tags:** bitmovin-player, bitmovin\
**Created:** [November 20, 2024, 7:10am UTC](https://community.bitmovin.com/t/nextjs-app-crashes-when-ui-true/3422 "2024-11-20T07:10:32Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![raysamtob](https://avatars.discourse-cdn.com/v4/letter/r/7c8e57/32.png) [@raysamtob](https://community.bitmovin.com/u/raysamtob)\
**Post date:** [November 20, 2024, 7:10am UTC](https://community.bitmovin.com/t/nextjs-app-crashes-when-ui-true/3422/1 "2024-11-20T07:10:32Z")

</div>

Got this error in my Nextjs App.

5734-7d20cb167a8dbd4f.js:1 TypeError: Cannot create property ‘metadata’ on boolean ‘true’  
at new e (2723-75573e019eea807d.js:1:255807)  
at e.buildModernUI (2723-75573e019eea807d.js:1:253430)  
at e.buildDefaultUI (2723-75573e019eea807d.js:1:252959)  
at 2723-75573e019eea807d.js:1:273153  
at aW (fd9d1056-5524b1ed0f4887ec.js:1:73244)  
at oe (fd9d1056-5524b1ed0f4887ec.js:1:84685)  
at e (fd9d1056-5524b1ed0f4887ec.js:1:85827)  
at e (fd9d1056-5524b1ed0f4887ec.js:1:86113)  
at e (fd9d1056-5524b1ed0f4887ec.js:1:85814)

const config = {  
key: process.env.NEXT\_PUBLIC\_BITMOVIN\_KEY!,  
playback: {  
muted: autoplay ?? false,  
autoplay: autoplay ?? false,  
seeking: true,  
pictureInPicture: false,  
},  
logs: {  
level: LogLevel.DEBUG,  
bitmovin: true,  
},  
ui: true,  
style: {  
aspectratio: isMobile ? “4:3” : “16:9”,  
controls: true,  
fullscreen: isMobile,  
},  
};

const handlePlayerRef = (player: PlayerAPI) =\> {  
playerRef.current = player;  
console.log(“Player initialized”, player);  
if (player && !isPlaying && player.isPlaying()) {  
player.pause();  
}  
player.on(PlayerEvent.Play, () =\> {});  
player.on(PlayerEvent.Paused, () =\> {});  
player.on(PlayerEvent.PlaybackFinished, () =\> {  
player.seek(0);  
});  
};

const source = {  
hls: media,  
poster: poster,  
};  
return (  
  
\<div  
ref={containerRef}  
id={id}  
style={{  
position: “relative”,  
maxWidth: “100%”,  
height: height || “100%”,  
background: “black”,  
display: “flex”,  
justifyContent: “center”,  
flexDirection: “column”,  
}}  
\>  
  
  
  
);  
}

---

<div class="post-metadata">

**Author:** ![davidsteinacher](https://sea1.discourse-cdn.com/flex015/user_avatar/community.bitmovin.com/davidsteinacher/32/163_2.png) [@davidsteinacher](https://community.bitmovin.com/u/davidsteinacher)\
**Post date:** [November 20, 2024, 5:21pm UTC](https://community.bitmovin.com/t/nextjs-app-crashes-when-ui-true/3422/2 "2024-11-20T17:21:04Z")

</div>

Hi @raysamtob, welcome to our community.

Looking at your player configuration, it looks like you have a wrong property passed to the `ui` property.

```ts
const config = {
  key: process.env.NEXT_PUBLIC_BITMOVIN_KEY!,
  ...
  ui: true, // <-- This should be an object representing the UIConfig instead of a boolean
  style: {
    aspectratio: isMobile ? “4:3” : “16:9”,
    controls: true,
    fullscreen: isMobile,
  },
};

```

If the ui property is not set to `false` it should contain an object which can contain customization options for our UI. See available options here in our [UIConfig](https://cdn.bitmovin.com/player/ui/3/docs/interfaces/UIConfig.html) documentation.

If you do not want to customize our UI, you can just omit the `ui` property and it should work then.

Hope that helps,  
BR David

---

<div class="post-metadata">

**Author:** ![raysamtob](https://avatars.discourse-cdn.com/v4/letter/r/7c8e57/32.png) [@raysamtob](https://community.bitmovin.com/u/raysamtob)\
**Post date:** [November 21, 2024, 6:02am UTC](https://community.bitmovin.com/t/nextjs-app-crashes-when-ui-true/3422/3 "2024-11-21T06:02:16Z")

</div>

Thanks . Removing the ui property resokce the issue.

Please can i get an example on how to customise the UI

---

<div class="post-metadata">

**Author:** ![davidsteinacher](https://sea1.discourse-cdn.com/flex015/user_avatar/community.bitmovin.com/davidsteinacher/32/163_2.png) [@davidsteinacher](https://community.bitmovin.com/u/davidsteinacher)\
**Post date:** [November 21, 2024, 1:30pm UTC](https://community.bitmovin.com/t/nextjs-app-crashes-when-ui-true/3422/4 "2024-11-21T13:30:14Z")

</div>

We have recently revamped our UI documentation, providing more details on customizing our UI. You can find it here: [Customising the UI](https://developer.bitmovin.com/playback/docs/customise-player-ui-experience)

Please feel free to contact us if you have any questions or require further input.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/bitmovin/original/1X/1ab86334145095b0af9c5b924fa3ae6d920b6482.png) [@system](https://community.bitmovin.com/u/system)\
**Post date:** [November 27, 2024, 6:35pm UTC](https://community.bitmovin.com/t/nextjs-app-crashes-when-ui-true/3422/5 "2024-11-27T18:35:01Z")

</div>

This topic was automatically closed 60 minutes after the last reply. New replies are no longer allowed.