FilamentF
Filament•3w ago
Skyslycer

Use NPM Package in Filament Page

I've been building my application's admin panel with Filament and it's been great. However, for one page I need to do some custom JS stuff and for that I need to pull packages from NPM and use them within a page.

So far I have created a new page and installed the package via NPM. Then I searched the Internet and found no answer, it's always "register an asset" or "make a new theme" without elaborating. I read both pages without success. I tried adding the library to global context via window in the app.js and then using the @vite directive in the blade. After that didn't work, I tried regisitering the JS file as a Filament asset in my AppServiceProvider, and after regenerating the assets, I couldn't use the library.

What's the proper way to do this? I couldn't find anything on how I could make a theme that just added NPM packages.

The frontend error: Uncaught TypeError: The specifier “xlsx” was a bare specifier, but was not remapped to anything. Relative module specifiers must start with “./”, “../” or “/”.

I can always go back to just including the libraries themselves as a file, but if we already have an ecosystem with a package manager, why not use it?

Thank you all in advance!
Solution
Hi, so I've done something similar in my app. This is how I implemented mine

register the asset with FilamentView register hook
use Filament\Support\Facades\FilamentView;
// ...

FilamentView::registerRenderHook(
     PanelsRenderHook::HEAD_END,
     fn (): string => Blade::render("@vite(['resources/css/app.css', 'resources/js/app.js'])")
);


// resource/js/app.js

import JsBarcode from 'jsbarcode';
window.JsBarcode = JsBarcode;


From what you said, you are already doing the exact same thing, so maybe the issue might be from your library?
Jump to solution
Was this page helpful?