Laravel 10 - JS Not Working

[CyberPunkCodes]

I have a fairly recent and basic install of Laravel 10. Vite is running, I have AlpinJS 3, and I tried to follow the docs the best I could.

My table loads, but it's like there is no javascript. Pagination doesn't work, neither does the search or column sorting. Nothing.

app/Http/Livewire/EmailTable.php

<?php

namespace App\Http\Livewire;

use App\Models\Email;
use Rappasoft\LaravelLivewireTables\DataTableComponent;
use Rappasoft\LaravelLivewireTables\Views\Column;
use Rappasoft\LaravelLivewireTables\Views\Columns\BooleanColumn;

class EmailTable extends DataTableComponent
{
    protected $model = Email::class;

    public function configure(): void
    {
        $this->setPrimaryKey('id');
    }

    public function columns(): array
    {
        return [
            Column::make("ID", "id")
                ->sortable(),
            Column::make("WP ID", "wp_user_id")
                ->sortable(),
            Column::make("Email", "email")
                ->searchable()
                ->sortable(),
            Column::make("Domain", "domain")
                ->sortable(),
            BooleanColumn::make("PHP Precheck", "is_php_precheck_valid")
                ->sortable(),
            BooleanColumn::make("RFC Valid", "is_rfc_valid")
                ->sortable(),
            BooleanColumn::make("DNS Valid", "is_dns_valid")
                ->sortable(),
            BooleanColumn::make("Spoofcheck", "is_spoofcheck_valid")
                ->sortable(),
            BooleanColumn::make("Disposable", "is_disposable")
                ->sortable(),
            BooleanColumn::make("Catchall", "is_catchall")
                ->sortable(),
            BooleanColumn::make("SMTP Check", "is_smtp_check_valid")
                ->sortable(),
            Column::make("Created at", "created_at")
                ->sortable(),
            Column::make("Updated at", "updated_at")
                ->sortable(),
        ];
    }
}

resources/views/emails/index.blade.php

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
            Emails
        </h2>
    </x-slot>

    <div class="py-12">

        <livewire:email-table />

    </div>
</x-app-layout>

app/Models/Email.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Email extends Model
{
    use HasFactory;
}

There are no errors reported anywhere (laravel log file or debug console).

Thank you in advance :)

[lrljoe]

Shouldn't be too tricky to fix, few questions so that I can figure out what's going on :)

1. Can you share the App Layout HTML if possible please? (should be in resources/views/layouts/app.blade.php
2. Are you using a local Alpine3 or the CDN? Can you confirm the exact version?
3. I'm assuming you're using Tailwind - can you confirm the version, and share your tailwind.config.js please
4. Can you share your vite.config.js
5. Can you confirm your Vite version?

If it's available online, then feel free to drop a link and I'll take a look

[CyberPunkCodes]

Thank you @lrljoe for taking the time to help.

This is a quick throw together side dev thing. I have to validate a bunch of emails from our main system, so I created a fresh Laravel 10 setup with Breeze. I have been coding for a long time, just haven't messed with L10 much yet, or Livewire, or Vite.. So it must be something simple because I didn't change much to break it. I forgot Alpine was included with Laravel, and I initially tried the CDN and it didn't work, noticed it was in the npm package file, so removed the CDN reference..

Vite was running with npm run dev.. I tried to build it.. alpinejs is in the node_modules directory.. original vite include is in my layout with the intialization methods in the resources js file.. It's clear the Livewire model is found because my table loads fine on the page, it's just the javascript is dead. Well, just this packages js isn't working because the standard user dropdown on the top right (Laravel + Breeze) works and it uses Alpine.

Version numbers below obtained from my package lock.

1. Layout

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
    <body class="font-sans antialiased">
        <div class="min-h-screen bg-gray-100 dark:bg-gray-900">
            @include('layouts.navigation')

            <!-- Page Heading -->
            @if (isset($header))
                <header class="bg-white dark:bg-gray-800 shadow">
                    <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
                        {{ $header }}
                    </div>
                </header>
            @endif

            <!-- Page Content -->
            <main>
                {{ $slot }}
            </main>
        </div>
    </body>
</html>

The view file is the email blade in my OP.

2. I am using the included Alpine with Laravel (or Breeze? however it got there) via NPM. It is version 3.12.0.

3. Tailwind version: 3.2.7

Tailwind Config (untouched):

const defaultTheme = require('tailwindcss/defaultTheme');

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [require('@tailwindcss/forms')],
};

4. Vite Config (untouched):

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

5. Vite version: 4.2.1

---

Additionally, here is my resources/js/app.js (untouched):

import './bootstrap';

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

Thanks again.

[lrljoe]

Okay, so there's a couple of things in here that aren't related to the package itself, but will stop you from progressing at all in terms of livewire:

Vite is different to the classic WebPack, so there's a few caveats:

Your app.js should reference your app.css when using Vite (I know, weird!)
You should also include the focus plugin for best results, you can "npm i @alpinejs/focus".

app.js

Include your CSS via the app.js

import './bootstrap';
import Alpine from 'alpinejs';
import focus from '@alpinejs/focus';
import '../css/app.css';

window.Alpine = Alpine;
window.Alpine.plugin(focus);
window.Alpine.start();

vite.config.js

Now you need to remove the reference to app.css from your vite config, as it is loaded via JS

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

tailwind.config.js

You are missing:

1. The rappasoft includes for content (remember to add this for any package that has views)
2. The toggle to set theme to be by class (otherwise it'll default to Dark at all times)
3. I've added in what I use as a "default" for "variants" as it contains the useful items

const defaultTheme = require('tailwindcss/defaultTheme');

/** @type {import('tailwindcss').Config} */
module.exports = {
    plugins: [require('@tailwindcss/forms')],
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/rappasoft/laravel-livewire-tables/resources/views/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],
   darkMode: 'class',
    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },
    variants: {
        extend: {
            backgroundColor: ['responsive', 'dark', 'checked', 'disabled', 'hover', 'focus', 'active', 'even', 'odd'],
            opacity: ['dark'],
            overflow: ['hover'],
        },
    },
};

Remember to run your vite build/production after doing the above!!

Layout

Finally, tweak your Layout, I've done the following:

1. Remove reference to app.css within the vite() tag, as this is included via the JS
2. Include the standard Livewire scripts & styles (see @livewireStyles and @livewireScripts

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

        <!-- Scripts -->
        @vite('resources/js/app.js')

        <!-- Livewire Styles -->
        @livewireStyles
    </head>
    <body class="font-sans antialiased">
        <div class="min-h-screen bg-gray-100 dark:bg-gray-900">
            @include('layouts.navigation')

            <!-- Page Heading -->
            @if (isset($header))
                <header class="bg-white dark:bg-gray-800 shadow">
                    <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
                        {{ $header }}
                    </div>
                </header>
            @endif

            <!-- Page Content -->
            <main>
                {{ $slot }}
            </main>
        </div>

        <!-- Livewire Scripts -->
        @livewireScripts
    </body>
</html>