Docs-website: [Umbrella Issue] Upgrade Site(s) to Gatsby V3

[jpvajda]

Acceptance Criteria

The general approach will be to upgrade required dependencies for the following:

Upgrade theme, review and resolve any issues.
Upgrade OSS site, review and resolve any issues.
Upgrade Dev site, review and resolve any issues.
Upgrade Docs site, review and resolve any issues.

THEN upgrade Gatsby V3. (prioritize in Sprint 3 or 4)

• [ ] Upgrade required package updates needed to run Gatsby V3 for each repo:
• [ ] deploy changes to The theme 1st IF test pass, and the site builds THEN
• [ ] deploy changes to OSS Site 1st IF test pass, and the site builds THEN
• [ ] deploy changes to Dev Site 2nd IF test pass, and the site builds THEN
• [ ] Docs Site 3rd IF test pass, and the site builds THEN
• [ ] 🥳 🎉 🎈

Estimates

• update key dependencies: 5pts
• update Theme 3pts
• update OSS Site 5pts
• update Dev Site 5pts
• update Docs Site 8pts

26 pts total

Preliminary Test PRS

| Site | Packages |PR | Status | Notes
|---|---|---|---|---|
| Docs |Remark13 |https://github.com/newrelic/docs-website/pull/1608 |PASSED| Gatsby Test PR
|Dev| React 17|https://github.com/newrelic/developer-website/pull/1160| PASSED | caused an issue on an SDK Component

Gatsby v3 also bumps our core dependencies to the latest stable versions. That includes:

• Node 12
• webpack 5
• React 17
• GraphQL 15
• ESLint 7
• Remark 13

Additional updates to consider:

• Emotion 11

• @jerelmiller tried and update the dev site to v3 some time ago, but ran into some compatibility issues with webpack 5 and the new relic gatsby theme. In one of our components, we thought we'd be clever and import path from 'path', which is a Node.js module to use some of its helpers, but turns out that webpack 5 no longer allows this.

• MDXV2 Beta Unfortunately, only MDX V2 (beta) supports remark13 - mdx-js/mdx#1440 The current version of MDX still needs remark 12. We will bump MDX plugin as soon as V2 is published (or if they decide to support remark13 in V1).

References

https://www.gatsbyjs.com/blog/gatsby-v3/

https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v2-to-v3/

[jerelmiller]

This one might be a decent effort. We'll also want to make sure our theme is v3 compatible. As you said, definitely worth trying on one of the smaller sites. We might be able to upgrade without needing to update our theme first, but we'll see.

We may or may not need to update to Emotion 11 in the process as well. The only breaking change there is the renaming of some packages. I _believe_ there is an upgrade path by updating to 11.0.0 (explicit), but we'll need to test that out. I know the gatsby-plugin-emotion got updated and that may require Emotion 11 to work (also something to see)

We should already be on ESLint 7, so no need to update there. Might be good to get us to the latest v7 release, but otherwise this should be a fairly easy upgrade.

The only other one that sticks out to me here is React 17. I'd advocate for doing that separately and getting all of our sites using it before we attempt the v3 upgrade. I think it will be easier to focus on that effort apart from the other upgrades.

From what I can tell the other updates (Webpack 5, GraphQL 15) should be under-the-hood updates and I don't think we'll need to do much there to make this work. We'll get those updates "for free" by updating to Gatsby v3. Those should be pretty smooth since we don't reference those libraries directly.

[jpvajda]

I started to compile some testing we are doing in this issue for reference.

[jerelmiller]

For kicks, I did try and update the dev site to v3 some time ago, but ran into some compatibility issues with webpack 5 and our theme. In one of our components, we thought we'd be clever and import path from 'path', which is a Node.js module to use some of its helpers, but turns out that webpack 5 no longer allows this.

Not sure if the updates in the theme go beyond that, but thats at least one hurdle I noticed that would prevent the update. This shouldn't be too big of a lift by itself to fix, but would be curious if other issues popup or not.

[jpvajda]

@jerelmiller did you have a PR where you did that? I'm just compiling a list of all that we've done

[jerelmiller]

No. I don't think I pushed a branch either. I was just playing around locally so I could see what was broken. I didn't want to create a broken PR 😄

[jpvajda]

@zstix probably has some ideas on additional AC on this ticket.

[aswanson-nr]

@jpvajda While this work is all related, it is on the larger side. It is probably worth breaking out into multiple tickets for each site and maybe the theme.

[jpvajda]

@aswanson-nr let's do that before sprint planning as this is the umbrella issue. cc @zstix

[jpvajda]

upgrade required dependencies for the following

1. Upgrade theme, review and resolve any issues.
2. Upgrade OSS site, review and resolve any issues.
3. Upgrade Dev site, review and resolve any issues.
4. Upgrade Docs site, review and resolve any issues.

THEN upgrade Gatsby V3. _(maybe Sprint 3_)

[aswanson-nr]

Closing this umbrella issue in favor of the linked tickets above.