title: Error [ERR_REQUIRE_ESM]: require() of ES Module while using SSR (Inertiajs)
body: <p>Here's the stack I'm using:
  <code>Laravel</code>, <code>Inertiajs</code>, <code>React</code></p>
  <p>I was setting up <a href="https://inertiajs.com/server-side-rendering" rel="nofollow noreferrer">Inertia SSR</a>, everything got installed and compiled successfully.
  But just while running the final node process ( <code>node public/js/ssr.js</code>), I'm getting this error:</p>
  <pre class="lang-bash prettyprint-override"><code>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.
  </code></pre>
  <p>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.</p>
  <p>I want to use the latest <a href="https://swiperjs.com/" rel="nofollow noreferrer">Swiper</a> version.</p>
  <p>Here's my laravel-mix config</p>
  <pre class="lang-js prettyprint-override"><code>// 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();
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>// webpack.ssr.mix.js
  mix.js('resources/js/ssr.js', 'public/js')
    .options({ manifest: false })
    .react()
    .alias({ '@': path.resolve('resources/js') })
    .alias({ ziggy: path.resolve('vendor/tightenco/ziggy/src/js') })
    .webpackConfig({
      target: 'node',
      externals: [nodeExternals()],
    })
  </code></pre>