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

[winstonma]

Preliminary Checks

• [X] This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• [X] 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

1. 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

[3200pro]

I'm getting this as well.

[alexmacarthur]

Same.

[mwskwong]

It seems to be caused by the condition of checking whether React 17 or 18 is used. It seems to work something like this

if (React 17 is one of the dependencies) {
    Use React 17 API
} else {
    Use React 18 API
}

Now because you don't need to install React when using Preact, the condition check fails and Gatsby uses React 18 API regardless.

A workaround is to install React 17, despite you are not using it.

[graysonhicks]

The Gatsby check uses webpack global defined here. Not sure why preact is making that falsy?

[winstonma]

@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

[badaczewski]

I'm getting this as well.

[graysonhicks]

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

[winstonma]

@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.

[johnchourajr]

FWIW, I don't think Preact is really close to compat with React 18 at this point: preactjs/preact#2621 (comment)

This was my issue reverted to React 17 and fixed the issue

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions[bot]]

Hey again!

It’s been 60 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it. Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to comment on this issue or create a new one if you need anything else. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜

[winstonma]

This issue is not solved. I still find the problem on the latest release.

[graysonhicks]

I think the issue is still upstream with Preact not support React 18.

[winstonma]

@graysonhicks Thanks for this

I understand Gatsby is not the root cause but I personally still think this issue should keep open as it would be benefitial for everyone who use preact to know that they need to pick react version 17 or they would get error

[LekoArts]

@winstonma I understand that reasoning however with Gatsby 5 coming up which requires React 18 I don't see a path forward for this other than the upstream issue being fixed.

I'm afraid we have to close this then once Gatsby 5 is out.

[winstonma]

@LekoArts Thanks for the information.

Does it mean that the it is very likely that gatsby-plugin-preact would not work with Gatsby 5+ (unless there is preact upgrade)?

Just wonder if it is possible that the gatsby-plugin-preact module could add the installation constrain to limit the react version to v17 or below?

[LekoArts]

Does it mean that the it is very likely that gatsby-plugin-preact would not work with Gatsby 5+ (unless there is preact upgrade)?

It seems like that, yes.

Just wonder if it is possible that the gatsby-plugin-preact module could add the installation constrain to limit the react version to v17 or below?

gatsby-plugin-preact doesn't have a peerDependency on react (and shouldn't have it), so we could only update the README of the package pointing out the current upstream issue.

[winstonma]

@LekoArts Thanks for answering

Yeah I guess it would be more right if peerDependency is set on preact (I agree the peerDependency is not set on react). And the root cause is not on Gatsby but on preact.

Hmm...

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[juliannehalversen]

Just trying to re-open this issue after upgrading to the latest version of Gatsby, React, & Node. The latest version of Gatsby requires React 18 (https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v4-to-v5/#minimal-required-react-version-is-18). Because of this, when installing gatsby-plugin-preact, preact, and preact-render-to-string (https://www.gatsbyjs.com/plugins/gatsby-plugin-preact/) it breaks my build with the following error: ` 351 | try { 352 | const writableStream = new WritableAsPromise()

353 | const { pipe } = renderToPipeableStream(bodyComponent, { | ^ 354 | onAllReady() { 355 | pipe(writableStream) 356 | },

WebpackError: TypeError: renderToPipeableStream is not a function`

Is this a known issue or is there a current workaround so that Preact can still be used?

[winstonma]

@juliannehalversen Please check https://github.com/gatsbyjs/gatsby/issues/35500#issuecomment-1286678310.

If preact don't support (well) with react 18+, this path would not work. As Gatsby 5 requires react 18, thus preact would not work with Gatsby 5.

[juliannehalversen]

@winstonma Thanks for the reply. Sounds like if there's no current fix then Gatsby should update their docs for that plugin so people know it's incompatible when upgrading.

[winstonma]

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).

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[eur2]

I just have updated one project to Gatsby v5. This project is using the preact-plugin. Indeed it's not working during the build process. By disabling gatsby-plugin-preact, it's working but loosing some points on Lighthouse metrics… @LekoArts Any idea if this big issue will be solved in the next future? Thanks in advance

[juliannehalversen]

I just have updated one project to Gatsby v5. This project is using the preact-plugin. Indeed it's not working during the build process. By disabling gatsby-plugin-preact, it's working but loosing some points on Lighthouse metrics… @LekoArts Any idea if this big issue will be solved in the next future? Thanks in advance

I have the same issue. Brought my lighthouse score down by 25 points. I'm delaying migrating to Gatsby v5 because of this performance hit.

[graysonhicks]

@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).

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions[bot]]

Hey again!

It’s been 60 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it. Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to comment on this issue or create a new one if you need anything else. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜

[simmison]

I still have the same error! Does anyone have any idea how I can get Gatsby and Preact running together?

These are my configurations: gatsby:5.12.9 react:18.2.0 gatsby-plugin-preact:7.13.0