Updated To Gatsby v3

gatsby logo

graphql logo react logo


The site is now running Gatsby v3 🎉

Upgrading was relatively easy

Gatsby v3 pull request on github

New Features

Fast Refresh

Fast Refresh is an implementation of Hot Reloading with full support from React.
It replaces unofficial solutions like react-hot-loader.

📝 Fast Refresh in Gatsby Docs

Updated Dependencies

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

Webpack 5

Key changes:

  • Improved build performance with Persistent Caching
  • Improved Long-Term Caching with better algorithms and defaults
  • Improved bundle size with better Tree Shaking and Code Generation
  • Improved compatibility with the web platform
  • ECMAScript features/syntax used in generated code

Problems

gatsby-plugin-netlify

There was a problem with this plugin so I ended up disabling it temporarily.

 ERROR

(node:21015) [DEP_WEBPACK_COMPILATION_NORMAL_MODULE_LOADER_HOOK] DeprecationWarning:
Compilation.hooks.normalModuleLoader was moved to NormalModule.getCompilationHooks(compilation).loader
-'gatsby-plugin-netlify',
+// disabled due to bug with webpack
+// 'gatsby-plugin-netlify',

gatsby-plugin-netlify Automatically generates a _headers file and a _redirects file at the root of the public folder to configure HTTP headers and redirects on Netlify.

Looking at the plugin it's probably not that useful & a workaround would be to add headers to netlify.toml

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-XSS-Protection = "1; mode=block"
    X-Content-Type-Options = "nosniff"
    Referrer-Policy = "same-origin"

The source for the site is available on github.

equk-gatsby