vuejs 2 composition api: TypeError: Cannot read properties of undefined (reading 'length')

Question

hello vuejs user community I'm stuck with a problem that can't be fixed:

• currently i am using vuejs 2.x, and my operating system is windows 11. after yarn install or npm install this source consle gives me an error as shown.

enter image description here

[Vue warn]: Error in setup: "TypeError: Cannot read properties of undefined (reading 'length')"

and i am using vue/composition-api version 1.4.0, i also updated to version 1.7.0 it keeps giving the same error above.but still not possible.

and here is my package.json file

{
  "name": "vuexy-vuejs-react-html-laravel-admin-dashboard-template",
  "version": "6.4.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@casl/ability": "4.1.6",
    "@casl/vue": "1.1.1",
    "@fullcalendar/common": "5.x",
    "@fullcalendar/core": "5.x",
    "@fullcalendar/daygrid": "5.x",
    "@fullcalendar/interaction": "5.x",
    "@fullcalendar/list": "5.x",
    "@fullcalendar/timegrid": "5.x",
    "@fullcalendar/vue": "5.x",
    "@popperjs/core": "^2.11.5",
    "@riophae/vue-treeselect": "^0.4.0",
    "@syncfusion/ej2-vue-dropdowns": "^19.4.52",
    "@vue/composition-api": "1.4.0",
    "@vueuse/core": "4.0.0",
    "animate.css": "4.1.1",
    "apexcharts": "3.23.0",
    "axios": "0.21.1",
    "axios-mock-adapter": "1.19.0",
    "bootstrap": "4.6.0",
    "bootstrap-vue": "2.21.1",
    "chart.js": "^2.9.4",
    "core-js": "^3.25.1",
    "dayjs": "1.10.7",
    "decimal.js": "^10.3.1",
    "devextreme": "21.1.6",
    "devextreme-aspnet-data-nojquery": "^2.8.6",
    "devextreme-vue": "21.1.6",
    "echarts": "4.8.0",
    "exceljs": "^4.3.0",
    "file-saver-es": "^2.0.5",
    "inputmask": "^5.0.6",
    "jquery": "^3.6.0",
    "jsonwebtoken": "8.5.1",
    "jspdf": "^2.5.1",
    "jspdf-autotable": "^3.5.20",
    "leaflet": "1.6.0",
    "portal-vue": "2.1.7",
    "postcss-rtl": "1.7.3",
    "prismjs": "1.19.0",
    "qrcode": "^1.5.0",
    "string-math": "^1.2.2",
    "swiper": "5.4.5",
    "uuid": "8.3.2",
    "vee-validate": "3.4.5",
    "vue": "2.x",
    "vue-apexcharts": "1.6.0",
    "vue-autosuggest": "2.2.0",
    "vue-awesome-swiper": "4.1.1",
    "vue-base64-file-upload": "^1.0.4",
    "vue-chartjs": "3.5.0",
    "vue-cleave-component": "2.1.3",
    "vue-clickaway": "^2.2.2",
    "vue-clipboard2": "0.3.1",
    "vue-context": "6.0.0",
    "vue-cool-select": "^3.5.2",
    "vue-custom-scrollbar": "^1.4.3",
    "vue-easy-dnd": "^1.19.0",
    "vue-echarts": "5.0.0-beta.0",
    "vue-feather-icons": "5.1.0",
    "vue-flatpickr-component": "8.1.6",
    "vue-form-wizard": "0.8.4",
    "vue-good-table": "2.21.0",
    "vue-html2pdf": "^1.8.0",
    "vue-i18n": "8.22.2",
    "vue-multiselect": "^2.1.6",
    "vue-numeric": "^2.5.0",
    "vue-perfect-scrollbar": "0.2.1",
    "vue-prism-component": "1.1.1",
    "vue-qrcode": "^0.3.5",
    "vue-quill-editor": "3.0.6",
    "vue-ripple-directive": "2.0.1",
    "vue-router": "3.4.9",
    "vue-select": "3.11.2",
    "vue-slider-component": "3.2.11",
    "vue-swatches": "^2.1.1",
    "vue-sweetalert2": "4.1.1",
    "vue-toastification": "1.7.8",
    "vue-tour": "1.5.0",
    "vue-tree-halower": "1.8.3",
    "vue2-datepicker": "^3.10.4",
    "vue2-leaflet": "2.5.2",
    "vuedraggable": "2.24.3",
    "vuex": "3.6.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.9",
    "@vue/cli-plugin-eslint": "~4.5.9",
    "@vue/cli-plugin-router": "~4.5.9",
    "@vue/cli-plugin-vuex": "~4.5.9",
    "@vue/cli-service": "~4.5.9",
    "@vue/eslint-config-airbnb": "^5.3.0",
    "@vuepress/plugin-medium-zoom": "^1.7.1",
    "babel-eslint": "^10.0.3",
    "eslint": "6.8.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-vue": "6.2.2",
    "sass": "1.32.*",
    "sass-loader": "^10.1.0",
    "vue-template-compiler": "2.x"
  }
}

thank you and regards

Answer 1

The above error is because it conflicts the "vue" and "@vue/composition-api" versions. because "@vue/composition-api": "^1.4.0", it only support "vue" version: "2.6.14", and below so we have to limit its version

I fixed the above step with the following steps:

Step 1: i delete node_modules folder and package-lock.json file.

Step 2: go to package.json file inside dependencies find "vue": "2.x", change to "vue": "2.6.x", and "vue-template-compiler": "2.x" edit to "vue-template-compiler": "2.6.x"

Step 3: inside terminal of project directory type npm install again and then npm run serve to see the result.

Hope this post helps

Answer 2

The problem isn't with the composition API, problem is with your code. You are probably trying to access length of an array which is not defined. Look in console for the error output and try to find where the error comes from clicking on destination located to the right of the error message.