I want to use this Calendar component into my Javascript Vue 3 project. To do so, I created a component in my project called ProCalendar.vue, and copy-paste the App.vue code that shows in the example. And I add the dependency in the main.js file.
Once having this setup, it gives my the following errors when I try to do a 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 in ./src/main_components/home_components/ProCalendar.vue?vue&type=template&id=d18ce454&ts=true
Module parse failed: Unexpected token (3:27)
File was processed with these loaders:
* ./node_modules/vue-loader/dist/templateLoader.js
* ./node_modules/vue-loader/dist/index.js
You may need an additional loader to handle the result of these loaders.
| import { createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
|
> export function render(_ctx: any,_cache: any,$props: any,$setup: any,$data: any,$options: any) {
| const _component_pro_calendar = _resolveComponent("pro-calendar", true)!
|
ERROR in ./src/main_components/home_components/ProCalendar.vue?vue&type=script&setup=true&lang=ts (./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/main_components/home_components/ProCalendar.vue?vue&type=script&setup=true&lang=ts) 3:19
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";
|
@ ./src/main_components/home_components/ProCalendar.vue?vue&type=script&setup=true&lang=ts 1:0-147 1:0-147 1:148-284 1:148-284
@ ./src/main_components/home_components/ProCalendar.vue 2:0-73 3:0-68 3:0-68 6:49-55
@ ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/main_components/Home.vue?vue&type=script&lang=js 2:0-60 33:4-15
@ ./src/main_components/Home.vue?vue&type=script&lang=js 1:0-196 1:0-196 1:197-382 1:197-382
@ ./src/main_components/Home.vue 2:0-55 3:0-50 3:0-50 6:49-55
@ ./src/router/index.js 2:0-42 27:13-17
@ ./src/main.js 3:0-30 6:30-36
ERROR in ./src/main_components/home_components/ProCalendar.vue?vue&type=template&id=d18ce454&ts=true (./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/main_components/home_components/ProCalendar.vue?vue&type=template&id=d18ce454&ts=true) 3:27
Module parse failed: Unexpected token (3:27)
File was processed with these loaders:
* ./node_modules/vue-loader/dist/templateLoader.js
* ./node_modules/vue-loader/dist/index.js
You may need an additional loader to handle the result of these loaders.
| import { createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
|
> export function render(_ctx: any,_cache: any,$props: any,$setup: any,$data: any,$options: any) {
| const _component_pro_calendar = _resolveComponent("pro-calendar", true)!
|
@ ./src/main_components/home_components/ProCalendar.vue?vue&type=template&id=d18ce454&ts=true 1:0-216 1:0-216
@ ./src/main_components/home_components/ProCalendar.vue 1:0-80 6:68-74 16:79-18:3 17:29-35 16:2-18:4
@ ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/main_components/Home.vue?vue&type=script&lang=js 2:0-60 33:4-15
@ ./src/main_components/Home.vue?vue&type=script&lang=js 1:0-196 1:0-196 1:197-382 1:197-382
@ ./src/main_components/Home.vue 2:0-55 3:0-50 3:0-50 6:49-55
@ ./src/router/index.js 2:0-42 27:13-17
@ ./src/main.js 3:0-30 6:30-36
ERROR in [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)
webpack compiled with 3 errors
I googled about it and found that a possible problem could be that I didn't had installed typescript in my projecct, so I runed npm install typescript and npm install ts-loader and didn't changed nothing.
This is the package.json:
{
"name": "praeplan",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "vue-cli-service serve",
"start": "npm run dev",
"serve": "serve -s dist -p 8080",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^1.4.0",
"core-js": "^3.8.3",
"vue": "^3.2.13",
"vue-calendar-3": "^2.2.6",
"vue-pro-calendar": "^1.1.6",
"vue-router": "^4.0.3",
"vuex": "^4.0.0",
"vuex-persistedstate": "^4.1.0"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-e2e-cypress": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-plugin-unit-jest": "~5.0.0",
"@vue/cli-plugin-vuex": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"@vue/test-utils": "^2.0.0-0",
"@vue/vue3-jest": "^27.0.0-alpha.1",
"babel-jest": "^27.0.6",
"cypress": "^9.7.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.0.3",
"jest": "^27.0.5",
"lint-staged": "^11.1.2",
"prettier": "^2.4.1",
"ts-loader": "^9.4.4",
"typescript": "^5.1.6",
"vue-tsc": "^1.8.8",
"webpack-cli": "^5.1.4"
},
"gitHooks": {
"pre-commit": "lint-staged"
}
}
My ProCalendar.vue file (copy-pasted from the github project):
<script setup lang="ts">
import "vue-pro-calendar/style";
import { ref, type Ref } from "vue";
import type { Configs, Appointment } from "vue-pro-calendar";
const cfg = ref<Configs>({
viewEvent: undefined,
reportEvent: {
icon: true,
text: "",
},
searchPlaceholder: "",
eventName: "",
closeText: "",
nativeDatepicker: true,
});
const evts: Ref<Appointment[]> = ref([
{
date: "2022-11-19T14:00:00.000Z",
comment: "",
id: "cl32rbkjk1700101o53e3e3uhn",
keywords: "Projet BAMBA",
name: "MONTCHO Kévin",
},
//...
]);
</script>
<template>
<!-- all props are optional -->
<pro-calendar
:events="evts"
:loading="false"
:config="cfg"
view="month"
date="2022-11-10T00:00:00.000Z"
@calendarClosed="void 0"
@fetchEvents="void 0"
/>
</template>
And my main.js file:
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");
Thanks for your help! :P
Estus Flask in his comment has the right of it. You don't need to install TS if you remove all TS related code. Your script should look like this:
<script setup>
import "vue-pro-calendar/style";
import { ref } from "vue";
const cfg = ref({
viewEvent: undefined,
reportEvent: {
icon: true,
text: "",
},
searchPlaceholder: "",
eventName: "",
closeText: "",
nativeDatepicker: true,
});
const evts = ref([
{
date: "2022-11-19T14:00:00.000Z",
comment: "",
id: "cl32rbkjk1700101o53e3e3uhn",
keywords: "Projet BAMBA",
name: "MONTCHO Kévin",
},
//...
]);
</script>
I tested and confirmed myself in this StackBlitz that the lib works as a JS lib