Blank page in IPhone device

mahouha commented 2 years ago

Versions:

inertiajs/inertia-laravel version: 0.6.3
@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>

ggsuha commented 2 years ago

I have a project and tried open it from my Android device, got blank page too.

crnkovic commented 1 year ago

I experience this when I develop locally and then try to preview with valet share. I think this is more due to Vite trying to load assets over HTTP, but Ngrok runs your environment on HTTPS, so your assets are never loaded.

The way I solve this when I need it, is I fully build the assets (npm run build), secure the local with valet secure, and force HTTPS in a service provider $this->app['url']->forceScheme('https');. It runs fine, though I should invest more time into resolving this without this workaround.

Also, maybe this will help: https://freek.dev/2276-making-vite-and-valet-play-nice-together

@mahouha remember to close the issue if this has been resolved.

jessarcher commented 1 year ago

Hi there,

Thanks for reporting the problem you are encountering, but it looks like this is a question that may be better suited for a support channel. We only use this issue tracker for reporting bugs with the library itself. If you have a question on how to use the functionality provided by this repository, you can try one of the following channels:

However, this issue will not be locked, and everyone is free to discuss solutions to your problem!

inertiajs / inertia-laravel