CODEWITHSUNDEEP
reactjslaravelnpmbuildvite
Phoca
Phoca

Reputation: 369

Unable to locate file in Vite manifest: resources/js/app.jsx. (npm run build)

I have created Laravel application based on this guide:

https://bootcamp.laravel.com/

When working with VITE as dev (npm run dev), everything is OK

But when building JS and CSS with VITE (npm run build), then I get following error:

Unable to locate file in Vite manifest: resources/js/app.jsx

enter image description here

php artisan serve is active, php artisan optimize:clear done, npm updated to latest, etc. but still the same problem.

Will be great to get some more tips how to solve this problem.

Thank you, Jan

Upvotes: 4

Views: 5182

Answers (2)

Jesus Arribi
Jesus Arribi

Reputation: 11

I had a similar problem. I write down here my solution for somebody with this headache:

My problem was that Vite was not transforming the components under the Pages folder, so it gave an error that the file cannot be found in the manifest.

To solve it you have to open the app.jsx file and import the following package:

import { resolvePageComponent } from'laravel-vite-plugin/inertia-helpers';

And then you have to modify the createInertiaApp in app.jsx function so that it looks as follows:

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

  setup({ el, App, props }) {

    constroot = createRoot(el);

    root.render(<App{...props}/>);

  },

})

Finally: npm run build

And everything is working for me.

Hope this help.

Upvotes: 1

RuchDi
RuchDi

Reputation: 468

I have the same problem.

When I added 'resources/js/app.jsx' in vite.config.js file and run npm run build again

the problem was fixed.

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/js/app.jsx' --Add this
            ],
            refresh: true,
        }),
        react(),
    ],
...

Hope this help.

Upvotes: 6

Related Questions