FilamentPHP Issues - JS_MD5_NO_BUFFER_FROM Error

[lcamero]

Today I started playing around with NativePHP to get a basic app working locally and my plan was to use Livewire and FilamentPHP to speed up the creation of forms and actions for the most part.

It all worked pretty well initially. I created a couple of pages with some form components and actions worked fine until I started using Filament group actions, which get rendered in these little pop ups

For some reason the pop up would be always open, and if you click the 3 dots you get a JS error in the console

The 2 important items are the first error complaining about Cannot read properties of undefined (reading 'from') and then the errors with the Alpine toggle method (which only happen when running from NativePHP, not the regular browser)

So I went ahead and tried to find the reason for the first error, as it came up just after installing the FilamentPHP Forms and Actions packages and including the @filamentScripts in my layout file

Long story short, I came across this article (it is not even in english, so I had to use Chrome's translation features) of someone who encountered the exact same issue. I guess not a lot of people have tried using FilamentPHP with NativePHP (?)
Link to article

It all seems to come from Filament's usage of js-md5 and its build process for web browsers. It seems that when it's run from NativePHP it is detecting it as NodeJS, most likely because it is running in Electron and somewhere in the build process the platform is recognized that way.

The person goes on in great length into what he did to solve it so feel free to read it but essentially the way to get rid of the error is to clone Filament's github project. compile the support.js file and replace it in your project with a modification around here to disable the NodeJS check (see commented lines)

Now, that is not a solution by any means but it does get the app working as expected. It looks like that portion of the code is used in the unsaved-data-changes-alert.blade.php component in the Panels package of Filament so I guess as long as you don't make use of it, it won't affect you. In my case I'm pulling only Actions and Forms so it works for now

In the end I'm not sure if there's anything that can be done on NativePHP side, I'm not too familiar with Electron's build process and how it could be modified so if anyone has any input on how this can be addressed it would be great.

For now I hope this thread helps anyone trying to use Filament here save some time debugging 👍

[simonhamp]

Very interesting! Great discovery and thanks for sharing this 🙏🏼

I don't think we can do much about it within NativePHP and I don't think the Filament team can do much about it either, unless they found an alternative way to do what they're using this library for.

It's could be that Electron is kinda 'behaving like Node' (there is a ELECTRON_RUN_AS_NODE environment variable). We don't set this explicitly anywhere in NativePHP (afaik), so maybe the default is true-thy?

Might be worth having a play around with that, e.g. by running ELECTRON_RUN_AS_NODE=0 php artisan native:serve. If it's this, maybe we can do something about it by setting a sensible default option when running Electron builds.

Or it could just be a bit of 'faulty' logic in that particular JS library that doesn't account for Electron being a weird sort-of browser. In this case, the best path would be to raise an issue with that package's maintainer directly.

In any case, if you're able to put together a demo repo that can easily show the problem, that would be super helpful!

[simonhamp]

Looks like ELECTRON_RUN_AS_NODE=0 doesn't fix this 😞

[simonhamp]

This is being tracked on the Filament side via this discussion.

As I said before, I don't think we can do much about it within NativePHP, besides some hacky patch - I'd be ok with that, but it's not the most elegant solution.

Hopefully the Filament team can do something on their end instead.

[lcamero]

Thank you Simon! Looking forward to seeing this working.

I haven't gotten back to my project to review it further but will see if there's anything I can help with 👍

[simonhamp]

The solution appears to be to add window.JS_MD5_NO_NODE_JS = true somewhere in your template before the Filament scripts get loaded.

[olavocneto]

Thanks!

I called FilamentView::registerRenderHook() on the AppServiceProvider

        FilamentView::registerRenderHook(
            PanelsRenderHook::SCRIPTS_BEFORE,
            fn (): string => Blade::render('<script>window.JS_MD5_NO_NODE_JS = true;</script>'),
        );

[simonhamp]

Very nice!