javascript - 错误 [ERR_REQUIRE_ESM] : require() of ES Module while using SSR (Inertiajs)

Question

这是我正在使用的堆栈:Laravel、Inertiajs、React

我正在设置 Inertia SSR ，一切都已成功安装和编译。但是就在运行最终 Node 进程 (node public/js/ssr.js) 时，我收到了这个错误:

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.

但是客户端没有报错。为什么同一个包在客户端没有问题，而在服务端只有问题。

我想用最新的Swiper版本。

这是我的 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()],
  })

Answer 1

如果您查看 swiper NPM 包，那么它作为 ESM only module 发布。它不是 Common.js 模块。查看 swiper 包的以下 package.json 字段:

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

它在客户端工作的原因是 - 你使用 Webpack 捆绑所有东西。 Webpack 然后负责将 AMD、Common.js、UMD 和 ES 模块与适当的 IIFE 包装器捆绑到一个文件中。因此，它永远不会给出错误。

服务器端的情况有点不同。在 Node.js 中，您不能使用 require() 函数导入 ESM 模块。在编译期间，您的所有 import 语句都会转换为 require() 调用，因为您的目标是服务器端代码的 node。此外，由于您使用 webpack-node-externals 不捆绑通过 node_modules 可用的第三个模块，Webpack 不会将此包捆绑到您的服务器构建中。您可以通过将 swiper 添加到允许列表来告诉 Webpack 忽略除 swiper 之外的所有模块。

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

这将告诉 Webpack 将 swiper 捆绑到服务器构建中，您将不再看到此错误。请注意，您可能必须为您使用的每个仅 ESM 模块执行此过程。

您也可以尝试为 swiper 包使用自定义 webpack 解析器，但由于您已经在使用 webpack-node-externals ，这是更简单的方法。