Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

ImagineY's avatar

Blank screen when rendering Vue compoments with Inertia in production

Hi

I'm using Laravel and Inertia with Vue to build a multi page web application. I use Coolify with nixpacks to deploy my application on a server.

When making a request, the server always returns a response, without any server side error. On the client side, the page correctly renders for a millisecond, before going blank. When I take a look at the HTML, the vue component has been unmounted. When this happens, the following exception is thrown in Vue's runtime-core.esm-bundler.js:

  • TypeError: Cannot read properties of null (reading 'ce') The error throws when mounting the app component in resources/js/app.ts. The property 'ce' cannot be read because currentRenderingInstance is null.

The error happens in runtime-core.esm-bundler.js:

function renderSlot(slots, name, props = {}, fallback, noSlotted) {
  if (currentRenderingInstance.ce || currentRenderingInstance.parent && isAsyncWrapper(currentRenderingInstance.parent) && currentRenderingInstance.parent.ce) {
    if (name !== "default") props.name = name;
    return openBlock(), createBlock(
      Fragment,
      null,
      [createVNode("slot", props, fallback && fallback())],
      64
    );
  }
...

The page I'm trying to render is quite simple too:

<script setup lang="ts">
import {Head} from "@inertiajs/vue3";
import Column from "@/components/utils/Column.vue";
</script>

<template>
    <div>
        <Head title="Log in" />

        <Column>
                hi!
        </Column>
    </div>
</template>

where Column.vue:

<script setup lang="ts">

import {cn} from "@/lib/utils";
import {type Component, type HTMLAttributes} from "vue";
import type {AsTag} from "radix-vue";

const props = withDefaults(
    defineProps<{
      class?: HTMLAttributes['class'],
      as?: AsTag | Component
    }>(),
    {
      as: "div"
    }
);
</script>

<template>
  <component :is="as" :class="cn('flex flex-col justify-center items-start w-full', props.class)">
    <slot />
  </component>
</template>

According to similar issues, the problem could be due to multiple versions of Vue running at the same time, but I have not been able to confirm that hypothesis. I have tried resolving and deduping vue in vite.config.js, but with no success. I'm unable to reproduce this issue in my local environment, even when I set NODE_ENV and APP_ENV to production. The issue only happens on my production server.

Does anyone have any insight on this issue? Or perhaps an idea on how to debug this?

package.json

vite.config.js

resources/js/app.ts

import './bootstrap';
import '../css/app.css';

import {createApp, DefineComponent, h} from 'vue';
import {createInertiaApp} from '@inertiajs/vue3';
import {resolvePageComponent} from 'laravel-vite-plugin/inertia-helpers';
import {ZiggyVue} from '../../vendor/tightenco/ziggy';

import.meta.glob('../images/**');
const appName = import.meta.env.VITE_APP_NAME || 'ImagineY';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./pages/${name}.vue`, import.meta.glob<DefineComponent>('./pages/**/*.vue')),

    setup({el, App, props, plugin}) {
        createApp({
            render: () => h(App, props),
        })
            .use(ZiggyVue)
            .use(plugin)
            .mount(el);
    },
    progress: {
        color: '#4B5563'
    },
}).catch(error => console.error(error));

resources/views/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">
    <title inertia>{{ config('app.name', 'ImagineY') }}</title>

    <!-- Scripts -->

    @routes
    @vite(['resources/js/app.ts'])
    @inertiaHead
</head>
<body class="font-sans antialiased @if (session('dark-mode')) dark @endif">
@inertia
</body>
</html>
1 like
0 replies

Please or to participate in this conversation.