Doesn't work on fresh vite vue project

[u12206050]

Describe the problem

After starting a new vite project with vue and typescript, I installed the comet chat packages as described, set up the settings and attempted to use the CometChatUsersWithMessages component. However upon running the vite the dev server I get the following error

VITE v5.0.2  ready in 226 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
✘ [ERROR] Missing "./package.json" specifier in "@cometchat/chat-uikit-vue" package [plugin vite:dep-pre-bundle]

    node_modules/@cometchat/chat-sdk-javascript/CometChat.js:1:380888:
      1 │ ...on"))}catch(e){}try{require("@cometchat/chat-uikit-vue")&&(window.CometChatUiKit=require("@cometchat/chat-uikit-vue/package.json"))}catch(e){}}();
        ╵                                                                                             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  This error came from the "onResolve" callback registered here:

    node_modules/esbuild/lib/main.js:1292:20:
      1292 │       let promise = setup({
           ╵                     ^

    at setup (file://…/node_modules/vite/dist/node/chunks/dep-ErEj4WmL.js:39489:19)
    at handlePlugins (…/node_modules/esbuild/lib/main.js:1292:21)
    at buildOrContextImpl (…/node_modules/esbuild/lib/main.js:978:5)
    at Object.buildOrContext (…/node_modules/esbuild/lib/main.js:787:5)
    at …/node_modules/esbuild/lib/main.js:2206:68
    at new Promise (<anonymous>)
    at Object.context (…/node_modules/esbuild/lib/main.js:2206:27)
    at Object.context (…/node_modules/esbuild/lib/main.js:2046:58)
    at prepareEsbuildOptimizerRun (file://…/node_modules/vite/dist/node/chunks/dep-ErEj4WmL.js:63705:35)

This is my package json:

{
  "name": "test-chat",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@cometchat/chat-uikit-vue": "^4.0.3",
    "@cometchat/uikit-shared": "^4.0.7",
    "vue": "^3.3.8"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.5.0",
    "typescript": "^5.2.2",
    "vite": "^5.0.0",
    "vue-tsc": "^1.8.22"
  }
}

Here is the component that wraps around cometChat

<script setup lang="ts">
import { CometChatUsersWithMessages } from '@cometchat/chat-uikit-vue';
import '@cometchat/chat-uikit-vue/dist/style.css';
import { useCometChat } from './useCometChat';

const { cometUser } = await useCometChat();
</script>

<template>
	<div class="chat" v-if="cometUser"><CometChatUsersWithMessages :isMobileView="true" /></div>
</template>

<style>
  div.chat {
  	width: 800px;
  }
</style>

And this is the useCometChat.ts file

import { UIKitSettingsBuilder, UIKitSettings,} from '@cometchat/uikit-shared';
import { CometChatUIKit } from '@cometchat/chat-uikit-vue';
import { ref } from 'vue';

let cometSettings: UIKitSettings;

const COMETCHAT_CONSTANTS = {
	APP_ID: 'xxxxxxx', // Replace with your App ID
	REGION: 'EU', // Replace with your App Region
	AUTH_KEY: 'xxxxxxx', // Replace with your Auth Key
};


export async function useCometChat(userUid: string = ['SUPERHERO1', 'SUPERHERO2', 'SUPERHERO3', 'SUPERHERO4', 'SUPERHERO5'].at(Math.floor(Math.random() * 4.9)) as string) {
	if (cometSettings === null) {
		cometSettings = new UIKitSettingsBuilder()
			.setAppId(COMETCHAT_CONSTANTS.APP_ID)
			.setRegion(COMETCHAT_CONSTANTS.REGION)
			.setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
			.subscribePresenceForFriends()
			.build();
		
		//Initialize CometChat
		await CometChatUIKit.init(cometSettings);
	}

	const cometUser = ref<CometChat.User | null>(null);

	await CometChatUIKit.getLoggedinUser()!
		.then(user => {
			cometUser.value = user;
			if (!user) {
				// IN Production use loginWithAuthToken (get auth token from backend)
				CometChatUIKit.login(userUid, COMETCHAT_CONSTANTS.AUTH_KEY)!
					.then(user => {
						cometUser.value = user;
					})
					.catch(console.log);
			}
		})
		.catch(console.log);

	return { cometUser };
}

[cometchat-helpcenter-bot]

Keagan (CometChat Team) replied:

Hello there,

I'm Keagan, a member of the Support team, and I'm here to help you. Please allow us some time to look into the matter and get back to you with additional details.

Regards

Keagan Ellis
CometChat

[cometchat-helpcenter-bot]

Mathews (CometChat Team) replied:

Hi,
Thank you for reporting this issue. We have sent the information to our product engineering team for more investigation. We will be in touch when we have more information.

Mathews Mathai
Software Developer
CometChat

[u12206050]

Any update on this?

[cometchat-helpcenter-bot]

Keagan (CometChat Team) replied:

Hello,

We would like to inform you that our team has taken note of your request and it has been added to our December sprint. While we do not have specific timelines at the moment, we assure you that we are committed to delivering the best possible solution for your needs and will keep you updated on the progress.

If you have any further questions or concerns, please feel free to reach out to us.

Best Regards

Keagan Ellis
CometChat

[bhupendraitt]

@cometchat-helpcenter-bot Any update on this, I'm facing the same issue in my product. Please take a note of below statement. Maybe it will help you out to sort the issue.

The problem lies within the CometChat SDK, which tries to import its own package.json file, a pattern that is not supported by Vite.

[cometchat-helpcenter-bot]

Rosanne Fernando (CometChat Team) replied:

Hello,

I have an update from the team. This issue has been fixed in the latest Vue UI Kit version 4.2.0.

Please update the UI Kit & let us know if this issue has been fixed for you or not.

Thanks.

Rosanne Fernando
CometChat