gatsby: Build failed after using react v18+ and gatsby-plugin-preact

Preliminary Checks

This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

As titled

Reproduction Link

https://github.com/gatsbyjs/gatsby-starter-blog.git

Steps to Reproduce

First, build the demo using react v17.0.1

# Clone the starter blog
git clone https://github.com/gatsbyjs/gatsby-starter-blog.git
# Add gatsby-plugin-preact
yarn add gatsby-plugin-preact preact preact-render-to-string

Then edit gatsby-config.js, following the gatsby-plugin-preact How to use guild

# Build
yarn run build

The build would be success 2. The build fail after updating react to v18+

# Update react to v18+
yarn add react react-dom
# Build
yarn run build

Expected Result

Build success

Actual Result

Got WebpackError: TypeError: renderToPipeableStream is not a function

Environment

System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
  Binaries:
    Node: 16.14.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.1.0 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.10.4
  Browsers:
    Chrome: 100.0.4896.127
    Edge: Spartan (44.19041.1266.0), Chromium (100.0.1185.50)
  npmPackages:
    gatsby: ^4.13.0 => 4.13.0
    gatsby-plugin-feed: ^4.13.0 => 4.13.0
    gatsby-plugin-gatsby-cloud: ^4.13.0 => 4.13.0
    gatsby-plugin-google-analytics: ^4.13.0 => 4.13.0
    gatsby-plugin-image: ^2.13.0 => 2.13.0
    gatsby-plugin-manifest: ^4.13.0 => 4.13.0
    gatsby-plugin-offline: ^5.13.0 => 5.13.0
    gatsby-plugin-preact: ^6.13.0 => 6.13.0
    gatsby-plugin-react-helmet: ^5.13.0 => 5.13.0
    gatsby-plugin-sharp: ^4.13.0 => 4.13.0
    gatsby-remark-copy-linked-files: ^5.13.0 => 5.13.0
    gatsby-remark-images: ^6.13.0 => 6.13.0
    gatsby-remark-prismjs: ^6.13.0 => 6.13.0
    gatsby-remark-responsive-iframe: ^5.13.0 => 5.13.0
    gatsby-remark-smartypants: ^5.13.0 => 5.13.0
    gatsby-source-filesystem: ^4.13.0 => 4.13.0
    gatsby-transformer-remark: ^5.13.0 => 5.13.0
    gatsby-transformer-sharp: ^4.13.0 => 4.13.0

Config Flags

No response

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 7
Comments: 30 (7 by maintainers)

Commits related to this issue

Downgrade React 18 to 17 to resolve build issue: https://github.com/gatsbyjs/gatsby/issues/35500 — committed to TimTree/games-by-tim by TimTree 2 years ago
fix: build failure for preact with react 18 Reverted to react 17 as react 18 is still not compat with preact. Ref: https://github.com/gatsbyjs/gatsby/issues/35500 — committed to yashLadha/yashLadha.in by yashLadha 2 years ago
Switch to Google Analytics 4, Uninstall Preact due to bug: https://github.com/gatsbyjs/gatsby/issues/35500 — committed to TimTree/games-by-tim by TimTree a year ago
Preact all broken https://github.com/gatsbyjs/gatsby/issues/35500 — committed to devm33/devm33.com by devm33 a year ago

Most upvoted comments

@mwskwong Many users would believe upgrading the packages in package.json would be trivial - without any building error. Although I am the first reporter but I still believe some people faced this problem and they would not bother understanding why the build fails and they would stop upgrading packages. Also it would be tough for user to trace down the root cause of the build error. Therefore although using React 17 would be the current workaround. I still think it would be benefical for this building error would be fixed.

In the meantime there are two options

use React 17 or,
disable gatsby-source-preact

winstonma on May 26, 2022

@eur2 @juliannehalversen Unfortunately this issue is upstream, with Preact, not with Gatsby. The required PR is here:

https://github.com/preactjs/preact-render-to-string/pull/259

You can watch that PR for updates, but it is out of our hands. (Note that this same Preact issue is blocking users of Remix and Next.js 13).

graysonhicks on Jan 25, 2023

@graysonhicks Thanks for the info.

I guess it would still be great to keep this issue open and let people know what is the root cause of this WebpackError.

winstonma on May 26, 2022

FWIW, I don’t think Preact is really close to compat with React 18 at this point: https://github.com/preactjs/preact/issues/2621#issuecomment-1129562148

graysonhicks on May 20, 2022

Hmm this part is a bit tricky as the root cause of this plugin not working is neither Gatsby nor gatsby-plugin-preact, is preact.

I also asked if it is possible to add dependency stuff so the gatsby-plugin-preact installation fail if react 18 is being used. But the team thinks it is preact’s not Gatsby or gatsby-plugin-preact problem (https://github.com/gatsbyjs/gatsby/issues/35500#issuecomment-1288772066).

winstonma on Nov 30, 2022