Blank page in IPhone device

mahouha commented 2 years ago

Versions:

@inertiajs/inertia version: 0.11.0
@inertiajs/inertia-vue3 version: 0.6.0

Describe the problem:

I have a laravel 9 app builded with vue3, inertia-laravel , inertiajs and laravel-vite , it works perfetct on PC but when I try to open it in mobile device It show a blank page without any console log.

NB : when I toggle device toolbar to mobile in a navigator it works correctly but in real mobile no ( I tested on different navigators)

I can't fix this issue come from inertiajs\inertia-vue3 or inertiajs/inertia-laravel

Steps to reproduce:

route :

Route::get('/', function() {
        return Inertia::render('WelcomeView');
    });

app.js

import './bootstrap';

import '../css/main.css'

import { createPinia } from 'pinia'
import { useStyleStore } from '@/Stores/style.js'

import { darkModeKey } from '@/config.js'

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'
import { InertiaProgress } from '@inertiajs/progress'
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m'
import Notifications from 'notiwind'
import * as ConfirmDialog from 'vuejs-confirm-dialog'

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel'

const pinia = createPinia()

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(pinia)
            .use(Notifications)
            .use(ConfirmDialog)
            .use(ZiggyVue, Ziggy)
            .mount(el);
    },
});

InertiaProgress.init({ 
        color: '#5136a8',
        showSpinner:true 
    })

const styleStore = useStyleStore(pinia)

/* App style */
//styleStore.setStyle(localStorage[styleKey] ?? 'basic')
styleStore.setStyle()
/* Dark mode */
if ((!localStorage[darkModeKey] && window.matchMedia('(prefers-color-scheme: dark)').matches) || localStorage[darkModeKey] === '1') {
  styleStore.setDarkMode(true)
}

WelcomeVue.vue (under pages folder) :

<template>
<div>
   hellow world
</div>
</template>

and 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 inertia>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->

        <!-- Scripts -->
        @routes
        @vite('resources/js/app.js')
        @inertiaHead
    </head>
    <body class="font-sans antialiased">
        @inertia
    </body>    
</html>

prg-hussam commented 1 year ago

Hello

i face same problem ! is there any solution?

acidiney commented 1 year ago

@mahouha @prg-hussam Hi,

If you are using it in development mode, check the dev-server host, by default it runs in localhost.

Change it to your ip using --encore-args="--host <your-ip>"

eg. npm run dev -- --encore-args="--host 172.16.10.1"

reinink commented 1 year ago

Hey! Thanks so much for your interest in Inertia.js and for sharing this issue/suggestion.

In an attempt to get on top of the issues and pull requests on this project I am going through all the older issues and PRs and closing them, as there's a decent chance that they have since been resolved or are simply not relevant any longer. My hope is that with a "clean slate" me and the other project maintainers will be able to better keep on top of issues and PRs moving forward.

Of course there's a chance that this issue is still relevant, and if that's the case feel free to simply submit a new issue. The only thing I ask is that you please include a super minimal reproduction of the issue as a Git repo. This makes it much easier for us to reproduce things on our end and ultimately fix it.

Really not trying to be dismissive here, I just need to find a way to get this project back into a state that I am able to maintain it. Hope that makes sense! ❤️

inertiajs / inertia