Aquí está la pila que estoy usando: Laravel , Inertiajs , React
Estaba configurando Inertia SSR , todo se instaló y compiló correctamente. Pero mientras ejecuto el proceso del nodo final ( node public/js/ssr.js ), recibo este 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.Sin embargo, no hay ningún error en el extremo del cliente. Por qué el mismo paquete no tiene problemas en el extremo del cliente sino solo en el extremo del servidor.
Quiero usar la última versión de Swiper .
Aquí está mi configuración de laravel-mix
// 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()], })Si observa el paquete swiper NPM, entonces se publica como módulo ESM solamente . No es un módulo Common.js. Mire los siguientes campos de package.json del paquete swiper :
"type": "module", "main": "./swiper.esm.js", "module": "./swiper.esm.js",La razón por la que funciona en el lado del cliente es que agrupa todo usando Webpack. Luego, Webpack se encarga de agrupar AMD, Common.js, UMD y ES Module en un solo archivo con el envoltorio IIFE adecuado. Y por lo tanto, nunca da el error.
La historia en el lado del servidor es un poco diferente. En Node.js, no puede importar el módulo ESM usando la función require() . Y durante la compilación, toda su declaración de import se convierte en llamadas require() ya que su objetivo es el node para el código del lado del servidor. Además, como está utilizando webpack-node-externals para no agrupar el tercer módulo disponible a través de node_modules , Webpack no agrupará este paquete en la compilación de su servidor. Puede decirle a Webpack que ignore todos los módulos, excepto swiper , agregándolo a la lista de permitidos.
nodeExternals({ allowlist: [ 'swiper' ] }) Esto le indicará a Webpack que incluya el swiper en la compilación del servidor y ya no verá este error. Tenga en cuenta que es posible que deba realizar este proceso para cada módulo único de ESM que utilice.
También puede probar la alternativa de usar un solucionador de paquete web personalizado para el paquete swiper , pero dado que ya está usando webpack-node-externals , es una forma más simple.