Update Gatsby from v2 to v3

[victorlin]

Description of proposed changes

Motivation: Upgrade to a newer version of Gatsby that uses webpack 5 to avoid build issues such as webpack/webpack#14532

Following official migration guide.

Note

This would need some more work and not sure if it's worth doing. Just wanted to explore the option a bit and document initial roadblocks.

Related issue(s)

• https://github.com/nextstrain/private/issues/88

Checklist

• Checks pass

[victorlin]

Installation of packages was fine, but now there is an error during gatsby develop:

BrowserslistError: Write any browsers query (for instance, `defaults`) before `not supports es6-module`

Full output

$ npm run develop

> develop
> gatsby develop

success open and validate gatsby-configs, load plugins - 3.683s
success onPreInit - 0.003s
success initialize cache - 0.164s
success copy gatsby files - 0.074s
success Compiling Gatsby Functions - 0.214s
success onPreBootstrap - 0.226s
success createSchemaCustomization - 0.099s
success Checking for changed pages - 0.001s
success source and transform nodes - 0.679s
success building schema - 0.599s
created page at /reports/flu-vaccine-selection/2015-september
created page at /reports/flu-vaccine-selection/2016-february
created page at /reports/flu-vaccine-selection/2016-september
created page at /reports/flu-vaccine-selection/2017-february
created page at /blog/2019-10-31-using-narratives-to-explain-west-nile-virus-spread
created page at /blog/2018-05-14-new-nextstrain-website
created page at /blog/2021-01-06-updated-SARS-CoV-2-clade-naming
created page at /blog/2019-10-21-auspice-v2
created page at /blog/2021-07-08-ncov-open-announcement
created page at /blog/2022-04-29-SARS-CoV-2-clade-naming-2022
created page at /blog/2020-06-02-SARSCoV2-clade-naming
created page at /blog/2024-03-27-annual-update-march-2024
created page at /search/sars-cov-2
created page at /search/seasonal-flu
success createPages - 0.109s
success createPagesStatefully - 0.093s
info Total nodes: 206, SitePage nodes: 35 (use --verbose for breakdown)
success Checking for changed pages - 0.002s
success update schema - 0.182s
success write out redirect data - 0.006s
success onPostBootstrap - 0.001s
info bootstrap finished - 7.441s
success onPreExtractQueries - 0.001s
success extract queries from components - 0.314s
success write out requires - 0.031s
warn code block or inline code language not specified in markdown. applying generic code block
success run page queries - 1.124s - 3/3 2.67/s

 ERROR 

Write any browsers query (for instance, `defaults`) before `not supports es6-module`



  BrowserslistError: Write any browsers query (for instance, `defaults`) before `not supports es6-module`
  
  - index.js:320 
    [static-site]/[browserslist]/index.js:320:13
  
  - Array.reduce
  
  - index.js:318 resolve
    [static-site]/[browserslist]/index.js:318:34
  
  - index.js:420 browserslist
    [static-site]/[browserslist]/index.js:420:21
  
  - browserslist.ts:37 hasES6ModuleSupport
    [static-site]/[gatsby]/src/utils/browserslist.ts:37:10
  
  - webpack.config.js:249 getPlugins
    [static-site]/[gatsby]/src/utils/webpack.config.js:249:42
  
  - webpack.config.js:544 module.exports
    [static-site]/[gatsby]/src/utils/webpack.config.js:544:14
  
  - build-html.ts:183 buildRenderer
    [static-site]/[gatsby]/src/commands/build-html.ts:183:18
  
  - start-server.ts:120 createIndexHtml
    [static-site]/[gatsby]/src/utils/start-server.ts:120:32
  
  - start-server.ts:158 startServer
    [static-site]/[gatsby]/src/utils/start-server.ts:158:5
  
  - start-webpack-server.ts:44 startWebpackServer
    [static-site]/[gatsby]/src/services/start-webpack-server.ts:44:7
  

not finished Building development bundle - 0.041s

.browserslistrc doesn't contain not supports es6-module so I'm not sure what's going on here.