Closed winstonma closed 1 year ago
I'm getting this as well.
Same.
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.
The Gatsby check uses webpack global defined here. Not sure why preact is making that falsy?
@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
gatsby-source-preact
I'm getting this as well.
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 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
.
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
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! 💪💜
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! 💪💜
This issue is not solved. I still find the problem on the latest release.
I think the issue is still upstream with Preact not support React 18.
@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
@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.
@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?
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.
@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...
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! 💪💜
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?
@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.
@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.
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).
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! 💪💜
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 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.
@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).
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! 💪💜
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! 💪💜
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
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.
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
Preliminary Checks
Description
As titled
Reproduction Link
https://github.com/gatsbyjs/gatsby-starter-blog.git
Steps to Reproduce
Then edit
gatsby-config.js
, following the gatsby-plugin-preact How to use guildThe build would be success
Expected Result
Build success
Actual Result
Got
WebpackError: TypeError: renderToPipeableStream is not a function
Environment
Config Flags
No response