wire:navigate is not functioning correctly

Where's the issue specifically?Hi , i think the wire:navigate should working direct , but i face issue here when i try to use it the page re-load like the normal behavior

#console 
Installed <script> tag for disabling automatic gain control
livewire.js?id=38dc8241:9315 Uncaught ReferenceError: Alpine is not defined
    at livewire.js?id=38dc8241:9315:30
    at livewire.js?id=38dc8241:10002:3
(anonymous) @ livewire.js?id=38dc8241:9315
(anonymous) @ livewire.js?id=38dc8241:10002Understand this errorAI
disableAutogain.js:47 Uncaught TypeError: Cannot use 'in' operator to search for 'getUserMedia' in undefined
    at patchFunction (disableAutogain.js:47:18)
    at disableAutogain.js:53:5
    at disableAutogain.js:78:3
patchFunction @ disableAutogain.js:47
(anonymous) @ disableAutogain.js:53
(anonymous) @ disableAutogain.js:78Understand this errorAI
content-script.js:104 Failed to get subsystem status for purpose {rejected: true, message: {…}}
main.tsx-loader-Cis86Jaj.js:8 Refused to load the script 'chrome-extension://c1dd0208-e1ea-45b0-be5f-3944d602ecd8/assets/main.tsx-Di2mpyAK.js' because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

(anonymous) @ main.tsx-loader-Cis86Jaj.js:8
(anonymous) @ main.tsx-loader-Cis86Jaj.js:11
(anonymous) @ main.tsx-loader-Cis86Jaj.js:13
Show 3 more frames
Show lessUnderstand this errorAI
TypeError: Failed to fetch dynamically imported module: chrome-extension://c1dd0208-e1ea-45b0-be5f-3944d602ecd8/assets/main.tsx-Di2mpyAK.js

so Alpine is not defined is weird thing to mention here cause i'm sure to use live-wire 3 also my scripts is just query with bootstrap and had data-navigate-once attribute

#head tag
    @livewireStyles
    @livewireScripts(['debug' => true])

and this issue when i set show_progress_bar to false , and if i set it to true the page still load with

Installed <script> tag for disabling automatic gain control
disableAutogain.js:47 Uncaught TypeError: Cannot use 'in' operator to search for 'getUserMedia' in undefined
Failed to get subsystem status for purpose {rejected: true, message: {…}}

and something to mention , this JS errors not related to live-wire and it even visible when i won't use navigation , so i can't where's the issue in specially.

LaryAI

1 year ago

Level 58

The issue you're experiencing with wire:navigate not functioning correctly and the page reloading like normal is likely related to the error message indicating that "Alpine is not defined." Since you're using Livewire 3, which relies on Alpine.js for certain functionalities, it's crucial to ensure that Alpine.js is properly included and initialized in your project.

Here's a step-by-step solution to address the problem:

Include Alpine.js: Make sure that Alpine.js is included in your project. You can add it via a CDN in your HTML file, typically in the <head> section, before your Livewire scripts:

<head>
    <!-- Other head elements -->

    <!-- Include Alpine.js -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js" defer></script>

    <!-- Livewire styles and scripts -->
    @livewireStyles
    @livewireScripts(['debug' => true])
</head>

Check Script Order: Ensure that the order of your scripts is correct. Alpine.js should be loaded before Livewire scripts to avoid any dependency issues.
Debugging Other Errors: The other JavaScript errors you mentioned, such as those related to disableAutogain.js and content security policy, seem unrelated to Livewire and Alpine.js. However, they could still affect the overall behavior of your application. Consider addressing these errors separately by:
- Checking if any browser extensions are causing the CSP errors.
- Ensuring that all scripts are loaded from trusted sources and comply with your CSP settings.
Test with Minimal Setup: If the issue persists, try setting up a minimal Livewire component with wire:navigate to isolate the problem. This can help determine if the issue is with your specific setup or a broader configuration problem.
Consult Livewire Documentation: Double-check the Livewire documentation for any updates or changes related to wire:navigate and ensure your implementation aligns with the latest guidelines.

By following these steps, you should be able to resolve the issue with wire:navigate not functioning as expected. If the problem continues, consider providing more context or code snippets to further diagnose the issue.

MahmoudAdelAli

1 year ago

Level 5

New Update `` "user strict";

document.addEventListener('livewire:navigated', () => {

//--Owl Carousel--
$(".company__wrap").owlCarousel({
	loop: true,

Some Js Code that block loading the page

so now the page is loading at normal way with used to regular links loading without any effect to wire:navigate

MahmoudAdelAli

1 year ago

Best Answer

Level 5

#Solved You need to modify all libraries, including CDN ones, from the regular document load to livewire:navigated, and either remove your pre-load element or add it under the listen event.

$(document).on('livewire:navigated',function ()

1 like

Please or to participate in this conversation.