[Gatsby] Migration to v5

[randychilau]

Description

This PR migrates the site from Gatsby v4 to v5 which requires React v18.

Update 09/20/2023: The latest package.json changes from the master branch can be seen here.

---

Additional Plugins Added/Updated:

• @fullcalendar/core: ^6.1.8
• @fullcalendar/daygrid: ^6.1.8
• @fullcalendar/google-calendar: ^6.0.2
• @fullcalendar/interaction: ^6.0.1
• @fullcalendar/react:^6.1.8
• babel-preset-gatsby:3.11.0
• dedent: 1.2.0
• gatsby-plugin-feed: 5.11.0
• gatsby-plugin-image: 3.11.0
• gatsby-plugin-manifest: 5.11.0
• gatsby-plugin-preload-fonts: 4.11.0
• gatsby-plugin-robots-txt: 1.8.0
• gatsby-plugin-sharp: 5.11.0
• gatsby-plugin-sitemap: 6.11.0
• gatsby-plugin-styled-components: 6.11.0
• gatsby-redirect-from: 1.0.4
• gatsby-source-filesystem: 5.11.0
• gatsby-transformer-sharp: 5.11.0
• gh-pages: 5.0.0
• prism-react-renderer: 2.0.6
• react-tabs: 6.0.2
• react-tooltip: 5.18.1
• rimraf: 5.0.1
• styled-components: 6.0.5
• swiper: 10.0.4

Plugins Removed (either not used as detected by depCheck or removed for redundancy with React 18 functionality):

• @sideway/address
• cytoscape-fcose
• deepmerge
• ~~gatsby-plugin-loadable-components-ssr~~
• joi
• react-honeycomb
• react-is
• react-scroll
• sharp

Notes for Reviewers It is temporarily required to install with npm install --legacy-peer-deps due to incompatibility with mdxv1 (a separate PR to be merged if/when this PR is merged).

A Github Page hosted preview is availalble here.

For plugins removed, please notify me if there is missing functionality due to removal.

Signed commits

• [x] Yes, I signed my commits.

[l5io]

🚀 Preview for commit 3bb83a76c07af6d14da92f5ee17a197afaec4959 at: https://64c305f1234a480d8a3d2506--layer5.netlify.app

[Ghat0tkach]

LGTM , I have tested and checked most of the components and there are no issues . Thank you @randychilau

[randychilau]

Hi @Ghat0tkach.

Thanks for taking the time to check the PR preview for issues, it is very much appreciated.

I have recently discovered some issues with this PR that will require some additional updates before it will be ready for merging.

Thanks again!

Cheers, Randy

[thisiskaransgit]

@randychilau, thank you for working on this big update. Since you are updating the dependencies, just wanted to notify you that the last time dependanbot provided us the styled-component dependency update, it has its effects in the integrations section, which is evident in this PR too.

As I walked through the preview, I observed that there are behavior changes of elements at certain places, no loss of functionalities though, the affected pages are:

• /service-mesh-landscape
• /company
• /earn/service-mesh-workshops
• /meshmap/design

One major thing not working would be the hamburger menu

These are some things that I found, hope this helps in identifying and fixing issues.

[Chadha93]

Merge conflicts @randychilau

[randychilau]

Hi All,

Apologies for the delay in responding and I hope everyone is well.

I took a break for a few things and should have left a note here regarding this PR as a courtesy at the minimum.

I am slowly ramping back up and catching up with things.

Thanks @thisiskaransgit for the helpful notes, I will see what can be done to resolve the highlighted behavior and appearance issues as it would be a blocker to upgrading.

Thanks @Chadha93!

Cheers, Randy

[l5io]

🚀 Preview for commit 9753478b526f412063302f9acb0a0c66072dcaef at: https://64ee7057c8fefb54676b54c7--layer5.netlify.app

[l5io]

🚀 Preview for commit daca597c2bbd61a394e5816bd07b75e485087edf at: https://64ee8744681e2e007f8c043e--layer5.netlify.app

[l5io]

🚀 Preview for commit 0e2dc95255b6fbab60ee1ff4cfc80e4dd2623017 at: https://64ee91304d953c0e27abe776--layer5.netlify.app

[randychilau]

Hi All,

An update on this PR

all packages are current, except for the following:

• mdx related packages (these are handled in #4585)
  • @mdx-js/mdx": "1.6.22"
  • @mdx-js/react": "1.6.22"
  • "gatsby-plugin-mdx": "3.20.0"
• "react-table": "^7.8.0", it has been updated to @tanstack/react-table v8
  • potential future PR: migration notes)
• "@loadable/component": "^5.15.3" and "react-loadable": "^5.5.0"
  • not utilizing React v18 feature Suspense
  • potential future PR

---

non-gatsby packages with major version changes that may cause site issues:

• upgrade to react v18 new feature:
  • automatic batching, if react state updates are not working correctly, make sure that automatic batching is not causing an issue
• upgrade to styled-components v6 breaking changes
  • need to add $ for transient props used in styled-components (src)
  • need to add & for pseudoselectors and pseudoelements (src)
• upgrade to react-tooltip v5 breaking changes
  • data-for attribute now is data-tooltip-id, data-tip attribute now is data-tooltip-content
• upgrade to swiper v10
• upgrade to react-tabs v6
• upgrade to prism-react-renderer v2

other future PRs with gatsby v5:

• use Slice API for layout elements (navigation, footer).

---

@Chadha93 merge conflicts have been resolved

