ReferenceError <component>未定义，但在 Laravel 10 和 Livewire 3.0 中运行两次

问题描述 投票：0回答：1

在使用 Laravel 10.20 和 Livewire 3.0.0-beta.10 运行时，我发现 Alpine JS 组件出现奇怪的行为。我有一个 Laravel Blade 组件，其中包含一个 Alpine JS 组件。 

<script>
已被 
push
编辑为我的 
stack
中的 
app.blade.php
。在控制台中，我看到“Uncaught ReferenceError：未定义”。

我创建了一个非常基本的、人为设计的 Blade（不是 Livewire）组件来演示。

刀片组件：

<ul x-data="testApp" x-init='items=@json($items)'>
    <template x-for="(item, index) in items" :key="index">
        <li :idx="index" @click="logItem($event)" x-text="item"></li>
    </template>
</ul>
@once
    @push('scripts')
        <script>
            document.addEventListener('alpine:init', () => {
                Alpine.data('testApp', () => ({
                    items: [],
                    init() {
                        console.log('testApp.init()');
                    },
                    logItem(event) {
                        console.log(event.target.innerText);
                    }
                }));
            });
        </script>
    @endpush
@endonce

Blade 组件的类具有标准的 

render()
方法和最基本的构造函数。

public function __construct(public array $items) {}

使用组件的

blade
：

<x-app-layout>
    <div>
        @php
            $items = ['Item A', 'Item B', 'Item C'];
        @endphp
        <x-test :items="$items" />
    </div>
</x-app-layout>

通往该刀片的路线：

Route::get('/dashboard', function () {
    return view('member-dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');


app.blade.php
：

<html>
    <head>
        ...
        @vite(['resources/css/app.css'])
        @livewireStyles
    </head>
    <body>
        ...
        @stack('scripts')
        @vite(['resources/js/app.js'])
        @livewireScripts
    </body>
</html>

您可以看到，我什至尝试拆分默认的 

@vite
指令，该指令通常会在 
css
中加载 
js
和 
<head>
。我还尝试了所有可能的顺序中的 
@vite
、
@stack
和 
@livewireScripts
。这些都没有任何效果，这本身看起来有点奇怪。

加载页面时，我在控制台中看到以下内容：

  1. console.log()
    内
    testApp.init()
    2. 的输出
  2. 警告：来自 
    livewire.js
    3. 的“Alpine 表达式错误：testApp 未定义”
  3. 错误：“Uncaught ReferenceError：未定义”，来自 
    livewire.js

在页面上，我看到 

<li>
中重复的三个 
<ul>
元素集。也就是说，我最终得到了六个 
<li>
元素：

  • 测试A
  • 测试B
  • 测试C
  • 测试A
  • 测试B
  • 测试C

当我单击某个项目时，我看到它的 

innerText
在控制台中出现两次。因此，显然， 
testApp
对象确实存在，因为它的 
logItem
方法被调用，尽管调用了两次。

这是我开始的一个新项目，而不是升级。相同的组件和方法在使用 Laravel 9 和 Livewire 2.10（使用 Alpine JS 3.10）且没有 Vite 的不同项目中运行良好。

尚不清楚这两个问题（未捕获

ReferenceError
和数据重复）是否是由同一根本问题引起的。我已经阅读了 Liverwire 和 Laravel 升级文档，但看不到任何相关内容来解释为什么这适用于旧版本但不适用于最新版本。另一个潜在的主要区别是我在新项目上使用了 Vite。

我正在使用 VS Code 和 Laragon 在 Windows 11 上进行开发。

更新 2023 年 8 月 23 日 12:06

我注意到复制输出的组件正在使用 

x-for
进行循环。我将测试刀片中的循环更改为使用 
@foreach
并且我不再获得 
<li>
元素的重复。不幸的是，我需要在实际组件中使用
x-for
。不管怎样，我仍然没有捕获到 
ReferenceError
，而且奇怪的是，单击其中一个项目仍然会在控制台中记录两个条目。

laravel-blade vite laravel-livewire alpine.js
1个回答
0
投票

事实证明，这些问题（以及使用 Alpine JS x-show 折叠任何元素时的另一个 JavaScript 错误）是由我的 

app.js
文件中的错误引起的。我有：

import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();

Livewire 3 不需要这些，它捆绑了 Alpine JS。

我已经把它全部删除了，所有的错误和重复的元素都已经停止了。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.