Uncaught ReferenceError: dateRangeComponent is not defined

[hjJunior]

Hey 👋, first, thanks for the library/plugin!

---

I'm trying to install it, and I'm getting the dateRangeComponent is not defined on browser console

Versions:

• malzariey/filament-daterangepicker-filter: 2.2.3
• laravel/framework: v10.22.0:
• filament/filament: v3.0.46

Usage

• Create Resource
• Attached a relation manager
• Inside relation manager I'm using the DateRangeFilter

Current behavior

It renders the component on filter space, but the component is not clickable, and prints on browser console a error

Logs

``` livewire.js?id=51f84ddf:1252 Alpine Expression Error: dateRangeComponent is not defined Expression: "dateRangeComponent({ state: window.Livewire.find('aMlvhewpJjEW1S9o9oKW').entangle('tableFilters.created_at.created_at'), name: '652c91bdb5851', alwaysShowCalendars: true, autoApply: 'false', linkedCalendars: 'true', autoUpdateInput: false, startDate: null, endDate: null, maxDate: null, minDate: null, timePicker: 'false', timePickerIncrement: 30, displayFormat: 'DD\/MM\/YYYY', applyLabel: 'Apply', cancelLabel: 'Cancel', fromLabel: 'From', toLabel: 'To', customRangeLabel: 'Custom', january: 'January', february: 'February', march: 'March', april: 'April', may: 'May', june: 'June', july: 'July', august: 'August', september: 'September', october: 'October', november: 'November', december: 'December', sunday: 'Su', monday: 'Mo', tuesday: 'Tu', wednesday: 'We', thursday: 'Th', friday: 'Fr', saturday: 'Sa', firstDay: 1, ranges: JSON.parse('{\u0022Today\u0022:[\u00222023-10-16\u0022,\u00222023-10-16\u0022],\u0022Yesterday\u0022:[\u00222023-10-15\u0022,\u00222023-10-15\u0022],\u0022Last 7 Days\u0022:[\u00222023-10-10\u0022,\u00222023-10-16\u0022],\u0022Last 30 Days\u0022:[\u00222023-09-17\u0022,\u00222023-10-16\u0022],\u0022This Month\u0022:[\u00222023-10-01\u0022,\u00222023-10-31\u0022],\u0022Last Month\u0022:[\u00222023-09-01\u0022,\u00222023-09-30\u0022],\u0022This Year\u0022:[\u00222023-01-01\u0022,\u00222023-12-31\u0022],\u0022Last Year\u0022:[\u00222022-01-01\u0022,\u00222022-12-31\u0022]}'), handleValueChangeUsing: (value, name) => { if (name == '652c91bdb5851') { window.Livewire.find('aMlvhewpJjEW1S9o9oKW').set('tableFilters.created_at.created_at', value); } }, })"

{ if (name == '652c91bdb5851')​ { window.Livewire.find('aMlvhewpJjEW1S9o9oKW')​.set('tableFilters.created_at.created_at', value)​;​ }​ }​, }​)​" id=​"date-range-picker-652c91bdb5851" wire:key=​"date-range-picker-652c91bdb5851" x-on:keydown.esc=​"isOpen()​ && $event.stopPropagation()​" class=​"filament-forms-date-time-picker-component relative">​…​

​ handleError @ livewire.js?id=51f84ddf:1252 (anonymous) @ livewire.js?id=51f84ddf:1321 Promise.catch (async) (anonymous) @ livewire.js?id=51f84ddf:1321 tryCatch @ livewire.js?id=51f84ddf:1245 evaluate @ livewire.js?id=51f84ddf:1269 (anonymous) @ livewire.js?id=51f84ddf:3465 flushHandlers @ livewire.js?id=51f84ddf:1403 stopDeferring @ livewire.js?id=51f84ddf:1408 deferHandlingDirectives @ livewire.js?id=51f84ddf:1411 initTree @ livewire.js?id=51f84ddf:910 _activate @ async-alpine.js?v=3.0.46.0:1 _componentStrategy @ async-alpine.js?v=3.0.46.0:1 await in _componentStrategy (async) _setupComponent @ async-alpine.js?v=3.0.46.0:1 _mutationEl @ async-alpine.js?v=3.0.46.0:1 MutationObserver.observe.attributes @ async-alpine.js?v=3.0.46.0:1 attributes (async) patchAttributes @ livewire.js?id=51f84ddf:6207 patch @ livewire.js?id=51f84ddf:6169 morph @ livewire.js?id=51f84ddf:6368 morph2 @ livewire.js?id=51f84ddf:6926 (anonymous) @ livewire.js?id=51f84ddf:6997 livewire.js?id=51f84ddf:1256 Uncaught ReferenceError: dateRangeComponent is not defined at eval (eval at safeAsyncFunction (livewire.js?id=51f84ddf:1303:16), :3:16) at livewire.js?id=51f84ddf:1321:23 at tryCatch (livewire.js?id=51f84ddf:1245:14) at evaluate (livewire.js?id=51f84ddf:1269:34) at Function. (livewire.js?id=51f84ddf:3465:17) at flushHandlers (livewire.js?id=51f84ddf:1403:48) at stopDeferring (livewire.js?id=51f84ddf:1408:7) at deferHandlingDirectives (livewire.js?id=51f84ddf:1411:5) at Object.initTree (livewire.js?id=51f84ddf:910:5) at Object._activate (async-alpine.js?v=3.0.46.0:1:2846) ```

Reproduction code

On relation manager:

    public function table(Table $table): Table
    {
        return $table
            ->recordTitleAttribute('description')
            ->columns([
              // ...
            ])
            ->filters([
                DateRangeFilter::make('created_at')->label("Registrado em")
            ]);
    }

[malzariey]

Does it work anywhere else in the project?

[vulct174]

I'm getting the same error, can this problem be resolved?

[malzariey]

I'm getting the same error, can this problem be resolved?

Where are you using the filter?

[vulct174]

@malzariey This is how I use it, the error message is as follows:

[malzariey]

Works as expected,

                Tables\Actions\Action::make('test')->form([
                    DateRangePicker::make('created_at')
                ])

Could you please share a reproduction repository of the issue?

[vulct174]

Works as expected,

                Tables\Actions\Action::make('test')->form([
                    DateRangePicker::make('created_at')
                ])

Could you please share a reproduction repository of the issue?

Sorry, this is a private project so I can't share it, but I see that the assets files are not being created.

[malzariey]

at the assets files are not being created.

I meant create a new project repreducing the issue only.

Note: Are you using a custom page outside Filament Panel?

[vulct174]

at the assets files are not being created.

I meant create a new project repreducing the issue only.

Note: Are you using a custom page outside Filament Panel?

Thanks for your time, I fixed it. I run the command php artisan filament:install and