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

winstonma commented 2 years ago

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

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

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 commented 2 years ago

I'm getting this as well.

alexmacarthur commented 2 years ago

Same.

mwskwong commented 2 years ago

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 commented 2 years ago

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

winstonma commented 2 years ago

@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 commented 2 years ago

I'm getting this as well.

graysonhicks commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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] commented 2 years ago

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] commented 1 year ago

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 commented 1 year ago

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

graysonhicks commented 1 year ago

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

winstonma commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

@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] commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

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] commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

@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] commented 1 year ago

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] commented 1 year ago

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 commented 8 months ago

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 commented 3 months ago

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 commented 2 months ago

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

gatsbyjs / gatsby