Unable to locate file in Vite manifest when putting files a few folders deep

[alnutile]

Jetstream Version

3.2.3

Jetstream Stack

Inertia

Laravel Version

10.10

PHP Version

8.1.20

Database Driver & Version

na

Description

The app.blade.php file has this

@vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])

And all works fine until I start doing sub directory vue files like this

resourses/js/Pages/Foo/Bar/Baz/Boo.vue

Then it still works BUT if I reload that page (deployed and locally) it gets an error (or when I run ci/cd and npm run build.

Unable to locate file in Vite manifest: resources/js/Pages/Foo/Bar/Baz/Boo.vue

Though clicking links work fine.

But if I remove "resources/js/Pages/{$page['component']}.vue"

@vite(['resources/js/app.js'])

All works and I can reload the page.

All settings are default, vite.config.js and app.js

Steps To Reproduce

add a file in a folder "resources/js/Pages/Foo/Bar/Baz/Boo.vue"

create a controller and point to that file

return inertia("Foo/Bar/Baz/Boo");

run npm run build

visit that page from a link then reload the page and you will get the error.

[jessarcher]

Hi @alnutile,

I'm not able to replicate this one.

I created resources/js/Pages/Foo/Bar/Baz/Boo.vue with a simple template (<template><div>Hi</div></template>) and then ran npm run build.

The file was compiled:

And an entry for it was included in the manifest at public/build/manifest.json:

I can then load (and reload) the page with a route that returns Inertia::render('Foo/Bar/Baz/Boo'):

The only way I was able to replicate the error was by modifying the glob in resources/js/app.js so that it doesn't match the new file and therefore does not get compiled or included in the manifest. For example, this change disables nested directories and replicates your error:

-     resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
+     resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/*/*.vue')),

Can you confirm whether you get a Boo-*.js file in the build output and whether there is any reference to it in the public/build/manifest.json file after the build?

[alnutile]

Thanks for digging into this. Let me show some output on a real project

here is vite.config

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.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

here is app.js

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

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 Toast from "vue-toastification";
import "vue-toastification/dist/index.css";
import VueApexCharts from "vue3-apexcharts";
import ganttastic from '@infectoone/vue-ganttastic'

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

const options = {
    //toast options
}

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(VueApexCharts)
            .use(ganttastic)
            .use(ZiggyVue, Ziggy)
            .use(Toast, options)
            .mount(el);
    },
});

InertiaProgress.init({ color: '#4B5563' });

As you can see the Dashboard.vue is not even that deep in the folder area which is interesting.

❯ npm --version
7.13.0

❯ node --version
v16.2.0

But the CI/CD system is Github Actions and can have the same issue.

The below issue goes away once I remove that line and run npm run build.

Both systems have same settings overall.

Thanks!

[jessarcher]

Hi @alnutile,

I'm unable to see from your reply whether the problematic page was included in the console build output nor whether there is a corresponding entry for it in the manifest.

In any case, these screenshots show a page nested one-level deep, and Jetstream comes out of the box with several pages at this same depth which works fine. Something specific about your setup seems to be causing the issue, and I don't have enough information to replicate it.

If you're able to provide replication instructions for a fresh Jetstream installation, or a repository where the issue can be replicated, I can take another look.

I'd also suggest the following support channels:

• Laracasts Forums
• Laravel.io Forums
• StackOverflow
• Discord
• Larachat
• IRC

Thanks!

[alnutile]

sounds good thanks

[anchan42]

Have you found a solution on this? I think I have exactly the same problem.

[r3nceee]

I faced this issue recently, our main problem is one component of the page contains "unseen" error because of outdated components, that we left untouched after some refactoring.

Our problem was:

Component A is using Component B and Component B is using Component A

turns into a recursive import.

Things you can check:

1. Check for assets like images that doesn't exists.
2. Inspect each component under that File, try to remove/comment a component, run a build and check the manifest.json again, if that component is now inside the manifest, and if exists, then that component/element is the causing the problem.