Registering JavaScript File that imports from moment-timezone package in Laravel 11 project

[danielh-official]

Package

Panel builder

Package Version

v3.2.132

How can we help you?

AppServiceProvider.php

    // ...
    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        FilamentAsset::register([
            Js::make('timezone', base_path('resources/js/timezone.js')),
        ]);
    }
    // ...

timezone.js

import moment from "moment-timezone";

const timezone = moment.tz.guess();

document.cookie = `timezone=${timezone};`;

console.log("Timezone set to: ", timezone);

Expected Behavior

I run php artisan filament:assets.

When I refresh a Filament page, I want it to run the code in timezone.js and store the timezone in the cookies.

What Actually Happens

At timezone.js:1:1, I get the following error: Uncaught SyntaxError: import declarations may only appear at top level of a module in the browser console. The cookie is nowhere to be found. I am using Firefox.

timezone.js is also used by app.js, and when I refresh the default welcome.blade.php page, it runs all the code correctly. So this must mean that the Laravel Blade views have something that the Filament views are missing.

But I don't know what the problem is.

[KevinWinardi]

Hello,
php artisan filament:assets only copies the selected file to the public directory. However, if you use import statement in your JavaScript code, it will not work.

Solution

You need to run the Vite build process first:

npm run build

Use Vite::asset() to get the URL of the compiled asset:

<?php
namespace App\Providers;
use Illuminate\Support\ServiceProvider;
use Filament\Support\Facades\FilamentAsset;
use Illuminate\Support\Facades\Vite;
use Filament\Support\Assets\Js;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
        //
    }

    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
      FilamentAsset::register([
        Js::make('timezone', Vite::asset('resources/js/timezone.js')),
      ]);
    }
}