-1

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

3
  • Please share the App.vue file Commented Sep 12, 2022 at 10:19
  • the problem is NOT in the package.json file - it'd be your "code" Commented Sep 12, 2022 at 10:20
  • @BoussadjraBrahim I'm not sure if it's App.vue's fault but I always see it here upanh.org/image/3hiDF3 mainly this is the fault of node_modules Commented Sep 12, 2022 at 10:30

2 Answers 2

3

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

Sign up to request clarification or add additional context in comments.

Comments

0

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.

3 Comments

I see what you mean but this is an error in the node_modules directory and not an error in the .vue file that I wrote. It is a directory created when typing install command with nodejs. and it was shown as follows in the link. this upanh.org/image/image.3hiDF3
Ah okay, then maybe I would guess it's the wrong version. I think that you shouldn't have problems with Vue 3. Do you use Vue 2 for some specific reason ?
I use it because the company I work for requires it and other members can install it normally but only me can't work.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.