I am trying to incorporate this Calendar component into my Javascript Vue 3 project. To achieve this, I have created a new component in my project named ProCalendar.vue and copied the code from the example found in App.vue. Additionally, I have added the necessary dependency in the main.js file.
However, upon setting up the calendar component, I encountered several errors when running npm run dev:
INFO Starting development server... ERROR Failed to compile with 3 errors 19:54:20 [eslint] C:\Users\chuan\Documents\GitHub\PraePlan\services\frontend\src\main_components\home_components\ProCalendar.vue 3:19 error Parsing error: Unexpected token, expected "," (3:19) ✖ 1 problem (1 error, 0 warnings) You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use /* eslint-disable */ to ignore all warnings in a file. error in ./src/main_components/home_components/ProCalendar.vue?vue&type=script&setup=true&lang=ts Module parse failed: Unexpected token (3:19) File was processed with these loaders: * ./node_modules/vue-loader/dist/index.js You may need an additional loader to handle the result of these loaders. | import { defineComponent as _defineComponent } from 'vue' | import "vue-pro-calendar/style"; > import { ref, type Ref } from "vue"; | import type { Configs, Appointment } from "vue-pro-calendar"; | ... (error continued) <p>Upon researching, I learned that the issue might be related to the absence of TypeScript in my project. As a result, I tried installing TypeScript using <code>npm install typescriptandnpm install ts-loader, but it did not resolve the errors.Below is a snippet of my package.json for reference:
{ "name": "praeplan", ... }The content of my ProCalendar.vue file (copied from the GitHub project) is displayed below:
<script setup lang="ts"> import "vue-pro-calendar/style"; import { ref, type Ref } from "vue"; ... </script> <template> ...And here's how my
main.jsfile looks like:import { createApp } from "vue"; import App from "./App.vue"; import router from "./router"; import store from "./store"; import { ProCalendar } from "vue-pro-calendar" createApp(App).use(store).use(router).use(ProCalendar).mount("#app");Any assistance or guidance on resolving these errors would be greatly appreciated! :)