Livewire V3：不断出现未捕获类型错误：Alpine.navigate 不是函数

Question

Livewire V3：不断出现未捕获类型错误：Alpine.navigate 不是函数

pkd*_*kdq 4 laravel laravel-livewire alpine.js

我正在尝试将 Laravel Breeze 转换为使用 Livewire。注册完成后，我尝试将其重定向到仪表板，但它抛出以下错误

livewire.js?id=11c49d7e:6889 Uncaught (in promise) TypeError: Alpine.navigate is not a function

我检查了源代码，可以看到 Alpine 已正确加载，但仍然出现此错误。

我的代码：

布局：app.blade.php

<!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'])
        @livewireStyles
    </head>

    <body class="font-sans antialiased @auth @else text-gray-900 @endauth">
        @auth
            <div class="min-h-screen bg-gray-100">
                @include('layouts.navigation')

                <!-- Page Heading -->
                @if (isset($header))
                    <header class="bg-white 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>
        @else
            <div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100">
                <div>
                    <a href="/">
                        <x-application-logo class="w-20 h-20 fill-current text-gray-500" />
                    </a>
                </div>

                <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
                    {{ $slot }}
                </div>
            </div>
        @endauth

        @livewireScripts
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

路线：web.php

use App\Livewire\Auth\Register;
use App\Livewire\Dashboard;

Route::middleware('guest')->prefix('breeze')->name('breeze.')->group(function () {
    Route::get('register', Register::class)->name('register');
});

Route::get('/dashboard', Dashboard::class)->middleware(['auth', 'verified'])->name('dashboard');

Run Code Online (Sandbox Code Playgroud)

Livewire 注册类：Register.php

<?php

namespace App\Livewire\Auth;

use App\Models\User;
use Livewire\Component;
use Livewire\Attributes\Rule;
use Livewire\Attributes\Layout;
use Illuminate\Support\Facades\Hash;
use Illuminate\Auth\Events\Registered;
use App\Providers\RouteServiceProvider;
use Illuminate\Support\Facades\Session;
use Illuminate\Support\Facades\RateLimiter;
use Illuminate\Validation\ValidationException;

class Register extends Component
{
    #[Rule('required|string')]
    public ?string $name = '';

    #[Rule('required|string|email')]
    public ?string $email = '';

    #[Rule('required|string|same:confirmPassword')]
    public ?string $password = '';

    #[Rule('required|string')]
    public ?string $confirmPassword = '';

    public function submit()
    {
        $this->validate();

        // TODO: Ensure rate limited with custom validation

        $user = User::create([
            'name' => $this->name,
            'email' => $this->email,
            'password' => Hash::make($this->password),
        ]);

        event(new Registered($user));

        auth()->login($user);

        return $this->redirect(RouteServiceProvider::HOME, navigate: true);
    }

    #[Layout('layouts.app')]
    public function render()
    {
        return view('livewire.auth.register');
    }
}

Run Code Online (Sandbox Code Playgroud)

Livewire 仪表板类：Dashboard.php

<?php

namespace App\Livewire;

use Livewire\Attributes\Layout;
use Livewire\Component;

class Dashboard extends Component
{
    #[Layout('layouts.app')]
    public function render()
    {
        return view('livewire.dashboard');
    }
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 7

这个问题是由于使用 Breeze 造成的，因为它也带有自己的 Alpine 安装。

解决这个问题很简单：

打开resources/js/app.js
消除：

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

Run Code Online (Sandbox Code Playgroud)

建立资产 -npm run build

这是两个高山装置发生碰撞的已知问题。

归档时间：	2 年，2 月前
查看次数：	857 次
最近记录：	2 年，2 月前