@script - Using $this when not in object context

Hey guys. I'm getting error Using $this when not in object context when i've got @script directives. When I delete them, error is gone but in console: 'Alpine is not defined`.
Why do I get error about $this.?
Important: the error goes away completely when I put the whole page code in a separate full-page Volt component. Don't get connection with livewire also :( let me know if you need to see any other parts of code

@script
<script>
	Alpine.data('diariesIndex', () => ({
		stepsModalOpen: false,
		weightModalOpen: false,
		toastText: '',
		showToast: false,
	}))
</script>
</div>
@endscript

LaryAI

1 year ago

Best Answer

Level 58

The error message "Using $this when not in object context" typically occurs in PHP when you try to use $this outside of a class method. However, in the context of Blade templates and Livewire, this error might be related to how the Blade directives are being processed.

The @script directive is not a standard Blade directive, so it might be part of a custom setup or package. If you're using Livewire and Alpine.js together, you don't necessarily need a custom @script directive to include Alpine.js scripts. You can directly include your Alpine.js code within a <script> tag in your Blade template.

Here's a possible solution to your problem:

Remove the @script directive: Since it's causing issues, you can directly include your script without it.
Ensure Alpine.js is loaded: Make sure that Alpine.js is included in your project, either via a CDN or by installing it through npm/yarn.
Directly include the script: Place your Alpine.js component script directly in the Blade template.

Here's how you can modify your code:

<div>
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('diariesIndex', () => ({
                stepsModalOpen: false,
                weightModalOpen: false,
                toastText: '',
                showToast: false,
            }));
        });
    </script>
</div>

Additional Tips:

Check for Alpine.js: Ensure that Alpine.js is correctly included in your project. You can add it via a CDN in your Blade template:
```
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js" defer></script>
```
Livewire and Alpine.js: If you're using Livewire, make sure that Livewire's scripts are included before Alpine.js in your layout file.
Custom Directives: If @script is a custom directive, check its implementation to ensure it doesn't interfere with the Blade rendering process.

By following these steps, you should be able to resolve the error and ensure that Alpine.js is properly initialized in your application.

Snapey

1 year ago

Level 122

livewire will install the scripts on every page that has a livewire component. If there is no component then you need to add livewire scripts manually (this will install Alpine).

If your site is a mixture of livewire and non-livewire pages, you should manually include livewireScripts and livewireStyles and then in the livewire config, turn off auto installation of scripts.

Reading: https://livewire.laravel.com/docs/installation#manually-including-livewires-frontend-assets

1 like

PttRulez

1 year ago

Level 21

@Snapey is it a bad approach to make all pages full-paged livewire components? As for mixture you mentioned - in my case some pages are just not full-paged livewire components. But they use livewire components inside. So @script directive didn't work in my case because it was not inside livewire-component (full-page). After I removed it, i solved Alpine is not defined by using this approach:

document.addEventListener('alpine:init', () => {
        Alpine.data('diariesIndex', () => ({
            stepsModalOpen: false,
            weightModalOpen: false,
            toastText: '',
            showToast: false,
        }));
    });

But i still have questions :)

If i put @livewireScripts inside only ONE of components - does it mean livewire will detect it somehow and will switch off automatic insertion of it's scripts (which include alpine as i understand) and from that moment i will be obliged to put that directive on every page i need livewire and alpine work? If not, then you meant that pages wihtout livewire components at all will need @livewireScripts so that Alpine started working, right? When using livewire we don't initialize Alpine inside app.js as we do when using just Alpine?
In my case the page has livewire component in it. Actually every page has it since in my app layout I have livewire:navigation component. So livewirescripts are inserted automatically, right? Why would i get error about Alpined not defined? As we can see Alpine actually exists, I just needed to wait until it's initialized. Looks like in default situation when we use @script directive livewire will wait for livewire.init event and then execute script inside

razorext2

1 year ago

Level 1

@Snapey i have try to include livewireScripts and livewireStyles manually on my non-livewire pages, and the error still persist. why?

i just try this code to my pages

<div>
    <button wire:click="$js.increment">+</button>
</div>

@script
<script>
    $js('increment', () => {
        console.log('increment')
    })
</script>
@endscript

Snapey

1 year ago

Level 122

@razorext2 you cannot use wire: outside of a livewire component

Please or to participate in this conversation.