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

winstonma · 2022-04-27T04:00:40Z

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

The text was updated successfully, but these errors were encountered:

mwskwong · 2022-04-28T07:44:08Z

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 · 2022-04-29T04:04:23Z

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

winstonma · 2022-05-02T15:47:39Z

@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

graysonhicks · 2022-05-20T00:59:11Z

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

winstonma · 2022-05-26T09:01:04Z

@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 · 2022-06-23T07:12:13Z

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

Reverted to react 17 as react 18 is still not compat with preact. Ref: gatsbyjs/gatsby#35500

github-actions · 2022-09-09T00:06:13Z

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 · 2022-10-19T00:09:27Z

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 · 2022-10-19T00:31:50Z

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

graysonhicks · 2022-10-19T21:25:57Z

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

winstonma · 2022-10-20T03:03:04Z

@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 · 2022-10-21T09:07:23Z

@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 · 2022-10-24T01:12:11Z

@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 · 2022-10-24T10:04:57Z

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 · 2022-10-25T00:44:38Z

@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 · 2022-11-14T12:02:36Z

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 · 2022-11-29T18:13:21Z

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 · 2022-11-29T20:47:39Z

@juliannehalversen Please check #35500 (comment).

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 · 2022-11-29T20:53:50Z

@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 · 2022-11-29T21:05:38Z

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 (#35500 (comment)).

github-actions · 2022-12-20T12:02:36Z

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 · 2023-01-19T20:11:37Z

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 · 2023-01-19T20:23:04Z

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 · 2023-01-25T18:31:33Z

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

preactjs/preact-render-to-string#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 · 2023-02-15T12:02:31Z

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! 💪💜

…atsby#35500

github-actions · 2023-03-27T12:02:40Z

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 · 2023-12-19T12:37:36Z

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

jcondina · 2024-06-06T21:07:23Z

Are there any intentions on fixing this? It's been over 2 years since the issue was reported but no solution was provided yet. I've seen some suggestions but no actions taken.

xwhuang25 · 2024-06-19T17:52:57Z

I am facing the same issue when I tried to upgrade our Gatsby 4 project to Gatsby 5, we only Netlify to build and host. I was able to get it work in my local environment, gatsby develop/build had no problem, when just when I shipped to Netlify, everytime I will get
error Building static HTML failed for path "/environment/" 12:37:22 PM: 12:37:22 PM: 338 | try { 12:37:22 PM: 339 | const writableStream = new WritableAsPromise() 12:37:22 PM: > 340 | const { pipe } = renderToPipeableStream(bodyComponent, { 12:37:22 PM: | ^ 12:37:22 PM: 341 | onAllReady() { 12:37:22 PM: 342 | pipe(writableStream) 12:37:22 PM: 343 | }, 12:37:22 PM: 12:37:22 PM: WebpackError: TypeError: renderToPipeableStream is not a function 12:37:22 PM: 12:37:22 PM: - static-entry.js:340 12:37:22 PM: gatsby-starter-ug/.cache/static-entry.js:340:26 12:37:22 PM: 12:37:22 PM: - DropdownMenu.js:44 12:37:22 PM: [gatsby-starter-ug]/[@restart]/ui/cjs/DropdownMenu.js:44:1``

WebpackError: TypeError: renderToPipeableStream is not a function, this issue seems to be fixed recently but not sure why it persists, is it sort of upstream issue on preact or gatsby-plugin-react side?
this is the package.json part
"dependencies": { "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.5", "react": "^18.3.1", "react-awesome-reveal": "^4.2.3", "react-bootstrap": "^2.10.2", "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" },

we are close to up to date regarding preact, preact-to-string, and gatsby-plugin-preact.

This is really blocking us atm, and disabling preact may not be a quick and feasible.

Not sure if anyone uses Netlify has similar issues

winstonma added the type: bug An issue or pull request relating to a bug in Gatsby label Apr 27, 2022

gatsbot bot added the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label Apr 27, 2022

This comment was marked as duplicate.

Sign in to view

jiyuujin mentioned this issue May 8, 2022

Build failed after using react v18+ and gatsby-source-preact jiyuujin/kitten#953

Open

This comment was marked as duplicate.

Sign in to view

TimTree added a commit to TimTree/games-by-tim that referenced this issue Jun 17, 2022

Downgrade React 18 to 17 to resolve build issue: gatsbyjs/gatsby#35500

189cb3b

jongwooo mentioned this issue Jun 29, 2022

Build failed after using react v18+ and preact jongwooo/blog#10

Closed

TylerBarnes added topic: webpack/babel Webpack or babel and removed status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer labels Aug 19, 2022

yashLadha added a commit to yashLadha/yashLadha.in that referenced this issue Aug 21, 2022

fix: build failure for preact with react 18

316f10a

Reverted to react 17 as react 18 is still not compat with preact. Ref: gatsbyjs/gatsby#35500

github-actions bot added the stale? Issue that may be closed soon due to the original author not responding any more. label Sep 9, 2022

tubone24 mentioned this issue Sep 14, 2022

fix(deps): update react monorepo to v18 (major) tubone24/blog#1077

Closed

1 task

github-actions bot closed this as completed Oct 19, 2022

LekoArts removed the stale? Issue that may be closed soon due to the original author not responding any more. label Oct 21, 2022

LekoArts reopened this Oct 21, 2022

LekoArts added the type: upstream Issues outside of Gatsby's control, caused by dependencies label Oct 21, 2022

winstonma changed the title ~~Build failed after using react v18+ and gatsby-source-preact~~ Build failed after using react v18+ and gatsby-plugin-preact Oct 24, 2022

github-actions bot added the stale? Issue that may be closed soon due to the original author not responding any more. label Nov 14, 2022

juliannehalversen mentioned this issue Nov 29, 2022

Upgrading to latest versions of Gatsby, Node, and React breaks Preact #37124

Closed

2 tasks

github-actions bot removed the stale? Issue that may be closed soon due to the original author not responding any more. label Nov 30, 2022

github-actions bot added the stale? Issue that may be closed soon due to the original author not responding any more. label Dec 20, 2022

github-actions bot removed the stale? Issue that may be closed soon due to the original author not responding any more. label Jan 20, 2023

LekoArts mentioned this issue Feb 15, 2023

gatsby-plugin-preact 7.6.0 doesn't work with gatsby 5.6.0 #37653

Closed

2 tasks

github-actions bot added the stale? Issue that may be closed soon due to the original author not responding any more. label Feb 15, 2023

TimTree added a commit to TimTree/games-by-tim that referenced this issue Feb 19, 2023

Switch to Google Analytics 4, Uninstall Preact due to bug: gatsbyjs/g…

8d59eda

…atsby#35500

github-actions bot closed this as completed Mar 27, 2023

devm33 added a commit to devm33/devm33.com that referenced this issue Apr 9, 2023

Preact all broken gatsbyjs/gatsby#35500

601d884

jcxldn mentioned this issue Jul 18, 2023

Switch to Preact genoswitch/wiki#47

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

winstonma commented Apr 27, 2022

This comment was marked as duplicate.

This comment was marked as duplicate.

mwskwong commented Apr 28, 2022

graysonhicks commented Apr 29, 2022

winstonma commented May 2, 2022 •

edited

Loading

This comment was marked as duplicate.

graysonhicks commented May 20, 2022

winstonma commented May 26, 2022

johnchourajr commented Jun 23, 2022

github-actions bot commented Sep 9, 2022

github-actions bot commented Oct 19, 2022

winstonma commented Oct 19, 2022

graysonhicks commented Oct 19, 2022

winstonma commented Oct 20, 2022 •

edited

Loading

LekoArts commented Oct 21, 2022 •

edited

Loading

winstonma commented Oct 24, 2022 •

edited

Loading

LekoArts commented Oct 24, 2022

winstonma commented Oct 25, 2022

github-actions bot commented Nov 14, 2022

juliannehalversen commented Nov 29, 2022

winstonma commented Nov 29, 2022

juliannehalversen commented Nov 29, 2022

winstonma commented Nov 29, 2022 •

edited

Loading

github-actions bot commented Dec 20, 2022

eur2 commented Jan 19, 2023

juliannehalversen commented Jan 19, 2023

graysonhicks commented Jan 25, 2023

github-actions bot commented Feb 15, 2023

github-actions bot commented Mar 27, 2023

simmison commented Dec 19, 2023

jcondina commented Jun 6, 2024

xwhuang25 commented Jun 19, 2024

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

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

Comments

winstonma commented Apr 27, 2022

Preliminary Checks

Description

Reproduction Link

Steps to Reproduce

Expected Result

Actual Result

Environment

Config Flags

This comment was marked as duplicate.

This comment was marked as duplicate.

mwskwong commented Apr 28, 2022

graysonhicks commented Apr 29, 2022

winstonma commented May 2, 2022 • edited Loading

This comment was marked as duplicate.

graysonhicks commented May 20, 2022

winstonma commented May 26, 2022

johnchourajr commented Jun 23, 2022

github-actions bot commented Sep 9, 2022

github-actions bot commented Oct 19, 2022

winstonma commented Oct 19, 2022

graysonhicks commented Oct 19, 2022

winstonma commented Oct 20, 2022 • edited Loading

LekoArts commented Oct 21, 2022 • edited Loading

winstonma commented Oct 24, 2022 • edited Loading

LekoArts commented Oct 24, 2022

winstonma commented Oct 25, 2022

github-actions bot commented Nov 14, 2022

juliannehalversen commented Nov 29, 2022

winstonma commented Nov 29, 2022

juliannehalversen commented Nov 29, 2022

winstonma commented Nov 29, 2022 • edited Loading

github-actions bot commented Dec 20, 2022

eur2 commented Jan 19, 2023

juliannehalversen commented Jan 19, 2023

graysonhicks commented Jan 25, 2023

github-actions bot commented Feb 15, 2023

github-actions bot commented Mar 27, 2023

simmison commented Dec 19, 2023

jcondina commented Jun 6, 2024

xwhuang25 commented Jun 19, 2024

winstonma commented May 2, 2022 •

edited

Loading

winstonma commented Oct 20, 2022 •

edited

Loading

LekoArts commented Oct 21, 2022 •

edited

Loading

winstonma commented Oct 24, 2022 •

edited

Loading

winstonma commented Nov 29, 2022 •

edited

Loading