Jun 19, 2024
0
Level 9
How to sever connections between Laravel Nova and Inertia?
I'm running into some errors in my app (that don't affect the functionality of the app at all, just want to resolve them) where Inertia from my front-end is bleeding into laravel nova in the back-end...
I'm getting the following error in my log file:
Error: Page not found: ./pages/Nova.Login.vue
at resolvePageComponent (bootstrap/ssr/assets/inertia-af3ef812.js:4:11)
at resolve (bootstrap/ssr/ssr.js:3279:656)
at r (node_modules/.pnpm/@[email protected][email protected][email protected]_/node_modules/@inertiajs/vue3/dist/index.esm.js:1:5826)
at j (node_modules/.pnpm/@[email protected][email protected][email protected]_/node_modules/@inertiajs/vue3/dist/index.esm.js:1:5867)
at bootstrap/ssr/ssr.js:3276:13
at /render (node_modules/.pnpm/@[email protected]/node_modules/@inertiajs/core/dist/server.esm.js:1:295)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Server.<anonymous> (node_modules/.pnpm/@[email protected]/node_modules/@inertiajs/core/dist/server.esm.js:1:527)
my app.ts is as follows:
import type {App as VueApp} from 'vue';
import {createSSRApp, h} from 'vue';
import {createInertiaApp} from '@inertiajs/vue3';
import {buildApp, buildStore} from '@js/main';
import {resolvePageComponent} from 'laravel-vite-plugin/inertia-helpers';
import './bootstrap';
import '@css/app.css';
/* VUE INITIALIZATION */
createInertiaApp({
resolve: (name:any):any => {
if (name.startsWith('flighter::')) {
return resolvePageComponent(`../../flighter/resources/js/pages/${name.substring(10)}.vue`, import.meta.glob('../../flighter/resources/js/pages/**/*.vue'));
}
return resolvePageComponent(`./pages/${name}.vue`, import.meta.glob('./pages/**/*.vue'));
},
setup: ({el, App, props, plugin}):void | VueApp => {
const Ziggy = {
...(props.initialPage as any).props.ziggy,
location: () => new URL((props.initialPage as any).props.ziggy.url, (props.initialPage as any).props.config.app.url)
};
buildStore(props, Ziggy);
const app:VueApp = createSSRApp({render: () => h(App, props), page: 'page'}).use(plugin);
buildApp(app)
.mount(el);
},
progress: {color: '#4fb4d3'}
}).then().catch(error => {
console.error('An error occurred:', error.message, error.stack);
});
and my ssr.ts is as follows:
import {createSSRApp, h} from 'vue';
import type {App as VueApp, DefineComponent} from 'vue';
import {createInertiaApp} from '@inertiajs/vue3';
import createServer from '@inertiajs/vue3/server';
import {buildApp, buildStore} from '@js/main';
import {renderToString} from '@vue/server-renderer';
import {resolvePageComponent} from 'laravel-vite-plugin/inertia-helpers';
/* VUE INITIALIZATION */
createServer((page) =>
createInertiaApp({
page,
render: renderToString,
resolve: (name:any):Promise<DefineComponent> => name.startsWith('flighter::') ?
resolvePageComponent(`../../flighter/resources/js/pages/${name.substring(10)}.vue`, import.meta.glob<DefineComponent>('../../flighter/resources/js/pages/**/*.vue')) :
resolvePageComponent(`./pages/${name}.vue`, import.meta.glob<DefineComponent>('./pages/**/*.vue')),
setup: ({App, props, plugin}) => {
const Ziggy = {
...(props.initialPage as any).props.ziggy,
location: () => new URL((props.initialPage as any).props.ziggy.url, (props.initialPage as any).props.config.app.url)
};
buildStore(props, Ziggy);
const ssr:VueApp = createSSRApp({render: () => h(App, props)}).use(plugin);
return buildApp(ssr);
},
title: (title:string) => `${title}`,
progress: {color: '#4fb4d3'}
}),
parseInt(process.env.INERTIA_SSR_PORT ?? '') ?? 13714
);
I've tried creating an InertiaHttpGateway to sort through the traffic as per this article
Any thoughts on how I can prevent this?
Please or to participate in this conversation.