@thisiskaransgit thanks again for finding those issues, can you please provide more details with the issues on the - /meshmap/design page?

regarding the other items you mentioned, I have updated:

• /index - integrations are displaying correctly (issue: pseudoselector was being applied to children, required &)
• /service-mesh-landscape - svg images for tables and tool-tips are displaying correctly (issue: use img tags with svgs since StaticImage is not designed for svgs, and define height, width)
• /company - 5 logo image is aligned correctly (issue: nested divs causing css issue (I am unsure why this was happening))
• /learn/service-mesh-workshops - workshop grid is displaying correctly (issue: transient props require $)
• hamburger menu in mobile version is working correctly (issue: react v18's automatic batching creating issue with useEffect, need to use setTimeout workaround)

@leecalcote and @Nikhil-Ladha I look forward to hearing what you think the next steps should be (e.g. additional systematic review by volunteers). If this PR is merged, then I will update PR#4585 (MDX upgrades) with the new changes and see if there are any improvements on memory issues and build times that were previously noted.

cheers, Randy

[l5io]

🚀 Preview for commit 46162af0157547abfb7e9857a80dea7492893f57 at: https://64ef89ad8f770d63d378a400--layer5.netlify.app

[l5io]

🚀 Preview for commit 8b410850e8ef51d8b9ade7824ab656d4a6a6c3ac at: https://64f7b2cd9d6a7a0972b4f0e7--layer5.netlify.app

[randychilau]

Hi All,

• Merge conflicts resolved and updated with latest changes
• All the package.json changes from the master branch can be seen here.
• This PR is ready for additional review (github pages hosted version)
  • since this seems to require a full site check/review due to the number of package changes, should it be split among a group of volunteers?

Thanks, Randy

[l5io]

🚀 Preview for commit dd155a74b3ccd3c7e3661964030e9007c13853bf at: https://64ff5c0861818b42499fdbbd--layer5.netlify.app

[l5io]

🚀 Preview for commit dc7875f190f9fbf8d224f6015cd4f2118d0ecb96 at: https://650b22944c2d9a1ac3944654--layer5.netlify.app

[leecalcote]

@randychilau's efforts here are commendable. Just fantastic.

@Udit-takkar do you mind terribly to give this a final once-over?

[leecalcote]

@Mohith234, noting the "Notes for Reviewers" section, are you able to checkout this branch build and run w/o issue?

[randychilau]

Hi @Mohith234,

Thanks for taking the time to help on this PR and posting the screenshot.

The error message is related to outdated MDX packages. This issue is addressed in a separate PR #4585 (which is awaiting Gatsby v5 as discussed here).

Cheers, Randy

[leecalcote]

@VamshiReddy02, do you mind testing this PR as well?

[l5io]

🚀 Preview for commit ef1e69a9af742ff4299acb111f4a4239fb7897b8 at: https://650e33da42629256d961bc1f--layer5.netlify.app

[VamshiReddy02]

LGTM, I have tested and checked the PR and there are no issues. Everything is fine. The site was running successfully.

// @leecalcote @randychilau

[leecalcote]

Thanks much for this, @VamshiReddy02! 👏

[Chadha93]

@randychilau As mentioned here - Notes for Reviewers It is temporarily required to install with npm install --legacy-peer-deps due to incompatibility with mdxv1 (a separate PR to be merged if/when this PR is merged). - You'll create another support PR for this, after this is merged, right?

[randychilau]

Hi @Chadha93,

Thanks for your message.

Yes, if this PR is merged, I will then update PR #4585 (which includes upgrades to MDX v2 and MDX related packages, as well as changes for MDX v2 compatibility) and have it available for review the same day (hopefully).

Since merging this PR #4646 does require users to temporarily add the "--legacy-peer-deps" flag to install the package changes until PR #4585 merges, I am not sure what are the best practices to minimize confusion/disruption.

Should a couple of days/weekend be scheduled to try merging both PRs, should there be any messaging to the community? and what impact will this have on current PRs?

I defer to you, Lee, and the maintainers on what is best.

Cheers, Randy

[Chadha93]

Hi @randychilau,

Thanks for this descriptive response. This really helps.

Answering your question - Although, both of the PRs should be merged at the same time when ready, to avoid conflicts for contributors to install the package changes, if merging this PR, is strictly required before updating the other PR, then lets merge this and until then update our contributing.md file with the instruction to add "--legacy-peer-deps" flag.

In both of the cases, we are good.

Cheers, Gaurav

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Aviral0702]

Hi, I am working on this PR to rebase it to the current master head. I have successfully rebased the Pull request and resolved the merge conflicts. After rebasing, on running make site to build the site I am getting some errors and warnings which I have listed below. Any guidance over these issues would be helpful to resolve them.

1. Some GraphQL queries are taking more than 15s which indicates that they are unoptimized.

2. no slug found in frontmatter or fields : Possible error in the gatsby-node.js file

After these warnings the site builds completely after taking too much time.

3)Then these warnings occur and then the process stops.

These warnings are probably due to some package version change. Most likely gatsby-plugin-mdx as warning is shown that gatsby-plugin-mdx is compatible with gatsby@^4.0.0-next and Error is occuring for API.NODE.VALIDATION which is shown here.

After this the bundle builds successfully but took a lot of time.

[Aviral0702]

Currently I am facing the following issues after pulling the latest changes from the master.

1. The honeycomb structure on the integrations page and on the landing page is distorted.

2. [email protected] does not support gatsby v5.

3. Pricing section has some issues with rendering.