Error when using vite: reading gif leads to error in get-pixels

[ultrafro]

Receiving error while using vite with React + Typescript, gif-frames version: ^1.0.1

seeing

when running:

The loading works fine using CRA / web-pack. Hoping for any tips or thoughts! Cool library! Thanks!

[benwiley4000]

Sorry I completely misread the name of the repository I linked. That's vfile not vite lol...

But anyway, seems like it might be an esbuild issue. The solution I suggested could work.

If these errors start showing up before any of your app code has had a chance to run, it won't work to just monkeypatch. Instead you might need to dig deeper.

Another solution could be to make esbuild externalize the path module so rollup supplies its own implementation later. I don't know if this is easy to do with Vite. If you want to go this route, you'll want to ask the Vite devs for help.

Another possible way out of your problem is to use this esbuild polyfill package (seems to be in progress): https://github.com/remorses/esbuild-plugins

Good luck! Let me know what works for you.

Le mar. 5 avr. 2022, 11 h 39 p.m., Ben Wiley @.***> a écrit :

I'm not a Vite expert but I know a few things that might help you out. Your problem is that get-pixels relies on a polyfilled version of NodeJS's path module that is available in browserify and webpack 4, maybe even rollup, but maybe not esbuild, which is what Vite uses for pre-bundling third party dependencies. I'm assuming esbuild has some version of it, but it clearly is missing the extname function.

There's a related Vite issue here, looks like it might also be an issue with webpack 5: https://github.com/vfile/vfile/issues/16

I think the easiest solution for you is to polyfill the missing function as soon as possible in your app.

The simplest way (don't know if this works) could be to just install the path module from npm which could fix your issue automatically if Vite prioritizes what's found in the node modules directory: https://www.npmjs.com/package/path

I don't know if Vite will override this with its incomplete implementation. If it does, you might need to do a dirtier patch. You'll need to install the npm package with an aliased name and then something like:

import path from 'path';
import otherPath from 'my-path-alias-name';
path.extname = otherPath.extname;

As I said I don't know if this will be necessary. Just installing the npm package might be enough.

Le mar. 5 avr. 2022, 10 h 05 p.m., ultrafro @.***> a écrit :

Receiving error while using vite with React + Typescript, gif-frames version: ^1.0.1

seeing [image: image] https://user-images.githubusercontent.com/3029964/161880955-e0f18f1a-e213-44b3-99e5-a99df14384ae.png

when running: [image: image] https://user-images.githubusercontent.com/3029964/161881174-62e93c6d-3fc8-4e21-b681-19c7a75be749.png

The loading works fine using CRA / web-pack. Hoping for any tips or thoughts! Cool library! Thanks!

— Reply to this email directly, view it on GitHub https://github.com/benwiley4000/gif-frames/issues/37, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADHOD3OTEIAKCX5ZY3EMB7LVDTWPVANCNFSM5SUQTMPQ . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[ultrafro]

thanks so much for the help! trying it out

[ultrafro]

hey, was able to get this to work by installing path-browserify and changing my vite config to:

  resolve: {
    alias: [{ find: "path", replacement: "path-browserify" }]
    }

as per: https://stackoverflow.com/a/67739063

thanks again for the help and hints!

[benwiley4000]

I'm not a Vite expert but I know a few things that might help you out. Your problem is that get-pixels relies on a polyfilled version of NodeJS's path module that is available in browserify and webpack 4, maybe even rollup, but maybe not esbuild, which is what Vite uses for pre-bundling third party dependencies. I'm assuming esbuild has some version of it, but it clearly is missing the extname function.

There's a related Vite issue here, looks like it might also be an issue with webpack 5: https://github.com/vfile/vfile/issues/16

I think the easiest solution for you is to polyfill the missing function as soon as possible in your app.

The simplest way (don't know if this works) could be to just install the path module from npm which could fix your issue automatically if Vite prioritizes what's found in the node modules directory: https://www.npmjs.com/package/path

I don't know if Vite will override this with its incomplete implementation. If it does, you might need to do a dirtier patch. You'll need to install the npm package with an aliased name and then something like:

import path from 'path';
import otherPath from 'my-path-alias-name';
path.extname = otherPath.extname;

As I said I don't know if this will be necessary. Just installing the npm package might be enough.

Le mar. 5 avr. 2022, 10 h 05 p.m., ultrafro @.***> a écrit :

Receiving error while using vite with React + Typescript, gif-frames version: ^1.0.1

seeing [image: image] https://user-images.githubusercontent.com/3029964/161880955-e0f18f1a-e213-44b3-99e5-a99df14384ae.png

when running: [image: image] https://user-images.githubusercontent.com/3029964/161881174-62e93c6d-3fc8-4e21-b681-19c7a75be749.png

The loading works fine using CRA / web-pack. Hoping for any tips or thoughts! Cool library! Thanks!

— Reply to this email directly, view it on GitHub https://github.com/benwiley4000/gif-frames/issues/37, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADHOD3OTEIAKCX5ZY3EMB7LVDTWPVANCNFSM5SUQTMPQ . You are receiving this because you are subscribed to this thread.Message ID: @.***>