Gatsby v3: Hydration not Working in Production Build

[ccssmnn]

Hello everyone,

thanks for providing such a great and powerful tool essentially for free. I have a problem during the v3 migration.

My development build looks fine. However, the production build seems to be unable to hydrate the components. The canvas animation does not load, the menu button (only mobile) does not toggle the menu and my Intersection observer does not trigger the visibility of my components as they approach the viewport. Putting console.log-statements inside the render phase of the components never fire, which leads to my suggestion with the hydration.

Also, I get a warning in the chrome console: The resource <URL> was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

You can see the old v2 site here (German content) and a preview build after switching to v3 here.

As I don't see errors in the chrome-console, no errors during the build and the development build looks perfect I have trouble pointing down the problem.

Thanks!

Additional information

Dependencies before:

    "@tailwindcss/typography": "^0.3.1",
    "@types/react-helmet": "^6.1.0",
    "autoprefixer": "^10.1.0",
    "gatsby": "^2.31.1",
    "gatsby-background-image": "^1.3.1",
    "gatsby-image": "^2.7.0",
    "gatsby-plugin-manifest": "^2.8.0",
    "gatsby-plugin-postcss": "^3.3.0",
    "gatsby-plugin-preact": "^4.3.0",
    "gatsby-plugin-react-helmet": "^3.6.0",
    "gatsby-plugin-sharp": "^2.10.1",
    "gatsby-plugin-typescript": "^2.8.0",
    "gatsby-source-filesystem": "^2.7.0",
    "gatsby-transformer-sharp": "^2.8.0",
    "postcss": "^8.2.1",
    "preact": "^10.5.7",
    "preact-particles": "^1.18.11",
    "react": "^16.13.1",
    "react-device-detect": "^1.14.0",
    "react-dom": "^16.13.1",
    "react-helmet": "^6.1.0",
    "tailwindcss": "^2.0.1"

Dependencies after:

    "@tailwindcss/typography": "^0.4.0",
    "@types/react-helmet": "^6.1.0",
    "autoprefixer": "^10.1.0",
    "gatsby": "^3.0.4",
    "gatsby-background-image": "^1.4.1",
    "gatsby-plugin-image": "^1.0.1",
    "gatsby-plugin-manifest": "^3.0.0",
    "gatsby-plugin-postcss": "^4.0.0",
    "gatsby-plugin-react-helmet": "^4.0.0",
    "gatsby-plugin-sharp": "^3.0.1",
    "gatsby-plugin-typescript": "^3.0.0",
    "gatsby-source-filesystem": "^3.0.0",
    "gatsby-transformer-sharp": "^3.0.0",
    "postcss": "^8.2.1",
    "react": "^17.0.1",
    "react-device-detect": "^1.17.0",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "react-tsparticles": "^1.20.1",
    "tailwindcss": "^2.0.3"

[ccssmnn]

I reinstalled all dependencies over after another and ended up with a working production build🤷‍♂️ but now with gatsby v3.1