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

I'm using Laravel + Inertia + VueJS + Vite.

I did some research and it seems many people have different variations of this error, but none of the answers seem convincing enough or apply to my problem.

The error :

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

Preface :

As with other people, everything works correctly and as expected when running npm run dev, but after building the files for production using npm run build, the error occurs.

Code :

In the head of my app.blade.php :

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

Details :

• I'm on Windows.
• Vite version : 4.0.0
• APP_ENV=production in .env

If you need any more details, feel free to ask.

What I tried :

• The error dissapears when deleting "resources/js/Pages/{$page['component']}.vue" from app.blade.php, but that just invites other problems : I can see in the network tab of DevTools that /build/assets/app-3c9a2cd6.js and /build/assets/MainPage-0889c7a1.js are being served correctly but they don't seem to be mounting (I put console.log in the setup function inside app.ts but it's not doing anything, same thing for MainPage.vue). I therefore think deleting "resources/js/Pages/{$page['component']}.vue" is not the way to go, I could be wrong...

I don't know if this qualifies as an answer but after a few months of ignoring the problem until I no longer could, I resolved it by using the following hacky and desperate method :

• create a new project (Laravel + Inertia + Vue)
• Test that it works as is on prod
• Git version the new project, this'll be usefull to find out what went wrong if anything goes bad
• Start installing PHP/JS dependencies one by one
• Test if it still works after each install
• Slowly copy PHP files (the ones direcly needed for your app to function, not the boilerplate) from old project to new one (migrations, app files, config files
• Test if it still works after each batch of files
• Do the same thing for JS/TS/Vue files
• Test if it still works after each batch of files
• If the project stopped working at some point, you now have a new clue to figure out what's going on.
• If it still works (which was my case), good.

Now here comes the hacky part to preserve git history from the old project :

• Install a vscode extension to compare the two project folders
• You'll probably find tons of small differences between the two
• If it's possible to find out what's causing the problem, fix it directly in the old project and you're done
• If it's not possible, backup the old project, then copy the content of the new project on top of the old one (do NOT copy the .git folder)
• Commit what was detected as git diffs
• Old project is working now

Like I said, this isn't a real 'solution', but it got my project working in the end and that's what ultimately matters so I'm putting it here in case it helps anyone who comes across this thread.

Fair warning though, this will probably take a full day of work to do correctly...