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.