Here's the stack I'm using: Laravel, Inertiajs, React

I was setting up Inertia SSR, everything got installed and piled 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.

I want to use the latest Swiper version.

Here's my laravel-mix 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.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()],
  })

Here's the stack I'm using: Laravel, Inertiajs, React

I was setting up Inertia SSR, everything got installed and piled 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.

I want to use the latest Swiper version.

Here's my laravel-mix 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.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()],
  })

• javascript
• node.js
• webpack
• inertiajs
• swiper.js

1 Answer 1

If you look at the swiper NPM package, then it is published as ESM only module. It is not not a Common.js module. Look at the following package.json fields of swiper package:

"type": "module",
"main": "./swiper.esm.js",
"module": "./swiper.esm.js",

The reason why it works on client side is that - you bundle everything using Webpack. The Webpack then takes care of bundling AMD, Common.js, UMD and ES Module into a single file with appropriate IIFE wrapper. And thus, it never gives the error.

The story on server side is bit different. In Node.js, you cannot import ESM module using require() function. And during pilation, all your import statement get converted into require() calls since your target is node for server-side code. Also, as you are using webpack-node-externals to not bundle the third-module available via node_modules, Webpack will not bundle this package into your server build. You can tell Webpack to ignore all modules except swiper by adding it to allow list.

nodeExternals({
  allowlist: [
    'swiper'
  ]
})

This will tell Webpack to bundle swiper into the server build and you will no longer see this error. Note that, you may have to do this process for each ESM only module that you use.

You can also try the alternative of using custom webpack resolver for swiper package, but since you are already using webpack-node-externals, it is simpler way.