错误[ERR_REQUIRE_ESM]：使用SSR (Inertiajs)时需要ES模块的要求()
下面是我使用的堆栈：Laravel、Inertiajs、React
我正在设置惯性SSR，所有的东西都成功地安装和编译了。但是，在运行最终节点进程( 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.但是，客户端没有出现错误。为什么相同的包在客户端没有问题，而只是在服务器端。
我想使用最新的刷卡版本。
这是我的laravel混合配置
// 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()],
})回答 1
Stack Overflow用户
发布于 2022-05-30 12:20:54
如果您查看swiper NPM包，那么它将作为ESM仅模块发布。它不是一个Common.js模块。查看package.json包的以下swiper字段：
"type": "module",
"main": "./swiper.esm.js",
"module": "./swiper.esm.js",它之所以在客户端起作用，是因为--你用Webpack把所有东西捆绑在一起。Webpack随后负责将AMD、Common.js、UMD和ES模块捆绑到一个文件中，并配以适当的生命包装。因此，它从来没有给出错误。
服务器端的故事有点不同。在Node.js中，不能使用require()函数导入ESM模块。在编译过程中，所有import语句都会转换为require()调用，因为您的目标是服务器端代码的node。另外，由于您正在使用webpack-node-externals来不捆绑通过node_modules提供的第三个模块，Webpack不会将这个包捆绑到您的服务器构建中。您可以告诉Webpack忽略除swiper之外的所有模块，将其添加到允许列表中。
nodeExternals({
allowlist: [
'swiper'
]
})这将告诉Webpack将swiper捆绑到服务器构建中，您将不再看到此错误。请注意，您可能必须对所使用的每个ESM模块执行此过程。
您也可以尝试使用自定义webpack解析器进行swiper包的替代，但是由于您已经在使用webpack-node-externals，所以方法更简单。
https://stackoverflow.com/questions/72425265
复制相似问题
腾讯云开发者
