Cannot read properties of undefined (reading 'length')

[azliR]

Hi! I tried to add schedule (and calendar too) to my app, but it throws some errors like this:

[azlir@mairy outclass-vue]$ npm run dev

> outclass-vue@0.0.0 dev
> vite

  VITE v3.1.3  ready in 631 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose
Cannot read properties of undefined (reading 'length')
18:42:41 [vite] Internal server error: Cannot read properties of undefined (reading 'length')
      at memoizedBinarySearch (file:///home/azlir/Kuliah/Praktikum%20Pengembangan%20Aplikasi%20Web/outclass-vue/node_modules/vite/dist/node/chunks/dep-557f29e6.js:9959:25)
      at traceSegmentInternal (file:///home/azlir/Kuliah/Praktikum%20Pengembangan%20Aplikasi%20Web/outclass-vue/node_modules/vite/dist/node/chunks/dep-557f29e6.js:10062:17)
      at originalPositionFor$1 (file:///home/azlir/Kuliah/Praktikum%20Pengembangan%20Aplikasi%20Web/outclass-vue/node_modules/vite/dist/node/chunks/dep-557f29e6.js:10049:25)
      at formatError (file:///home/azlir/Kuliah/Praktikum%20Pengembangan%20Aplikasi%20Web/outclass-vue/node_modules/vite/dist/node/chunks/dep-557f29e6.js:40915:54)
      at TransformContext.error (file:///home/azlir/Kuliah/Praktikum%20Pengembangan%20Aplikasi%20Web/outclass-vue/node_modules/vite/dist/node/chunks/dep-557f29e6.js:40849:19)
      at Object.transform (file:///home/azlir/Kuliah/Praktikum%20Pengembangan%20Aplikasi%20Web/outclass-vue/node_modules/vite/dist/node/chunks/dep-557f29e6.js:41105:25)
      at async loadAndTransform (file:///home/azlir/Kuliah/Praktikum%20Pengembangan%20Aplikasi%20Web/outclass-vue/node_modules/vite/dist/node/chunks/dep-557f29e6.js:37364:29)

Here is my dependencies:

{
  ...
  "dependencies": {
    "@mdi/font": "5.9.55",
    "@syncfusion/ej2-vue-base": "^20.3.47",
    "@syncfusion/ej2-vue-calendars": "^20.3.47",
    "@syncfusion/ej2-vue-schedule": "^20.3.47",
    "crypto-random-string": "^5.0.0",
    "pinia": "^2.0.21",
    "roboto-fontface": "*",
    "vue": "^3.2.38",
    "vue-barcode-reader": "^1.0.2",
    "vue-class-component": "^8.0.0-rc.1",
    "vue-qrcode-reader": "^3.1.0-vue3-compatibility.5",
    "vue-router": "^4.1.5",
    "vuetify": "^3.0.0-beta.0",
    "webfontloader": "^1.0.0"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.1.4",
    "@types/node": "^16.11.56",
    "@types/vue-barcode-reader": "^0.0.0",
    "@types/webfontloader": "^1.0.0",
    "@vitejs/plugin-vue": "^3.0.3",
    "@vitejs/plugin-vue-jsx": "^2.0.1",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^11.0.0",
    "@vue/tsconfig": "^0.1.3",
    "eslint": "^8.22.0",
    "eslint-plugin-vue": "^9.3.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.7.1",
    "typescript": "~4.7.4",
    "vite": "^3.0.9",
    "vite-plugin-vuetify": "^1.0.0-alpha.12",
    "vue-cli-plugin-vuetify": "~2.5.8",
    "vue-tsc": "^0.40.7"
  },
  ...
}

My code is the same as this documentation https://ej2.syncfusion.com/vue/documentation/schedule/getting-started-vue-3/. Thanks in advance.

[ravikumar-venkatesan-m]

Hi azliR,

We have validated your query “I tried to add schedule (and calendar too) to my app, but it throws some errors” at our end. We have added the Schedule to the Vue + Vite project by following the getting started steps it works as expected and we are not facing any issues. We have prepared a sample for your reference.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ej2-vue-3-with-vite-schedule-sample1541790504

Kindly try the shared sample and if you still facing issues share the below details.

• Share the steps to reproduce the issue or
• Reproduce the problem in our shared sample or
• Share an issue reproducing sample if possible.

Regards, Ravikumar Venkatesan

[azliR]

Hi, thank you for the reply, I got this error when I tried to run the project from your sample

Terminal log

``` [azlir@mairy vite+vue]$ pnpm install Packages: +66 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ Packages are cloned from the content-addressable store to the virtual store. Content-addressable store is at: /home/azlir/.local/share/pnpm/store/v3 Virtual store is at: node_modules/.pnpm Progress: resolved 88, reused 66, downloaded 0, added 66, done dependencies: + @syncfusion/ej2-vue-calendars 20.3.49 + @syncfusion/ej2-vue-schedule 20.3.49 + vue 3.2.40 + vue-class-component 8.0.0-rc.1 devDependencies: + @vitejs/plugin-vue 3.1.2 + vite 3.1.8 Done in 55.2s [azlir@mairy vite+vue]$ pnpm run dev > vite-project@0.0.0 dev /home/azlir/Music/vite+vue > vite VITE v3.1.8 ready in 421 ms ➜ Local: http://127.0.0.1:5173/ ➜ Network: use --host to expose ✘ [ERROR] No matching export in "node_modules/.pnpm/vue@3.2.40/node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default" node_modules/.pnpm/@syncfusion+ej2-vue-base@20.3.49/node_modules/@syncfusion/ej2-vue-base/src/component-base.js:20:7: 20 │ import Vue from 'vue'; ╵ ~~~ ✘ [ERROR] No matching export in "node_modules/.pnpm/vue@3.2.40/node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default" node_modules/.pnpm/@syncfusion+ej2-vue-base@20.3.49/node_modules/@syncfusion/ej2-vue-base/src/component-decorator.js:4:7: 4 │ import Vue from 'vue'; ╵ ~~~ ✘ [ERROR] No matching export in "node_modules/.pnpm/vue@3.2.40/node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default" node_modules/.pnpm/@syncfusion+ej2-vue-base@20.3.49/node_modules/@syncfusion/ej2-vue-base/src/template.js:1:7: 1 │ import Vue from "vue"; ╵ ~~~ ✘ [ERROR] No matching export in "node_modules/.pnpm/vue@3.2.40/node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default" node_modules/.pnpm/@syncfusion+ej2-vue-schedule@20.3.49/node_modules/@syncfusion/ej2-vue-schedule/src/schedule/views.directive.js:23:7: 23 │ import Vue from 'vue'; ╵ ~~~ ✘ [ERROR] No matching export in "node_modules/.pnpm/vue@3.2.40/node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default" node_modules/.pnpm/@syncfusion+ej2-vue-schedule@20.3.49/node_modules/@syncfusion/ej2-vue-schedule/src/schedule/resources.directive.js:23:7: 23 │ import Vue from 'vue'; ╵ ~~~ ✘ [ERROR] No matching export in "node_modules/.pnpm/vue@3.2.40/node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default" node_modules/.pnpm/@syncfusion+ej2-vue-schedule@20.3.49/node_modules/@syncfusion/ej2-vue-schedule/src/schedule/headerrows.directive.js:23:7: 23 │ import Vue from 'vue'; ╵ ~~~ /home/azlir/Music/vite+vue/node_modules/.pnpm/esbuild@0.15.10/node_modules/esbuild/lib/main.js:1566 let error = new Error(`${text}${summary}`); ^ Error: Build failed with 6 errors: node_modules/.pnpm/@syncfusion+ej2-vue-base@20.3.49/node_modules/@syncfusion/ej2-vue-base/src/component-base.js:20:7: ERROR: No matching export in "node_modules/.pnpm/vue@3.2.40/node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default" node_modules/.pnpm/@syncfusion+ej2-vue-base@20.3.49/node_modules/@syncfusion/ej2-vue-base/src/component-decorator.js:4:7: ERROR: No matching export in "node_modules/.pnpm/vue@3.2.40/node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default" node_modules/.pnpm/@syncfusion+ej2-vue-base@20.3.49/node_modules/@syncfusion/ej2-vue-base/src/template.js:1:7: ERROR: No matching export in "node_modules/.pnpm/vue@3.2.40/node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default" node_modules/.pnpm/@syncfusion+ej2-vue-schedule@20.3.49/node_modules/@syncfusion/ej2-vue-schedule/src/schedule/headerrows.directive.js:23:7: ERROR: No matching export in "node_modules/.pnpm/vue@3.2.40/node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default" node_modules/.pnpm/@syncfusion+ej2-vue-schedule@20.3.49/node_modules/@syncfusion/ej2-vue-schedule/src/schedule/resources.directive.js:23:7: ERROR: No matching export in "node_modules/.pnpm/vue@3.2.40/node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default" ... at failureErrorWithLog (/home/azlir/Music/vite+vue/node_modules/.pnpm/esbuild@0.15.10/node_modules/esbuild/lib/main.js:1566:15) at /home/azlir/Music/vite+vue/node_modules/.pnpm/esbuild@0.15.10/node_modules/esbuild/lib/main.js:1024:28 at runOnEndCallbacks (/home/azlir/Music/vite+vue/node_modules/.pnpm/esbuild@0.15.10/node_modules/esbuild/lib/main.js:1438:61) at buildResponseToResult (/home/azlir/Music/vite+vue/node_modules/.pnpm/esbuild@0.15.10/node_modules/esbuild/lib/main.js:1022:7) at /home/azlir/Music/vite+vue/node_modules/.pnpm/esbuild@0.15.10/node_modules/esbuild/lib/main.js:1134:14 at responseCallbacks. (/home/azlir/Music/vite+vue/node_modules/.pnpm/esbuild@0.15.10/node_modules/esbuild/lib/main.js:671:9) at handleIncomingPacket (/home/azlir/Music/vite+vue/node_modules/.pnpm/esbuild@0.15.10/node_modules/esbuild/lib/main.js:726:9) at Socket.readFromStdout (/home/azlir/Music/vite+vue/node_modules/.pnpm/esbuild@0.15.10/node_modules/esbuild/lib/main.js:647:7) at Socket.emit (node:events:513:28) at addChunk (node:internal/streams/readable:315:12) { errors: [ { detail: undefined, id: '', location: { column: 7, file: 'node_modules/.pnpm/@syncfusion+ej2-vue-base@20.3.49/node_modules/@syncfusion/ej2-vue-base/src/component-base.js', length: 3, line: 20, lineText: "import Vue from 'vue';", namespace: '', suggestion: '' }, notes: [], pluginName: '', text: 'No matching export in "node_modules/.pnpm/vue@3.2.40/node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"' }, { detail: undefined, id: '', location: { column: 7, file: 'node_modules/.pnpm/@syncfusion+ej2-vue-base@20.3.49/node_modules/@syncfusion/ej2-vue-base/src/component-decorator.js', length: 3, line: 4, lineText: "import Vue from 'vue';", namespace: '', suggestion: '' }, notes: [], pluginName: '', text: 'No matching export in "node_modules/.pnpm/vue@3.2.40/node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"' }, { detail: undefined, id: '', location: { column: 7, file: 'node_modules/.pnpm/@syncfusion+ej2-vue-base@20.3.49/node_modules/@syncfusion/ej2-vue-base/src/template.js', length: 3, line: 1, lineText: 'import Vue from "vue";', namespace: '', suggestion: '' }, notes: [], pluginName: '', text: 'No matching export in "node_modules/.pnpm/vue@3.2.40/node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"' }, { detail: undefined, id: '', location: { column: 7, file: 'node_modules/.pnpm/@syncfusion+ej2-vue-schedule@20.3.49/node_modules/@syncfusion/ej2-vue-schedule/src/schedule/headerrows.directive.js', length: 3, line: 23, lineText: "import Vue from 'vue';", namespace: '', suggestion: '' }, notes: [], pluginName: '', text: 'No matching export in "node_modules/.pnpm/vue@3.2.40/node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"' }, { detail: undefined, id: '', location: { column: 7, file: 'node_modules/.pnpm/@syncfusion+ej2-vue-schedule@20.3.49/node_modules/@syncfusion/ej2-vue-schedule/src/schedule/resources.directive.js', length: 3, line: 23, lineText: "import Vue from 'vue';", namespace: '', suggestion: '' }, notes: [], pluginName: '', text: 'No matching export in "node_modules/.pnpm/vue@3.2.40/node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"' }, { detail: undefined, id: '', location: { column: 7, file: 'node_modules/.pnpm/@syncfusion+ej2-vue-schedule@20.3.49/node_modules/@syncfusion/ej2-vue-schedule/src/schedule/views.directive.js', length: 3, line: 23, lineText: "import Vue from 'vue';", namespace: '', suggestion: '' }, notes: [], pluginName: '', text: 'No matching export in "node_modules/.pnpm/vue@3.2.40/node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"' } ], warnings: [] }  ELIFECYCLE  Command failed with exit code 1. ```

That's all the command that I run. I hope it could be fix asap. Thanks you in advance.

[ravikumar-venkatesan-m]

Hi Azlir,

Thanks for the update.

We have checked our shared sample at our end and it works as expected at our end. We suggest you follow up on the below-shared steps to run the shared sample.

1. Install the packages using the command npm install.
2. Run the project using the command npm run dev.

Output:

Regards, Ravikumar Venkatesan

[syncsiva]

This issue has not had any activity for a week. Closing for housekeeping purposes. Please feel free to reopen it if you have more information that can help us investigate the issue further.