gatsbypreact

gatsby-plugin-preact does not work with Gatsby 5+

I have Gastby 5.13.2 and I have installed gatsby-plugin-preact with preact and react-render-to-string. When I try to open a homepage in a dev mode I get an error:

{
    "codeFrame": "No codeFrame could be generated",
    "sourcePosition": null,
    "sourceContent": null
}

in console I get

warn The path "/" errored during SSR.

My package.json looks like this:

  "dependencies": {
    "@rmwc/menu": "^14.0.7",
    "@rmwc/tabs": "^14.0.7",
    "classnames": "2.5.1",
    "common": "file:../common/",
    "dotenv": "8.2.0",
    "echarts": "^5.4.3",
    "echarts-for-react": "^3.0.2",
    "gatsby": "^5.13.2",
    "gatsby-plugin-env-variables": "^2.3.0",
    "gatsby-plugin-google-tagmanager": "^5.13.1",
    "gatsby-plugin-image": "^3.13.1",
    "gatsby-plugin-manifest": "^5.13.1",
    "gatsby-plugin-optimize-svgs": "^1.0.5",
    "gatsby-plugin-preact": "^7.13.1",
    "gatsby-plugin-react-helmet": "^6.13.1",
    "gatsby-plugin-react-helmet-canonical-urls": "^1.4.0",
    "gatsby-plugin-react-svg": "^3.3.0",
    "gatsby-plugin-recaptcha": "^1.0.5",
    "gatsby-plugin-remove-trailing-slashes": "^4.19.0",
    "gatsby-plugin-robots-txt": "^1.8.0",
    "gatsby-plugin-s3": "^0.4.1",
    "gatsby-plugin-sass": "^6.13.1",
    "gatsby-plugin-sharp": "^5.13.1",
    "gatsby-plugin-sitemap": "^6.11.0",
    "gatsby-plugin-split-css": "^2.0.3",
    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.32",
    "gatsby-source-drupal": "^6.13.1",
    "gatsby-source-filesystem": "^5.13.1",
    "gatsby-transformer-sharp": "^5.13.1",
    "node-sass": "^9.0.0",
    "parse-entities": "4.0.1",
    "preact": "^10.19.6",
    "preact-render-to-string": "^5.2.6",
    "react": "^18.2.0",
    "react-compare-slider": "3.0.1",
    "react-dom": "^18.2.0",
    "react-helmet": "6.1.0",
    "react-html-parser": "2.0.2",
    "react-infinite-scroller": "1.2.6",
    "react-modal": "3.16.1",
    "react-player": "^2.14.1",
    "react-resize-detector": "6.7.0",
    "react-scroll": "1.9.0",
    "react-share": "5.0.3",
    "react-zoom-pan-pinch": "^3.3.0",
    "sass": "^1.70.0",
    "swiper": "6.5.4",
    "typed.js": "^2.1.0",
    "universal-cookie": "4.0.4",
    "uuid": "^9.0.1"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^6.3.0",
    "@types/jest": "^29.5.11",
    "@types/node": "^20.11.7",
    "@types/react": "^18.2.48",
    "@types/react-dom": "^18.2.18",
    "@types/react-helmet": "^6.1.11",
    "@types/react-html-parser": "2.0.6",
    "@types/react-infinite-scroller": "1.2.5",
    "@types/react-scroll": "1.8.10",
    "@types/uuid": "^9.0.8",
    "gatsby-plugin-typescript-checker": "1.1.1",
    "jest": "^29.7.0",
    "tsc-files": "^1.1.4",
    "typescript": "5.3.3"
  }

As for page, I've deleted almost everything and now it looks like this:

import React from 'react';
import './homepage.scss';

const HomePage = () => <div>Test</div>;

export default function HomePageLanding(): React.ReactElement {
  return <HomePage />;
}

Without Preact everything works fine. Is there any solution for this error?

Solution

  • I'm not sure that Preact is the source of the problem. I have the following set of packages on a Gatsby site and it works fine.

      "dependencies": {
    "@tailwindcss/typography": "0.5.10",
    "asciidoctor": "2.2.6",
    "gatsby": "5.13.2",
    "gatsby-plugin-image": "3.12.0",
    "gatsby-plugin-postcss": "6.12.0",
    "gatsby-plugin-netlify": "5.1.1",
    "gatsby-plugin-robots-txt": "1.8.0",
    "gatsby-plugin-sitemap": "6.12.0",
    "gatsby-source-filesystem": "5.12.0",
    "gatsby-transformer-asciidoc": "4.12.0",
    "gatsby-adapter-netlify": "1.0.1",

    "gatsby-plugin-preact": "^7.13.1",
    "preact": "^10.19.6",
    "preact-render-to-string": "^6.4.0",

    "lodash": "4.17.21",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "slash": "1.0.0"
  }

    The error indicates that the problem lies with the processing of your landing page (at path /). Can you please include a copy of the code for this page (probably something like src/pages/index.js)?

    Using the code you provide in the updated question I am able to launch the site in development mode (see screenshot below). There must be something missing from your question that is required to trigger the problem. Could you please share a complete minimal example that shows the issue? You can just create a GitHub repository and share the link. This will be the quickest way to identify the problem without too much guesswork.

    enter image description here