I cant make TributeJs working with vite!

@Sinnbeck Here you have it.

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/sass/app.scss', 'resources/js/app.js'],
            refresh: true,
            valetTls: 'staff-collab.test',
        }),
    ],
})

Again, now it mainly complains that Tribute is not defined. not mentioning anyhting about the window but it still doesnt work.

@Dave Wize that looks default. Weird that you got that error in the first place? How are you calling tribune? In code or the browser console? And you said alpinejs throws an error, yet you don't seem to be using that at all?

@Sinnbeck Here is the code, I'm trying to implement.

 <form
        x-data="{
           init() {
            let tribute = new Tribute({
                trigger: '@',
                values: [
                    { key: 'Phil Heartman', value: 'pheartman' },
                    { key: 'Gordon Ramsey', value: 'gramsey' },
                ]
                });
                tribute.attach($refs.textarea);
            }
        }"
        wire:ignore
        wire:submit.prevent="addMessage" class="py-3 px-5 w-full bg-white flex items-center gap-x-3 sticky bottom-0">
            <label for="sendmsg" class="w-full relative">
            <textarea x-ref="textarea" wire:model.defer="message" class="p-3 pr-48 border border-[#EBEFF2] font-poppins text-[15px] placeholder:text-[#AFB3B8] w-full rounded-lg focus:outline-[#2780A8]" placeholder="Post goes here..."></textarea>

                <!-- icons -->

                <div class="absolute top-3 right-5 flex items-center gap-x-3">
                    <button>
                        <img src="/img/chat/emoji.svg" alt="emoji" />
                    </button>
                    <input id="file" type="file" class="hidden" />
                    <label for="file">
                        <img src="/img/chat/attach.svg" alt="attach" />
                    </label>
                    <button>
                        <img src="/img/chat/text.svg" alt="text" />
                    </button>
                </div>
            </label>
            <button type="submit" class="text-white text-[15px] font-poppins py-3 px-5 rounded-lg bg-[#2780A8] active:bg-[#359fd0]">Reply</button>
        </form>

@Sinnbeck That first error was because I tried to debug why the tribute was not defined, and I messed up the vite config, so I reverted it to the previous state.

@Dave Wize my guess is that this code is being run before the app.js

let tribute = new Tribute(

Try adding a console.log to each and see which is being run first.

Personally I would move the data set up to a script tag which you have after the app.js. Or a seperate js file

@Sinnbeck That can't be because alpine is also bieng defined in the same app.js so it should not be rendering at all. Here is the full app.js.

import './bootstrap';

import Echo from 'laravel-echo';

import Pusher from 'pusher-js';
window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    wsHost: import.meta.env.VITE_PUSHER_HOST ?? `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
    wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
    wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
});

import Alpine from 'alpinejs'
import collapse from '@alpinejs/collapse'
import persist from '@alpinejs/persist'
import focus from '@alpinejs/focus'
import intersect from '@alpinejs/intersect'
Alpine.plugin(intersect)
Alpine.plugin(persist)
Alpine.plugin(collapse)
Alpine.plugin(focus)
window.Alpine = Alpine
Alpine.start()

import Tribute from 'tributejs';
window.Tribute = Tribute;

@Dave Wize where in html do you call new Alpine? Otherwise test if it works in the browser console (type Tribune)

You could also try moving this to the top of the app.js file to make sure it's read before alpine

import Tribute from 'tributejs';
window.Tribute = Tribute;

@Sinnbeck I'm unsure how alpine works in general, (I'm still learning this nice technology), but I thought that it is bieng new'd up when you do the x-data. In any case I did run tribute = new Tribute in the browser console after full page load and reieved the same error that tribute is not defined.

@Sinnbeck moved up above the alpine imports, without success:(

Actually you seem to be right (as always), moving it up did worked I jsut needed to npm run build for the change to take affect. Thank you @sinnbeck your the best:)

@Dave Wize ah exelent :)