Failed to resolve entry for package "@videosdk.live/rtc-js-prebuilt"

[col-bc]

I am trying to use VideoSDK with vue3 and vite. When I use the cope from the videosdk-rtc-prebuilt-examples repository I get this error on build.

8:27:59 AM [vite] Internal server error: Failed to resolve entry for package "@videosdk.live/rtc-js-prebuilt". The package may have incorrect main/module/exports specified in its package.json.
  Plugin: vite:import-analysis
  File: C:/Users/fouro/code/myintellectualspace/front/src/components/VideoComponent.vue
      at packageEntryFailure (file:///C:/Users/fouro/code/myintellectualspace/front/node_modules/vite/dist/node/chunks/dep-1513d487.js:34405:11)
      at resolvePackageEntry (file:///C:/Users/fouro/code/myintellectualspace/front/node_modules/vite/dist/node/chunks/dep-1513d487.js:34402:5)
      at tryNodeResolve (file:///C:/Users/fouro/code/myintellectualspace/front/node_modules/vite/dist/node/chunks/dep-1513d487.js:34160:20)
      at Context.resolveId (file:///C:/Users/fouro/code/myintellectualspace/front/node_modules/vite/dist/node/chunks/dep-1513d487.js:33962:28)
      at async Object.resolveId (file:///C:/Users/fouro/code/myintellectualspace/front/node_modules/vite/dist/node/chunks/dep-1513d487.js:35209:32)
      at async TransformContext.resolve (file:///C:/Users/fouro/code/myintellectualspace/front/node_modules/vite/dist/node/chunks/dep-1513d487.js:34974:23)
      at async normalizeUrl (file:///C:/Users/fouro/code/myintellectualspace/front/node_modules/vite/dist/node/chunks/dep-1513d487.js:40139:34)
      at async TransformContext.transform (file:///C:/Users/fouro/code/myintellectualspace/front/node_modules/vite/dist/node/chunks/dep-1513d487.js:40279:47)
      at async Object.transform (file:///C:/Users/fouro/code/myintellectualspace/front/node_modules/vite/dist/node/chunks/dep-1513d487.js:35277:30)
      at async loadAndTransform (file:///C:/Users/fouro/code/myintellectualspace/front/node_modules/vite/dist/node/chunks/dep-1513d487.js:39776:29) (x2)

This is the contents of my VideoComponent.vue

<script>
import { VideoSDKMeeting } from '@videosdk.live/rtc-js-prebuilt'
import { API_KEY } from '@/secrets'
export default {
  name: 'App',
  data() {
    return {
      name: 'Flavio',
    }
  },
  mounted: async function () {
    const apiKey = process.env.VUE_APP_VIDEOSDK_API_KEY
    const meetingId = 'milkyway'
    const name = 'Demo User'
    const config = {
      name: name,
      meetingId: meetingId,
      apiKey: API_KEY,
      region: 'sg001', // region for new meeting
      containerId: null,
      redirectOnLeave: 'https://www.videosdk.live/',
      micEnabled: true,
      webcamEnabled: true,
      participantCanToggleSelfWebcam: true,
      participantCanToggleSelfMic: true,
      participantCanLeave: true, // if false, leave button won't be visible
      chatEnabled: true,
      screenShareEnabled: true,
      pollEnabled: true,
      whiteboardEnabled: true,
      raiseHandEnabled: true,
      recording: {
        autoStart: true, // auto start recording on participant joined
        enabled: true,
        webhookUrl: 'https://www.videosdk.live/callback',
        awsDirPath: `/meeting-recordings/${meetingId}/`, // automatically save recording in this s3 path
      },
      livestream: {
        autoStart: true,
        enabled: true,
      },
      layout: {
        type: 'SPOTLIGHT', // "SPOTLIGHT" | "SIDEBAR" | "GRID"
        priority: 'PIN', // "SPEAKER" | "PIN",
        // gridSize: 3,
      },
      branding: {
        enabled: true,
        logoURL:
          'https://static.zujonow.com/videosdk.live/videosdk_logo_circle_big.png',
        name: 'Prebuilt',
        poweredBy: false,
      },
      permissions: {
        pin: true,
        askToJoin: false, // Ask joined participants for entry in meeting
        toggleParticipantMic: true, // Can toggle other participant's mic
        toggleParticipantWebcam: true, // Can toggle other participant's webcam
        drawOnWhiteboard: true, // Can draw on whiteboard
        toggleWhiteboard: true, // Can toggle whiteboard
        toggleRecording: true, // Can toggle meeting recording
        toggleLivestream: true, //can toggle live stream
        removeParticipant: true, // Can remove participant
        endMeeting: true, // Can end meeting
        changeLayout: true, //can change layout
      },
      joinScreen: {
        visible: true, // Show the join screen ?
        title: 'Daily scrum', // Meeting title
        meetingUrl: window.location.href, // Meeting joining url
      },
      leftScreen: {
        // visible when redirect on leave not provieded
        actionButton: {
          // optional action button
          label: 'Video SDK Live', // action button label
          href: 'https://videosdk.live/', // action button href
        },
      },
      notificationSoundEnabled: true,
      debug: true, // pop up error during invalid config or netwrok error
      maxResolution: 'sd', // "hd" or "sd"
    }
    const meeting = new VideoSDKMeeting()
    meeting.init(config)
  },
}
</script>

And my dependency list

front@0.0.0 C:\Users\fouro\code\myintellectualspace\front
├── @tailwindcss/forms@0.5.2
├── @videosdk.live/rtc-js-prebuilt@0.3.12
├── @vitejs/plugin-vue@3.0.1
├── autoprefixer@10.4.7
├── axios@0.27.2
├── eslint-plugin-vue@9.2.0
├── eslint@8.20.0
├── flowbite@1.5.1
├── pinia-plugin-persistedstate@1.6.3
├── pinia@2.0.16
├── postcss@8.4.14
├── tailwindcss@3.1.6
├── vite@3.0.2
├── vue-router@4.1.2
└── vue@3.2.37

And assistance would be greatly appreciated!

[atif0075]

import it like this

import { VideoSDKMeeting } from "@videosdk.live/rtc-js-prebuilt/rtc-js-prebuilt"

[M0hc3n]

import it like this

import { VideoSDKMeeting } from "@videosdk.live/rtc-js-prebuilt/rtc-js-prebuilt"

can confirm it's working