I’ve run into a problem whilst trying to append .jsx components to my Blade file on Laravel. Here you can see my webpack.mix.js code:

const mix = require('laravel-mix');
const EsbuildPlugin = require('esbuild-loader').EsbuildPlugin;

mix.js('resources/js/app.js', 'public/js')
.react()
.sass('resources/sass/app.scss', 'public/css')
.webpackConfig({
    module: {
        rules: [
            {
                test: /.jsx?$/, // Match both .js and .jsx files
                loader: 'esbuild-loader',
                options: {
                    loader: 'jsx', // Set the loader to JSX
                    target: 'es2015'
                }
            }
        ]
    },
    plugins: [
        new EsbuildPlugin()
    ]
});

if (mix.inProduction()) {
    mix.version();
}

I wasn’t able to get my mix-manifest.json file created when I ran npm run dev, although the latter returned no errors whilst running.
In result, my {{mix('js/app.jsx')}} returned an address that is wrong, and read //[::1]:5173/js/app.jsx in compilation. Thus, giving app.jsx a 404 error in networking dev. tools.

What can I do to fix my issue?
Thank you very much!