search

nathanreyes / v-calendar

An elegant calendar and datepicker plugin for Vue.
https://vcalendar.io
MIT License
4.32k stars 841 forks source link

[Vue 2] Calendar & Datepicker not found #1392

Open mshafrizalait opened 8 months ago

mshafrizalait commented 8 months ago

Hello, I have installed v-calendar on my project. I have followed the installation method according to the documentation

I followed 2B step by importing Calendar/Datepicker in separate component.

Screenshot 2023-10-17 at 11 40 11

Here is my code and other related files

package.json

{
  "name": "@logistic-assistant/bima-fe",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve ./src/core/main.js",
    "build": "vue-cli-service build ./src/core/main.js",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint",
    "serve:standalone": "vue-cli-service serve --mode standalone"
  },
  "dependencies": {
    "@sentry/integrations": "^6.19.7",
    "@sentry/tracing": "^6.19.7",
    "@sentry/vue": "^6.19.7",
    "chart.js": "^3.9.1",
    "chartjs-plugin-datalabels": "^2.2.0",
    "core-js": "^3.6.5",
    "crypto-js": "^4.1.1",
    "hammerjs": "^2.0.8",
    "moment": "^2.29.4",
    "single-spa-vue": "^2.1.0",
    "v-calendar": "^2.4.2",
    "vee-validate": "^2.2.15",
    "vue": "^2.6.11",
    "vue-chartjs": "^5.2.0",
    "vue-router": "^3.2.0",
    "vue-scroll-picker": "^0.8.2",
    "vue-star-rating": "^1.7.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.17",
    "@vue/cli-plugin-eslint": "~4.5.17",
    "@vue/cli-plugin-router": "~4.5.17",
    "@vue/cli-plugin-unit-jest": "~4.5.17",
    "@vue/cli-plugin-vuex": "~4.5.17",
    "@vue/cli-service": "~4.5.17",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/test-utils": "^1.0.3",
    "axios": "^0.18.1",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^6.2.2",
    "lint-staged": "^9.5.0",
    "node-sass": "^4.12.0",
    "prettier": "^2.2.1",
    "sass-loader": "^8.0.2",
    "vue-cli-plugin-axios": "0.0.4",
    "vue-cli-plugin-single-spa": "~3.3.0",
    "vue-template-compiler": "^2.6.11"
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,vue}": [
      "vue-cli-service lint",
      "git add"
    ]
  },
  "jestSonar": {
    "reportPath": "coverage",
    "reportFile": "test-reporter.xml",
    "indent": 2
  }
}

CalendarContent (other details omitted)

import CalendarBima from "v-calendar/lib/components/calendar.umd";
import NotFoundSearch from "@/core/components/NotFoundSearch.vue";
export default {
  components: {
    CalendarBima,
    NotFoundSearch,
  },
  name: "CalendarDesktopContent",
  data: function () {
    return {
      selected: ""
    };
  },
</script>

DatePicker

import DatePicker from "v-calendar/lib/components/date-picker.umd";
export default {
  name: "DatepickerGista",
  props: {
    minDate: {
      // min date untuk dipilih (refer to documentation v-calendar)
      type: String,
      default: "false",
    },
    maxDate: {
      // max date untuk dipilih (refer to documentation v-calendar)
      type: String,
      default: "false",
    },
    value: {
      type: String,
      default: () => "",
    },
    disabled: {
      type: Boolean,
    },
    is24hr: {
      // refer to documentation v-calendar
      type: String,
    },
    mode: {
      // refer to documentation v-calendar
      type: String,
    },
    placeholder: {
      type: String,
    },
    error: {
      // error flag
      type: Boolean,
    },
    isRange: {
      type: Boolean,
      default: false,
    },
    size: {
      // if large -> text-lg, else text-small
      type: String,
    },
    label: {
      type: String,
      default: "",
    },
    withIcon: {
      type: Boolean,
      default: false,
    },
    required: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      modelConfig: {
        type: "string",
        mask: "DD/MM/YYYY", // Uses 'iso' if missing
      },
      range: { start: "", end: "" },
    };
  },
  components: {
    DatePicker,
  },
  methods: {
    handleSelected(value) {
      this.$emit("input", value);
    },
    handleInput(e) {
      if (e.inputType === "deleteContentBackward") {
        return e.preventDefault(); // Don't do anything to the input value
      }
      this.$emit("input", e.target.value);
    },
  },
};
</script>

Error

ERROR Failed to compile with 5 errors 11:37:20 AM

These dependencies were not found:

To install them, you can run: npm install --save v-calendar/lib/components/calendar.umd v-calendar/lib/components/date-picker.umd

Screenshot 2023-10-17 at 12 00 11

Am I missing something here? Or should I downgrade/upgrage v-calendar version?

Thanks

trig79 commented 8 months ago

We have the same issue, v2.4.2 is missing the component folder. v2.4.1 seems to be ok.

tomvo commented 8 months ago

Same issue here @nathanreyes could you please check the release?

mshafrizalait commented 8 months ago

The solution I used was to install v2.4.1 by changing v-calendar version in my package.json. From "v-calendar": "^2.4.2" to "v-calendar": "2.4.1".

klivak commented 7 months ago

I also have the same problem with the "v-calendar" version: "^2.4.2", downgrade to "v-calendar" version: "2.4.1" helped.

OmelyanenkoV commented 7 months ago

I have the same issue on 2.4.1 version, do you have any solutions/news about this issue?

klivak commented 7 months ago

@OmelyanenkoV, it couldn't be real with 2.4.1, check your dependencies, yarn.lock, or remove node_modules and reinstall all packages.

Сheck the .lock file, maybe the latest version is installed there.

swkutulu commented 7 months ago

2.4.1 has no lib/components subfolder 2.4.0 works for me

Drumstix42 commented 7 months ago

Can confirm that 2.4.2 release is broken and causes issues. Reverting to 2.4.1 continues to work.