building Inertia/Vue/TS app with Vite for production

Hello everyone:

I have a Laravel 10 application with Inertia/Vue3 typescript. everything is working fine. only when I run build command:

npm run build

the command is running all fine without issues. but the Inertia component rendered from home route always missing. meaning when I go to: http//localhost/en I get this error even though the file exists on the directory but it's not added to generated manifest file:

Unable to locate file in Vite manifest: resources/js/Pages/Index.vue.

the weird thing is when I navigate to another route like http//localhost/en/reviews page works fine and when I navigate back from that page to home it works fine.

here is my vite.config.js


import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.ts',
            refresh: true
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ]
});

here is my my app.ts file:

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

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

// @ts-ignore
import VueTelInput from 'vue-tel-input';
import 'vue-tel-input/vue-tel-input.css';
import Toast from "vue-toastification";
import "vue-toastification/dist/index.css";

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

// @ts-ignore
const appTemplate: string = window!.TENANT_SELECTED_LAYOUT || '';

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(plugin)
            .use(ZiggyVue, Ziggy)
            .use(VueTelInput)
            .use(Toast)
            .mount(el);
    },
    progress: {
        color: '#4B5563',
    },
}).then(r => {});

versions

"inertiajs/inertia-laravel": "^0.6.8",
"laravel/framework": "^10.10",

 "@inertiajs/vue3": "^1.0.0",
 "@tailwindcss/forms": "^0.5.3",
 "@types/ziggy-js": "^1.3.2",
 "@vitejs/plugin-vue": "^4.0.0",
 "autoprefixer": "^10.4.12",
 "axios": "^1.1.2",
 "laravel-vite-plugin": "^0.7.5",
 "postcss": "^8.4.18",
 "tailwindcss": "^3.2.1",
 "typescript": "^5.0.2",
 "vite": "^4.0.0",
 "vue": "^3.2.41",
 "vue-tsc": "^1.2.0"

LaryAI

2 years ago

Level 58

The issue you're facing is that the Inertia component rendered from the home route is missing when you run the build command. This error occurs because the file is not added to the generated manifest file.

To fix this issue, you can try the following steps:

Update your vite.config.js file to include the manifest option:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.ts',
            refresh: true
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    build: {
        manifest: true,
    },
});

Run the build command again:

npm run build

This should add the missing Inertia component to the generated manifest file.

If the issue persists, you can try the following additional steps:

Update your app.ts file to import the missing Inertia component explicitly:

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

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

// Import the missing Inertia component explicitly
import Index from './Pages/Index.vue';

// ...

createInertiaApp({
    // ...
    resolve: (name) => {
        if (name === 'Index') {
            return Index;
        }
        return resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob<DefineComponent>('./Pages/**/*.vue'));
    },
    // ...
}).then(r => {});

By explicitly importing the missing Inertia component, you ensure that it is included in the build.

Run the build command again:

npm run build

This should resolve the issue and include the missing Inertia component in the generated manifest file.

If the issue still persists, you may need to further investigate your project setup and configuration to identify any other potential causes.

Please or to participate in this conversation.