I installed laravel v.11 / laravel v.12, configured vite, tried to build frontend files using npm run build command, but got an ERROR:

And if I go into the file to the place where the error message refers, I will find the following there:

Just in case, below I will provide the contents of the config vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: {
                client: [
                    'resources/css/client/**/*.css',
                    'resources/js/client/**/*.js'
                ],
                admin: [
                    'resources/css/admin/**/*.css',
                    'resources/js/admin/**/*.js'
                ]
            },
            refresh: true,
        }),
    ],
    build: {
        outDir: 'public/build',
        rollupOptions: {
            output: {
                entryFileNames: 'js/[name].js', // js/client.js и js/admin.js
                chunkFileNames: 'js/[name]-[hash].js',
                assetFileNames: assetInfo => {
                    const fileName = Array.isArray(assetInfo.names) && assetInfo.names.length > 0
                        ? assetInfo.names[0]
                        : '';

                    return fileName.includes('.css')
                        ? 'css/[name].css'
                        : 'assets/[name]-[hash][extname]';
                }
            }
        }
    }
});

Is the problem in the vite.config.js, or should I get rid of vite and use something else instead? If the latter, what is the best alternative (based on flexibility, customization, and ease of configuration)?

I installed laravel v.11 / laravel v.12, configured vite, tried to build frontend files using npm run build command, but got an ERROR:

And if I go into the file to the place where the error message refers, I will find the following there:

Just in case, below I will provide the contents of the config vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: {
                client: [
                    'resources/css/client/**/*.css',
                    'resources/js/client/**/*.js'
                ],
                admin: [
                    'resources/css/admin/**/*.css',
                    'resources/js/admin/**/*.js'
                ]
            },
            refresh: true,
        }),
    ],
    build: {
        outDir: 'public/build',
        rollupOptions: {
            output: {
                entryFileNames: 'js/[name].js', // js/client.js и js/admin.js
                chunkFileNames: 'js/[name]-[hash].js',
                assetFileNames: assetInfo => {
                    const fileName = Array.isArray(assetInfo.names) && assetInfo.names.length > 0
                        ? assetInfo.names[0]
                        : '';

                    return fileName.includes('.css')
                        ? 'css/[name].css'
                        : 'assets/[name]-[hash][extname]';
                }
            }
        }
    }
});

Is the problem in the vite.config.js, or should I get rid of vite and use something else instead? If the latter, what is the best alternative (based on flexibility, customization, and ease of configuration)?

• laravel
• npm
• vite

• Can you sahre the following? - Node version - package.json - Is this a laravel fresh installation? Thanks. – Tatachiblob Commented Apr 2 at 3:49

1 Answer 1

Try using this updated configuration:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/client/app.css',
                'resources/js/client/app.js',
                'resources/css/admin/app.css',
                'resources/js/admin/app.js'
            ],
            refresh: true,
        }),
    ],
    build: {
        outDir: 'public/build',
        rollupOptions: {
            output: {
                entryFileNames: 'js/[name].js',
                chunkFileNames: 'js/[name]-[hash].js',
                assetFileNames: 'assets/[name]-[hash][extname]'
            }
        }
    }
});