React SSR，打包报错：不存在renderToPipeableStream函数

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

使用create-react-app的cra模版，创建的react项目。实际上都是基于webpack+babel的，所以，基于webpack的打包模式，都是默认支持的。不但可以打包浏览器端的ssr.js代码，还可以打包服务器端的server.jsx代码。本文的写作背景就是：通过webpack对ReactSSR的服务器端代码进行打包时，发生的warning信息。

苏南大叔的“程序如此灵动”博客，记录苏南大叔的代码编程经验。本文测试环境：nodejs@20.18.0，create-react-app@5.0.1，react-router-dom@6.27.0，react@18.3.1，express@4.21.1。

报错信息

这里借助自定义webpack.config.server.js文件，通过webpack对server.jsx进行编译打包。

// ...
module.exports = {
  entry: "./server.jsx",
  // target: "node",
  // ...
};

打包的时候，报错信息如下：

export 'renderToPipeableStream' (imported as 'renderToPipeableStream') was not found in 'react-dom/server' (possible exports: renderToNodeStream, renderToReadableStream, renderToStaticMarkup, renderToStaticNodeStream, renderToString, version)

关键代码

这里只看关键代码：
server.jsx:

import { renderToPipeableStream } from "react-dom/server";
//...
app2.get("/*", async (req, res) => {
  //...
  const { pipe } = renderToPipeableStream(<App />,...);
  //...
});

本地项目中的react和react-dom，版本号也是必然足够的。因为使用esno执行server.jsx，是完全正常的。在react-dom/server中，是必然存在导出函数renderToPipeableStream()的。

解决方案

修改webpack.config.server.js文件，增加target字段，修改为node即可。

// ...
module.exports = {
  entry: "./server.jsx",
  target: "node",
  // ...
};

修改后，就不会有这种奇奇怪怪的renderToPipeableStream()导出函数不存在的错误信息了。

结束语

更多苏南大叔的webpack经验文章，请参考：

• https://newsn.net/tag/webpack/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。