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
进行编译打包。
打包的时候,报错信息如下:

关键代码
这里只看关键代码:server.jsx
:
本地项目中的react
和react-dom
,版本号也是必然足够的。因为使用esno
执行server.jsx
,是完全正常的。在react-dom/server
中,是必然存在导出函数renderToPipeableStream()
的。

解决方案
修改webpack.config.server.js
文件,增加target
字段,修改为node
即可。

修改后,就不会有这种奇奇怪怪的renderToPipeableStream()
导出函数不存在的错误信息了。
结束语
更多苏南大叔的webpack
经验文章,请参考:


