[Bug]: NotSupportedError: Failed to execute 'define' on 'CustomElementRegistry': the name "clabs-chat-code" has already been used with this registry

[chethanrao49]

Browser

Chrome, Safari, Firefox, Edge

Package version

@carbon-labs/ai-chat V 0.13.0

React version

Nextjs 14

Description

When using the @carbon-labs/ai-chat library in a Next.js 14 project, the error NotSupportedError: Failed to execute 'define' on 'CustomElementRegistry': the name "clabs-chat-code" has already been used with this registry is logged in the terminal. This error indicates that the custom element name "clabs-chat-code" is being registered more than once, which is causing the conflict.

Library Version: @carbon-labs/ai-chat@0.13.0 Next.js Version: 14

Reproduction/example

https://stackblitz.com/edit/stackblitz-starters-ntkcet?file=app%2Fcomponents%2FAllClabsChatComponents%2FAssistantTwo%2FAssistantTwo.tsx

Steps to reproduce

Building the code will throw the error

1. Open the Browser Console:
2. Navigate to the Assistant page where the chat component is used.
3. Open the browser's developer tools and go to the console tab.
4. Observe the Error: NotSupportedError: Failed to execute 'define' on 'CustomElementRegistry': the name "clabs-chat-code" has already been used with this registry

Suggested Severity

Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component.

Application/PAL

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate problems

[annawen1]

Hi @chethanrao49 I responded in the slack thread, but also putting in here as well. I'm not able to see the Failed to execute 'define' on 'CustomElementRegistry': the name "clabs-chat-code".... error with your stackblitz.

Are you seeing the error on your end in the stackblitz?