skip to Main Content

I have created Laravel application based on this guide:

https://bootcamp.laravel.com/

  • PHP 8.1.2
  • Laravel 9.33.0
  • React

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

2

Answers


  1. 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.

    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search