Package broken for typescript?

[Andreas-Schoenefeldt]

Hello,

in addition to #10, now with version 2.0.4 (thx for the support!) unfortunately some of the actual files appear to be missing:

What I got after a fresh install of v2.0.4:

in the package.json this missing files is declared as types:

{
  "types": "./dist/LottieWebVuePLugin.d.ts"
}

It might be already enough to add it, but there might be more to it - my IDE in general thinks at the moment the package is not there:

Maybe this SO Issue is a good lead: https://stackoverflow.com/questions/67918575/ts2307-cannot-find-module-or-its-corresponding-type-declarations

Thx for looking into this!
Andreas

[garbit]

I renamed the types file and I haven't updated the config - thanks for finding this. I'll update this asap.

[garbit]

I've just pushed v2.0.6 - can you check this works for you?

Make sure you register lottie-web-vue in the global scope:

main.ts

import { createApp } from "vue";
import App from "./App.vue";
import LottieAnimation from "lottie-web-vue";

const app = createApp(App);

app.use(LottieAnimation);

app.mount("#app");

I've not got the package working through per-component imports. Not sure why this isn't working, investigating this now.

[Andreas-Schoenefeldt]

The module is recognized now, but it still throws a dramatic compilation error on the app.use() part:

 ERROR  Failed to compile with 1 error                                                                                                         5:56:00 PM

This dependency was not found:

* lottie-web-vue in ./src/main.ts

To install it, you can run: npm install --save lottie-web-vue
ERROR in src/main.ts:18:10
TS2345: Argument of type '{ install: (app: App<any>) => void; }' is not assignable to parameter of type 'Plugin_2'.
  Type '{ install: (app: App<any>) => void; }' is not assignable to type '{ install: PluginInstallFunction; }'.
    Types of property 'install' are incompatible.
      Type '(app: App<any>) => void' is not assignable to type 'PluginInstallFunction'.
        Types of parameters 'app' and 'app' are incompatible.
          Type 'import("/node_modules/@vue/runtime-core/dist/runtime-core").App<any>' is not assignable to type 'import("/node_modules/lottie-web-vue/node_modules/@vue/runtime-core/dist/runtime-core").App<any>'.
            The types of 'config.errorHandler' are incompatible between these types.
              Type '((err: unknown, instance: import("/node_modules/@vue/runtime-core/dist/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("/node_modules/@vue/runtime-core/dist/runtime-core").ComponentOptionsBase<a...' is not assignable to type '((err: unknown, instance: import("/node_modules/lottie-web-vue/node_modules/@vue/runtime-core/dist/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("/node_modules/lottie-web-vue/node_modules/@vue...'.

... and so on 

[Andreas-Schoenefeldt]

I would say in your type dist/LottieAnimation.d.ts, it could be changed to

declare const _default: {
    install: PluginInstallFunction
};

The error go away, if I change it like this, but then I'm back to: This dependency was not found: lottie-web-vue in ./src/main.ts

Fingers crossed!

[garbit]

Hey @Andreas-Schoenefeldt thanks for your help so far. I'm having trouble getting that issue to show with my current project settings. Is there any way you could share your code or make an example repo?

I've created a brand new Vue 3 + typescript app using:

npm init vue@latest

With Typescript + Eslint + Prettier I have no issues when adding the plugin to main.ts.

Would you be able to clone the test repo to test or provide a project for me to take a look at?

I'm using Vite + rollup-plugin-typescript2 to automatically produce typings for my components so either I'm running into a config issue or theres a bug with the Rollup library.

[garbit]

Follow up question - what version of Vue are you using?

[Andreas-Schoenefeldt]

Hi @garbit, I have to thank for you swift replies!

We are running on "vue": "^3.2.27", (actual version used is still 3.2.27), but I'll try to see tomorrow, if there is an upgrade. If I still get the error, I provide our code as a public repo. It's probably some real strange issue, which hopefully has no other chance then to go away now ;).

Many thx again!

[Andreas-Schoenefeldt]

Hi @garbit, so if I upgrade to "vue": "^3.2.31", the lottie error is gone, but my other dependencies (like vue-router...) are then going crazy ;)

I'll try to work this out individually with the other packages, I can not test it jet but it looks like this is actually the fix.

Thx again!
Andreas

[Andreas-Schoenefeldt]

How interesting... It looks like it is connected to yarn and yarn workspaces which we are using... I keep you posted.

[Andreas-Schoenefeldt]

brr, I changed vue now in all yarn workspaces to "vue": "^3.2.29", and I'm back now to

This dependency was not found:

* lottie-web-vue in ./src/main.ts

To install it, you can run: npm install --save lottie-web-vue

I'll try stack overflow for that one.

[garbit]

Lot's to think about there! Thank you for taking a look.

I've had issues previously with forgetting to disable Vetur plugin whilst in a Vite project in VSCode.

Is it possible to have a skeleton project that I can run to test against?

[Andreas-Schoenefeldt]

Let me create a simple one for reproduction 👍

[garbit]

@Andreas-Schoenefeldt I think the latest pull request from @reslear might provide you with the typing you'll need:

lottie-web-vue/README.md

Lines 71 to 81 in af26c11

	for [volar Type-Checking](https://github.com/johnsoncodehk/volar/tree/master/extensions/vscode-vue-language-features#usage) need add:
	```ts
	// components.d.ts
	declare module '@vue/runtime-core' {
	export interface GlobalComponents {
	LottieAnimation: typeof import('lottie-web-vue')['LottieAnimation']
	}
	}
	export {}

Can you take a look and see if this resolves your issue?

[Andreas-Schoenefeldt]

Hi @garbit, unfortunately not - the fix appears to be only pointing to solving some VSCode issues - in my context @vue/runtime-core is already declared by vue and if we redeclre it, I get a whole bunch of other issues. Still working on the test repo, last week was crazy for me.

Thx for your support!

[Andreas-Schoenefeldt]

Hi @garbit, I amanged now :) It's a simple and pretty much stripped down repo, which has the basic features of our setup and also 1:1 the error I'm experiencing: https://github.com/Andreas-Schoenefeldt/lottie-web-vue-yarn-ts/

I invited you as editor as well, please feel free to change whatever you want to.

Thx again, I tried to fiddle with the d.ts file also a bit meanwhile, but are kind of over my head here - meaning I was not able to make it work.

Thx again
Andreas

[garbit]

Thanks @Andreas-Schoenefeldt - I'll clone and take a look to see if I can resolve this issue.

[Andreas-Schoenefeldt]

Hi @garbit, we switched now to play mp4, but in case you still find a possibility in the next days, I could still switch back. Otherwise it's probably ok to close this one till the next one runs into a weirdness like this ;)

[oneWaveAdrian]

@garbit @Andreas-Schoenefeldt did you ever find a solution for this? Have a client project who are using similar old vue version and run into that same issue...?

[Andreas-Schoenefeldt]

Hi @oneWaveAdrian, unfortunatley not - we had to revert the animations to mp4 video files to get it running.

[reslear]

we can use another our package https://github.com/megasanjay/vue3-lottie

[oneWaveAdrian]

@reslear I found that yesterday as well and it works - thanks though! @Andreas-Schoenefeldt bummer, I encourage you to try that other package - keeps traffic & thus data cost down ;)

[reslear]

@oneWaveAdrian i'm add for beta support .lottie files, and we have a fetch data size 500kb->50kb

megasanjay/vue3-lottie#249 (comment)

[garbit]

This has been resolved with the new v2.0.7 release:

https://github.com/garbit/lottie-web-vue/releases/tag/v2.0.7