Gatsby troubleshooting package compatibility issues

[gorbinphilip]

I am in the process of migrating a gatsby v3 project to v4.
While updating the plugins, specifically updating the gatsby-source-filesystem to v4, it breaks aws amplify login widget (@aws-amplify/ui-react@5.3.3 with aws-amplify@5.3.27)
No specific errors on build or console.. Just nothing comes out of the Authenticator component.
Updating gatsby-source-filesystem to v5 however solves the issue. Just wonder what would be the way to dig deeper into what could cause this behavior.
I wish I could go ahead and use v5 version of gatsby-source-filesystem, but this one comes in as a dependency from gatsby-source-s3 plugin and that again doesn't pull full s3 objects with gatsby v4.

[gorbinphilip]

I have opened a related discussion on the gatsby source plugin discord channel as well.. If familiar or have any insights, would be thankful to participate

[ranjanashwin]

Thanks for sharing this. From what you're describing, it sounds like the gatsby-source-filesystem@v4 version might be introducing changes that affect when or how components like Authenticator are rendered.

Since @aws-amplify/ui-react relies on browser APIs, it’s possible that some changes in the SSR behavior or filesystem sourcing in Gatsby v4 are affecting hydration.

One thing to try would be wrapping the Authenticator in a dynamic import or conditional rendering to ensure it only renders client-side. Also consider checking if any GraphQL query errors are silently breaking the layout — even if the build completes.

If updating to gatsby-source-filesystem@v5 solves it, but the gatsby-source-s3 plugin is the blocker, you might also consider forking the S3 plugin to override the dependency for now as a temporary workaround.

[gorbinphilip]

Checked if related to SSR behaviour by using useEffect to render only at client side, but no use.
My query is more on figuring out the root cause in these cases than finding a work around.

[ranjanashwin]

Thanks for sharing this. From what you're describing, it sounds like the gatsby-source-filesystem@v4 version might be introducing changes that affect when or how components like Authenticator are rendered.

Since @aws-amplify/ui-react relies on browser APIs, it’s possible that some changes in the SSR behavior or filesystem sourcing in Gatsby v4 are affecting hydration.

One thing to try would be wrapping the Authenticator in a dynamic import or conditional rendering to ensure it only renders client-side. Also consider checking if any GraphQL query errors are silently breaking the layout — even if the build completes.

If updating to gatsby-source-filesystem@v5 solves it, but the gatsby-source-s3 plugin is the blocker, you might also consider forking the S3 plugin to override the dependency for now as a temporary workaround.

[gorbinphilip]

Thanks for the response.
I was a bit too stunned & curious with the issue and may have overlooked something basic. My best guess now is an outdated / corrupted package lock file leading to installation of awkward dep versions.. Going back to the same commit if I do a fresh install without lock file, I see no trouble now.

[gorbinphilip]

Apologies.. I am able to reproduce the issue. I will put everything together with minial code in a public repo and reopen later.

[gorbinphilip]

Here is a minimal repo with code for reproducing the trouble: https://github.com/gorbinphilip/gatsby-dependencies-compatibility-troubleshoot

As described main branch is the functional version but with v5 version of the gatsby-source-filesystem
Others, trouble and trouble-max with v4 version of the gatsby-source-filesystem and combination of amplify libs versions. Both non functional.

Basically I am looking for ways to further troubleshoot and locate possible root cause for such a case. Specific to these packages or in general.