Uncaught ReferenceError: $wire is not defined

Hello @Sinnbeck, how are you ? ;)

Hmmm ... Yes I tried this.$wire and it doesn't work better.

This code is in the blade view of the Livewire component.

@vincent15000 Doing well. Just decided to help out a bit again :)

Which version are you using. Are you doing any loading of alpine yourself in app.js or in a script tag ?

@Sinnbeck I'm using Livewire v3 and AlpineJS and the Livewire scripts are loaded automatically.

In some pages, I only need AlpineJS without Livewire, if I don't load AlpineJS in the app.js file, it doesn't work.

In some other pages, I need Livewire and in these pages I can use AlpineJS without loading it.

So yes I'm loading AlpineJS, but I have tried without loading it and it doesn't work better.

@vincent15000 Are you able to share the full blade file? I cant really figure it out by what is provided so far :)

Or make a test component with just a single div with x-data and $wire and see if the issue is there also :)

@Sinnbeck

<section
    class="w-full space-y-4"
    x-data="{
        chartsCount: 2,
        activeChart: $wire.entangle('activeChart'),

        toggle(chartToActivate) {
            this.activeChart = chartToActivate;
        },
    }"
>
    <div class="flex justify-center items-center gap-8">
        <template x-for="chartIndex in chartsCount">
            <span x-on:click="toggle(chartIndex)" class="cursor-pointer">
                <i x-show="chartIndex == activeChart" class="fa-solid fa-circle fa-lg"></i>
                <i x-show="chartIndex != activeChart" class="fa-regular fa-circle fa-lg"></i>
            </span>
        </template>
    </div>

    <article
        x-ref="chart"
        x-show="activeChart == 1"
        class="relative w-full bg-white rounded-lg px-3 py-2"
        style="height: {{ $categoriesChartHeight.'px' }}"
    >
        {!! $categoriesChart->container() !!}
    </article>

    <article
        x-show="activeChart == 2"
        class="relative w-full bg-white rounded-lg px-3 py-2"
        style="height: {{ $shopsChartHeight.'px' }}"
    >
        {!! $shopsChart->container() !!}
    </article>

    {!! $categoriesChart->script() !!}
    {!! $shopsChart->script() !!}
</section>

@vincent15000 Really weird. I did some googling and most cases are due to alpine being loaded twice..

@Sinnbeck I get the same error if I have only a single div.

@Sinnbeck I had already removed the AlpineJS, but it didn't work. And now I don't understand why, but effectively I have removed AlplineJSonce again in the app.js file and it works.

So I have a new question : how is it possible to use AlpineJS in standard blade files (without Livewire) and without loading AlpineJS ?

I ask for this because AlpineJS is loaded with Livewire.

Sorry I reformulate : I is it possible to deactivate AlpineJS in a Livewire component, but not outside a Livewire component ?

@vincent15000 I believe this should explain it :)

https://livewire.laravel.com/docs/alpine#manually-bundling-alpine-in-your-javascript-build

@Sinnbeck Oh I read this page, but too fast. I thought it was @livewireScripts and not @livewireScriptConfig.

@vincent15000 No worries :) Hope it works out

@Sinnbeck The documentation just omits to say that it's necessary to set 'inject_assets' => false, in the livewire configuration file.

Yes it works ;).