Missing type declaration files. Could not find a declaration file for module.

[KnorpelSenf]

When using the module in a TypeScript project, I get the error message

Could not find a declaration file for module 'tiptap-vuetify'. '/tmp/test/tiptap-vuetify/dist/bundle-umd.js' implicitly has an 'any' type. Try npm install @types/tiptap-vuetify if it exists or add a new declaration (.d.ts) file containing declare module 'tiptap-vuetify';ts(7016)

and I see that no declaration files are emitted as specified in tsconfig.json.

Setting the option to true so that declaration files are emitted breaks the build process. How is this package supposed to be used with TypeScript?

[Guillaume-N]

@KnorpelSenf did you find a solution?

[KnorpelSenf]

No, sorry. I basically just told Typescript to ignore missing types, i.e. used it as a plain js library.

[Guillaume-N]

@KnorpelSenf I ended up doing what the error suggested:

Simply create a tiptap-vuetify.d.ts file in my types folder that contains declare module 'tiptap-vuetify'

[KnorpelSenf]

But that doesn't give you type safety, does it? That's nothing more than silencing the compiler so it doesn't whine at you. Am I wrong?

[iliyaZelenko]

Hi!

Please, try this in yours tsconfig.json:

"compilerOptions": {
  "types": ["...", "tiptap-vuetify"],

I took this solution from here: https://github.com/vuetifyjs/vuetify/issues/5944#issuecomment-480494060

---

This library must have types, I specified them here, source here.

Do you have the node_modules/tiptap-vuetify/dist/main.d.ts file?

Hope this helps, I will open the issue if the problem is not solved.

[KnorpelSenf]

Adding tiptap-vuetify to the types does not change anything about the problem. When installing the package from npm, these are the files that are shipped:

node_modules/tiptap-vuetify$ tree --filelimit 7
.
├── CHANGELOG.md
├── dist
│   ├── bundle-cjs.js
│   ├── bundle-esm.js
│   ├── bundle-iife.js
│   ├── bundle-umd.js
│   └── main.css
├── package.json
├── README.md
├── src [8 entries exceeds filelimit, not opening dir]
└── types
    ├── index.d.ts
    ├── shims-tiptap.d.ts
    └── shims-vue.d.ts

3 directories, 11 files

Can you point me to a repo that uses TS and tiptap-vuetify and that has a working config without compile errors? I would happily take a look at it.

[iliyaZelenko]

Can you point me to a repo that uses TS and tiptap-vuetify and that has a working config without compile errors? I would happily take a look at it.

Sorry, I can not find such a project. But I had to test it somewhere.

Ok, can you try to insert this code import 'tiptap-vuetify/types/index' to your .d.ts file? (file for typings of your project).

Also you can try to modify this line but in your node_modules/tiptap-vuetify/package.json to direct to the types/index.d.ts.

[KnorpelSenf]

I tried changing package.json and now I have even more errors. Instead of the error above, I have one error per import from tiptap-vuetify, each similar to the following:

Module '"../../node_modules/tiptap-vuetify/types"' has no exported member 'TiptapVuetifyPlugin'.

As I'm trying to use it in a Typescript project, I do not have any .d.ts files I could modify to import the types. When I create a file like this and add it to the type roots in tsconfig.json, it get the original errors of this issue and this one in addition:

ERROR in /home/steffen/git/ng-art-prototype/frontend/node_modules/tiptap-vuetify/src/configs/theme.ts(1,25):
1:25 Cannot find module '~/extensions/nativeExtensions/icons/VuetifyIcon' or its corresponding type declarations.
  > 1 | import VuetifyIcon from '~/extensions/nativeExtensions/icons/VuetifyIcon'
      |                         ^
    2 | 
    3 | export const enum VuetifyIconsGroups {
    4 |   // default icons in vuetify (official material design icons)

This means that the typings of the library rely on absolute (!) file paths in order to be properly checked.

If anyone else reading this issue could share a link to a working repo, I would really appreciate it.

[Guillaume-N]

Can you point me to a repo that uses TS and tiptap-vuetify and that has a working config without compile errors? I would happily take a look at it.

Sorry, I can not find such a project. But I had to test it somewhere.

Ok, can you try to insert this code import 'tiptap-vuetify/types/index' to your .d.ts file? (file for typings of your project).

Also you can try to modify this line but in your node_modules/tiptap-vuetify/package.json to direct to the types/index.d.ts.

I tried both without success. The first one doesn't change anything. With the second one I get the same errors as @KnorpelSenf :

Module '"../node_modules/tiptap-vuetify/types"' has no exported member 'TiptapVuetify'.
 Module '"../node_modules/tiptap-vuetify/types"' has no exported member 'Heading'.
Module '"../node_modules/tiptap-vuetify/types"' has no exported member 'Bold'.

If in tiptap-vuetify.d.ts I add declare module 'tiptap-vuetify', I get the following error:

Property 'content' does not exist on type '{ components: { TiptapVuetify: any; }; props: { readOnly: { type: BooleanConstructor; default: boolean; }; data: { type: StringConstructor; required: boolean; }; }; data: () => { ...; }; created(): void; }'

because I did:

created() {
    this.content = this.data
  }

where this.data is a prop. Whole component: https://pastebin.com/3aGQtm1u

Adding tiptap-vuetify to types in tsconfig.json doesn't work either.

[KnorpelSenf]

I do not think it will be possible to use this lib with TypeScript and have type safety. I also researched and I could not find a single project that does this.

After all, it makes a lot of sense because the types are not there and a different config on our side cannot change this. Mentioning Typescript support in the README is a little misleading at best—yes, when developing the library, there are types, but that does not apply to library consumers.

I do have to take back my statement about absolute file paths, at least partially: they seem to be transformed in the build process so that's not an issue. But that does not happen when actually using the library of course, that's why typescript does indeed interpret the imports as references to files in the $HOME directory, cf. the error message in my last post.

[genu]

What needs to be done, I think, is either disable type safety all-together, or implement the correct interfaces.

In the current condition, this doesn't work at all in any typescript project.

It's better to have it working, at least, without type safety.

[DJZT]

Hi @iliyaZelenko Do you have any updates about his problem?

[giulyferto]

Hi!

Please, try this in yours tsconfig.json:

"compilerOptions": {
  "types": ["...", "tiptap-vuetify"],

This actually helped me thank you so much!!!

[dogusdeniz]

Hi @iliyaZelenko Do you have any updates about his problem?

[ampirzadeh]

Would really appreciate an update on this, if anyone has a solution or a work around which actually has type safety!

[atefehsafarkhah]

I have the same problem!