[gatsby-plugin-preact] breaks gatsby-plugin-image when using Gatsby Link component

kb1995 commented 3 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

I want to configure gatsby-plugin-preact in my project. I've successfully installed preact and the package as per the documentation and added it to gatsby-config.js

When I run the project in development or create a production build, my images using gatsby-plugin-image break. There seems to be a with role presentation which is not being hidden and it breaks my layout.

In development, the problem doesn't get fixed when I refresh my page. However, in my production build, once I refresh my page, the image is showcased correctly. In production, it looks like it's only a problem when I navigate to a page using the Gatsby Link component.

The problem is not there when I don't use gatsby-plugin-preact so it seems to be something related to that.

Reproduction Link

-

Steps to Reproduce

install gatsby-plugin-preact
load an image using gatsby-plugin-image
run in development/production

Expected Result

To load images correctly

Actual Result

There is an extra div/image which pushes the image away and creates an undesired layout

Environment

Unfortunately, I'm getting a `UNHANDLED REJECTION (e || []).filter is not a function` when I run `gatsby info --clipboard`, but this is my dependencies from package.json 

  "dependencies": {
    "@brainhubeu/react-carousel": "1.19.25",
    "@loadable/component": "^5.15.0",
    "@n8tb1t/use-scroll-position": "^2.0.3",
    "classnames": "^2.3.1",
    "decimal.js": "^10.2.1",
    "gatsby": "^3.14.2",
    "gatsby-cli": "^3.14.1",
    "gatsby-plugin-google-marketing-platform": "^0.1.21",
    "gatsby-plugin-google-tagmanager": "^3.14.0",
    "gatsby-plugin-image": "^1.14.1",
    "gatsby-plugin-loadable-components-ssr": "^3.4.0",
    "gatsby-plugin-minify-classnames": "^0.3.1",
    "gatsby-plugin-netlify": "^3.14.0",
    "gatsby-plugin-preact": "^5.14.0",
    "gatsby-plugin-prismic-previews": "^4.2.0",
    "gatsby-plugin-purgecss": "^6.0.2",
    "gatsby-plugin-react-helmet": "^4.14.0",
    "gatsby-plugin-robots-txt": "^1.6.2",
    "gatsby-plugin-sass": "^4.14.0",
    "gatsby-plugin-sharp": "^3.14.1",
    "gatsby-plugin-sitemap": "^4.10.0",
    "gatsby-plugin-split-css": "^2.0.0",
    "gatsby-plugin-vwo": "^1.0.0",
    "gatsby-remark-prismjs": "^5.11.0",
    "gatsby-source-airtable": "^2.2.1",
    "gatsby-source-filesystem": "^3.14.0",
    "gatsby-source-prismic": "^4.2.0",
    "gatsby-transformer-remark": "^4.11.0",
    "gatsby-transformer-sharp": "^3.14.0",
    "jsonp": "^0.2.1",
    "lodash": "^4.17.21",
    "no-scroll": "^2.1.1",
    "node-sass": "^6.0.0",
    "path-browserify": "^1.0.1",
    "preact": "^10.5.14",
    "preact-render-to-string": "^5.1.19",
    "prismic-reactjs": "^1.3.3",
    "prismjs": "^1.25.0",
    "query-string": "^7.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-google-recaptcha": "^2.1.0",
    "react-helmet": "^6.1.0",
    "react-image-lightbox": "^5.1.4",
    "react-markdown": "^6.0.3",
    "react-modal": "^3.13.1",
    "react-tabs": "^3.2.2",
    "react-tooltip": "^4.2.19",
    "sanitize.css": "^13.0.0",
    "to-querystring": "^1.1.1"
  },
  "devDependencies": {
    "gatsby-plugin-perf-budgets": "^0.0.18",
    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.25",
    "prettier": "^2.3.1"
  }



### Config Flags

DEV_SSR: false,
FAST_DEV: false,

LekoArts commented 3 years ago

Hi!

Please provide a minimal reproduction for this. Thanks!

LekoArts commented 2 years ago

Hi!

Since we didn't receive an answer for 7 days or more about the ask of a reproduction I'm going to close this now, as we can't do much to help without a reproduction. If you are able to create a minimal reproduction for this then please do answer here or open a new issue with a reproduction. Thanks!

gatsbyjs / gatsby