Laravel / Inertia Local setup issue

I've local laravel/Inertia app which works fine with

npm run

However, it fails after running

I've tested it with both valet secure and valet unsecure. Here's the code:

import '../css/app.css';
import './bootstrap';
import VueTheMask from 'vue-the-mask'
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { createApp, h } from 'vue';
import { ZiggyVue } from '../../vendor/tightenco/ziggy';
import { createI18n } from 'vue-i18n';
import en from './locales/en.json';
import fr from './locales/fr.json';
import Store from "@/Store/index.js";
import { formatDate } from '@/Utils/formatDate';

const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

const i18n = createI18n({
    locale: window.Laravel.locale, // set from the backend
    messages: {
        en,
        fr,
    },
});


createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) =>
        resolvePageComponent(
            `./Pages/${name}.vue`,
            import.meta.glob('./Pages/**/*.vue'),
        ),
    setup({ el, App, props, plugin }) {
        const app = createApp({ render: () => h(App, props) });

        app.config.globalProperties.$formatDate = formatDate;

        return app
            .use(plugin)
            .use(i18n)
            .use(ZiggyVue)
            .use(VueTheMask)
            .use(Store)
            .mount(el);

    },
    progress: {
        color: '#4B5563',
    },
});

it works when I login but on dashboard it goes to infinite loop and not showing any error in logs.

Not sure if I am missing any config here or not.

Its simple laravel Valet setup with laravel and inertia vue.

Same thing happening on forge with default server ip access as well as I don't have domain or ssl installed on server.

LaryAI

1 year ago

Level 58

The issue you're experiencing with the infinite loop on the dashboard in your Laravel/Inertia app could be due to several reasons. Here are some steps and checks you can perform to troubleshoot and potentially resolve the issue:

Check for Infinite Loop in Vue Components:
- Ensure that there are no infinite loops in your Vue components. This can happen if you have a watch or computed property that triggers a re-render in a way that causes itself to be re-evaluated continuously.
Inspect Network Requests:
- Use the browser's developer tools to inspect network requests. Look for any requests that are being made repeatedly, which could indicate a problem with how your components are fetching data or handling responses.
Console Errors:
- Check the browser console for any JavaScript errors or warnings that might give you a clue about what's going wrong.
Inertia.js Configuration:
- Ensure that your Inertia.js setup is correct. Double-check the resolvePageComponent function and make sure the paths to your Vue components are correct.
Vue Router or State Management:
- If you're using Vue Router or a state management library like Vuex, ensure that there are no issues with route guards or state mutations that could cause re-renders.
Environment Variables:
- Verify that your environment variables are correctly set up, especially those related to the app's URL and API endpoints.
Check Backend Logic:
- Ensure that the backend logic (controllers, middleware, etc.) is not causing any redirects or responses that could lead to an infinite loop.
Debugging:
- Add some console.log statements in your Vue components and backend code to trace the flow of execution and identify where the loop might be occurring.
Update Dependencies:
- Make sure all your dependencies are up to date. Run npm update and composer update to ensure you have the latest versions of your packages.
Check for Recursive Calls:
- Look for any recursive function calls in your JavaScript code that might be causing the loop.

If none of these steps resolve the issue, consider creating a minimal reproducible example and sharing it on forums or with colleagues to get more specific help.

Please or to participate in this conversation.