Our powerful JS Calendar component


Post by vtx »

Im trying to use calendar-vue in typescript, but the type declarations of calendar-vue are missing. Any chance that you can provide these?


Post by saki »

This sounds strange. The typings are contained in calendar.d.ts file which is the part of the npm package and these should be automatically found by IDE and also webpack.

Can you give us a simple runnable showcase that would demonstrate the problem?


Post by vtx »

Sure, see the attached test project. If you run it you'll get:

Could not find a declaration file for module '@bryntum/calendar-vue'. '/Users/xxx/Develop/CalendarVueTypescript/calendar-vue-typescript/node_modules/@bryntum/calendar-vue/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/bryntum__calendar-vue` if it exists or add a new declaration (.d.ts) file containing `declare module '@bryntum/calendar-vue';`

I deleted the contents of node_modules in the zip to save space in the attachment. Just install the modules and run 'npm run serve' to see the error. (the calendar.d.ts file is included. I manually copied it over, just to be sure).

PS: I have used the trial package of the calendar.

Attachments
calendar-vue-typescript.zip
(1.18 MiB) Downloaded 114 times

Post by pmiklashevich »

Thanks for the report! We will address: https://github.com/bryntum/support/issues/3026
Also we have plans to add Vue+TypeScript demos: https://github.com/bryntum/support/issues/2964

Pavlo Miklashevych
Sr. Frontend Developer


Post by vtx »

ty. Any workaround for the time being?


Post by saki »

The workaround would be to create file node_modules/@bryntum/calendar-vue/index.d.ts with the following content:

declare module '@bryntum/calendar-vue'

Post by vtx »

I already tried that, but it results in:

Uncaught /Users/<xxx>/Documents/<xxx>/node_modules/@bryntum/calendar-vue/index.js:5
import './src/WrapperHelper.js';
^^^^^^
SyntaxError: Cannot use import statement outside a module

Post by vtx »

adding

"type": "module"

to the package.json doesn't help either:

Uncaught Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/<xxx>/Documents/<xxx>/node_modules/@bryntum/calendar-vue/index.js
    at Object.Module._extensions..js (:9080/internal/modules/cjs/loader.js:1169)

Post by saki »

Well, no easy workaround then. :(

The above ticket is "In progress", our expert works on it and we believe it will be release in the next patch version.


Post by sergey.maltsev »

Hi, vtx.

Please try this attached simple app based on your example.

calendar-vue-typescript.zip
(14.94 KiB) Downloaded 107 times
  • Unpack
  • Run npm install
  • Run npm run serve for dev server and navigate to https://localhost:8080/
  • Run npm run build for building dist package

Project zip contains patch folder with index.d.ts which is automatically copied with postinstall to node_modules\@bryntum\calendar-vue for typescript compatibility.

Also please check the correct way for using trial calendar npm package here
https://www.bryntum.com/docs/calendar/#Calendar/guides/npm-repository.md#installing-trial-packages

This will show Calendar in Browser

CalendarVue.png
CalendarVue.png (155.29 KiB) Viewed 1311 times

Post Reply