vue-pdf-embed icon indicating copy to clipboard operation
vue-pdf-embed copied to clipboard

Incompatibility with Vite and @ionic/vue (isFunction is not a function)

Open jopicornell opened this issue 3 years ago • 4 comments

I'm encountering the same problem as this discussion, but I've been able to narrow it down in this reproducible project to an incompatibility between this library, @ionic/vue and vue-router.

Here you can find an explanation of another library having incompatibilities and throwing the same error. As it seems, the problem resides in having multiple versions of Vue, but I don't know why it is the case in this library. Maybe a compilation problem?

If you need anything, just ping me, I'll be happy to help you solve this issue or, at least, find what's exactly wrong.

jopicornell avatar Jul 28 '22 08:07 jopicornell

Hi @jopicornell,

Thank you for providing the Stackblitz project. Now I see the issue and I see that it is not in Vite, but in Vite+Ionic. Also the explanation in the Ionic repo looks relevant, will try to figure it out.

hrynko avatar Jul 29 '22 12:07 hrynko

Hi @hrynko !

Have you found something relevant to fix this issue? I can help you if necessary, but I can't find the real problem. I'll give it another look in case I feel inspired and find it.

jopicornell avatar Sep 01 '22 08:09 jopicornell

Honestly, I'm too busy with other projects right now and haven't had enough time to dive into this issue. But the discussion from the Ionic repo looks very much like this case. The main point there is having 2 instances of Vue because of require('vue') in the bundle. I assume this can be solved by adjusting the Webpack config (see externals).

I would appreciate if you could try to fix this. For testing purposes you can fork the vue-pdf-emded repo and install into your project via Git or clone it and install locally (npm i file:<PROJECT_LOCATION>). Please let me know if you need any help. Thanks!

hrynko avatar Sep 01 '22 09:09 hrynko

Hello,

Thank you for your reply. I've been doing some tests, and I've come to a dead end. In webpack.config.js there's a externals: { vue: 'vue' } , which should be enough. The problem is that vue-loader v16 seems to ignore that and is using require('vue') in the compilated file. I've tried to update vue-loader to v17 for Vue 3, but seems like they have a problem in their compilated code and it throws an error ( Cannot find module 'vue/compiler-sfc'), which no one seems to know how to solve it.

I'm sensing that Vue community/devs is focusing on vite and are abandoning their webpack build tools. I suggest compiling the project with Vite, but that will bring other issues for sure. Let me know if you have any idea on how to face this issue. I can investigate further, but my knowledge of compiling libraries is rather limited.

jopicornell avatar Sep 12 '22 07:09 jopicornell

Hi @jopicornell,

I had another attempt to fix this (based on your suggestions), but no success yet. Migration to Vite might make sense, but support for Vue 2 would then be lost.

Also, I haven't been able to find any successful cases of solving this problem in other libraries, so unfortunately I will have to put this issue on hold for now.

hrynko avatar Feb 09 '23 13:02 hrynko

Resolved in v2.0.0 after switching to Vite

hrynko avatar Jan 20 '24 13:01 hrynko