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

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 â/â.

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'])")
);

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;

// 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

Use NPM Package in Filament Page

window

window

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

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'])")
);

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;

// 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

Use NPM Package in Filament Page

Use NPM Package in Filament Page

Similar Threads

Similar Threads

Similar Threads