Error [ERR_REQUIRE_ESM]: require() of ES Module while using SSR

[ComputerReflex]

Hi,

I was setting up SSR, everything got installed and compiled successfully.
But just while running the final node process ( node public/js/ssr.js), I'm getting this error:

Error [ERR_REQUIRE_ESM]: require() of ES Module E:\Websites\laravel\...\node_modules\swiper\swiper.esm.js from E:\Websites\laravel\...\public\js\ssr.js not supported.
Instead change the require of swiper.esm.js in E:\Websites\laravel\...\public\js\ssr.js to a dynamic import() which is available in all CommonJS modules.

However, there's no error on the client-end.
Why the same package have no issue on the client-end but just only on the server-end.

Maybe I'm missing something?

Here's my webpack config

// webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
    .react()
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
    ])
    .alias({
        '@': 'resources/js',
    })
    .version();

// webpack.ssr.mix.js
mix
  .options({ manifest: false })
  .js('resources/js/ssr.js', 'public/js')
  .react()
  .alias({ '@': path.resolve('resources/js') })
  .alias({ ziggy: path.resolve('vendor/tightenco/ziggy/src/js') })
  .webpackConfig({
    target: 'node',
    externals: [nodeExternals()],
  })

Thank you so much for reading :)