WebpackError: TypeError: renderToPipeableStream is not a function with Preact and Preact-render-to-string

Hello,
I am experiencing strange issue in my Netlify builds with Gatsby 5 and its plugin gatsby-plugin-preact. I also have Preact and Preact-render-to-string in my package.json file.

this is the issue I saw in my build log:

failed Building static HTML for pages - 3.207s
10:15:42 AM: error Building static HTML failed for path “/environment/”
10:15:42 AM:
10:15:42 AM: 338 | try {
10:15:42 AM: 339 | const writableStream = new WritableAsPromise()
10:15:42 AM: > 340 | const { pipe } = renderToPipeableStream(bodyComponent, {
10:15:42 AM: | ^
10:15:42 AM: 341 | onAllReady() {
10:15:42 AM: 342 | pipe(writableStream)
10:15:42 AM: 343 | },
10:15:42 AM:
10:15:42 AM: WebpackError: TypeError: renderToPipeableStream is not a function
10:15:42 AM:
10:15:42 AM: - static-entry.js:340
10:15:42 AM: gatsby-starter-ug/.cache/static-entry.js:340:26
10:15:42 AM:
10:15:42 AM: - FormControl.js:6
10:15:42 AM: [gatsby-starter-ug]/[react-bootstrap]/esm/FormControl.js:6:43

This i s my dependencies section of package.json file

“dependencies”: {

"axios": "^0.27.2",
"bootstrap": "^5.2.3",
"classnames": "^2.3.1",
"express": "^4.17.1",
"gatsby": "^5.13.6",
"gatsby-awesome-pagination": "^0.3.8",
"gatsby-cli": "^5.13.3",
"gatsby-drupal-webform": "^4.0.0",
"gatsby-plugin-gatsby-cloud": "^5.13.1",
"gatsby-plugin-google-analytics": "^5.13.1",
"gatsby-plugin-google-tagmanager": "^5.13.1",
"gatsby-plugin-image": "^3.13.1",
"gatsby-plugin-manifest": "^5.13.1",
"gatsby-plugin-preact": "^7.13.1",
"gatsby-plugin-react-helmet": "^6.13.1",
"gatsby-plugin-robots-txt": "^1.7.1",
"gatsby-plugin-sass": "^6.13.1",
"gatsby-plugin-sharp": "^5.13.1",
"gatsby-source-drupal": "^6.13.1",
"gatsby-source-drupal-menu-links": "^3.0.1",
"gatsby-source-filesystem": "^5.13.1",
"gatsby-transformer-sharp": "^5.13.1",
"gatsby-transformer-yaml": "^5.13.1",
"is-subset": "^0.1.1",
"js-yaml": "^4.1.0",
"lodash-es": "^4.17.21",
"mediaelement": "^7.0.0",
"moment-timezone": "^0.5.33",
"node-fetch": "^3.0.0",
"npm-check-updates": "^13.0.3",
"preact": "^10.22.0",
"preact-render-to-string": "^6.5.1",
"react": "^18.3.1",
"react-awesome-reveal": "^4.2.3",
"react-bootstrap": "^1.6.1",
"react-copy-to-clipboard": "^5.0.4",
"react-dom": "^18.3.1",
"react-file-icon": "^1.3.0",
"react-helmet": "^6.1.0",
"react-hook-form": "^7.12.1",
"react-icons": "^5.2.1",
"react-inlinesvg": "^4.1.3",
"react-masonry-css": "^1.0.16",
"react-number-format": "^5.4.0",
"react-paginate": "^8.2.0",
"react-player": "^2.9.0",
"react-scrollama": "^2.3.2",
"react-select": "^5.7.3",
"react-share": "^5.1.0",
"react-slick": "^0.30.2",
"sass": "^1.37.5",
"slick-carousel": "^1.8.1"

},

I have pretty much everything up to date. I was able to run gatsby dev, build, and serve in my local environment and didnt get any errors. However, when I set up Netlify deployment build I keep getting the error

WebpackError: TypeError: renderToPipeableStream is not a function

I tried with NPM_FLAGS like --force, peer-legacy-deps, and didnt work out.

I tried with Node 18 and 20 in my local dev which ran fine, did the same in Netlify site but failed every time with same issue. I also cleared cache every time when I tried to redeploy

I am kind of lost at the moment, any insights would be greatly appreciated.

Thanks a million!!

Hi @xwhuang25,

Thanks for reaching out and welcome to Netlify’s Support Forums!

Sorry to hear about the issue. The error pertains to a incorrect or incompatible method build called, you’ll want to ensure that you’re using the latest stable version of preact and preact-render-to-stringpreact. Looks like the current versions are 10.22.1 and 6.5.5.

Would you be able to tells us which site you’re seeing this build error on? If you could provide the site name (such as sitename.netlify.app). That’ll help us investigate this issue.