feat: upgrade to gatsby 3

Author: chriswhong

.eslintrc

@@ -20,7 +20,10 @@
   "rules": {
     "react/prop-types": "off",
     "template-tag-spacing": "off",
-    "no-unexpected-multiline": "off"
+    "no-unexpected-multiline": "off",
+    "react/display-name": "off",
+    "no-unused-vars": "warn",
+    "no-multiple-empty-lines": "warn"
   },
   "settings": {
     "react": {

gatsby-config.js

@@ -2,8 +2,23 @@ require('dotenv').config()
 const queries = require('./src/utils/algolia')
 const config = require('./config')
 const plugins = [
-  'gatsby-plugin-eslint',
-  'gatsby-plugin-sass',
+  {
+    resolve: 'gatsby-plugin-eslint',
+    options: {
+      stages: ['develop'],
+      extensions: ['js', 'jsx'],
+      exclude: ['node_modules', '.cache', 'public']
+    }
+  },
+  {
+    resolve: 'gatsby-plugin-sass',
+    options: {
+      postCssPlugins: [
+        require('tailwindcss'),
+        require('./tailwind.config.js')
+      ]
+    }
+  },
   'gatsby-plugin-netlify',
   'gatsby-plugin-sitemap',
   'gatsby-plugin-sharp',

gatsby-node.js

@@ -98,29 +98,41 @@ exports.createPages = ({ graphql, actions }) => {
   })
 }
 
-exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
-  const config = {
-    resolve: {
-      modules: [path.resolve(__dirname, 'src'), 'node_modules'],
-      alias: {
-        $components: path.resolve(__dirname, 'src/components'),
-        buble: '@philpl/buble' // to reduce bundle size
-      }
-    }
-  }
+exports.onCreateWebpackConfig = ({ stage, loaders, actions, getConfig }) => {
+  const config = getConfig()
+
+  config.resolve.modules = [path.resolve(__dirname, 'src'), 'node_modules']
+  config.resolve.alias.$components = path.resolve(__dirname, 'src/components')
+  config.resolve.alias.buble = '@philpl/buble'
 
   if (stage === 'build-html' || stage === 'develop-html') {
-    config.module = {
-      rules: [
-        {
-          test: /mapbox-gl/,
-          use: loaders.null()
-        }
-      ]
-    }
+    config.module.rules.push({
+      test: /mapbox-gl/,
+      use: loaders.null()
+    })
+  }
+
+  // required for using redoc after the upgrade to gatsby v3
+  config.resolve.fallback = {
+    buffer: require.resolve('buffer/'),
+    events: require.resolve('events/'),
+    fs: require.resolve('browserify-fs'),
+    http: require.resolve('http-browserify'),
+    path: require.resolve('path-browserify'),
+    stream: require.resolve('stream-browserify'),
+    util: require.resolve('util/')
   }
 
-  actions.setWebpackConfig(config)
+  // this is needed for redoc, which uses a different version of core-js from gatsby
+  // see https://github.com/gatsbyjs/gatsby/issues/17136#issuecomment-568036690
+  const coreJs2config = config.resolve.alias['core-js']
+  delete config.resolve.alias['core-js']
+  config.resolve.alias['core-js/modules'] = `${coreJs2config}/modules`
+  try {
+    config.resolve.alias['core-js/es'] = path.dirname(require.resolve('core-js/es'))
+  } catch (err) { console.error(err) }
+
+  actions.replaceWebpackConfig(config)
 }
 
 exports.onCreateBabelConfig = ({ actions }) => {

package.json

@@ -5,7 +5,8 @@
   "dependencies": {
     "@babel/plugin-proposal-export-default-from": "7.7.4",
     "@emotion/core": "10.0.22",
-    "@emotion/styled": "10.0.23",
+    "@emotion/react": "11.4.0",
+    "@emotion/styled": "11.3.0",
     "@emotion/styled-base": "10.0.24",
     "@fortawesome/fontawesome-svg-core": "1.2.26",
     "@fortawesome/free-brands-svg-icons": "5.12.0",
@@ -19,48 +20,56 @@
     "@playlyfe/gql": "2.6.2",
     "@turf/turf": "5.1.6",
     "algoliasearch": "3.35.1",
+    "autoprefixer": "10.3.1",
+    "babel-eslint": "10.1.0",
     "bootstrap": "4.4.1",
+    "browserify-fs": "1.0.0",
+    "core-js": "3.6.5",
     "d3": "5.15.0",
     "dotenv": "8.2.0",
     "emotion": "10.0.23",
     "emotion-server": "10.0.17",
     "emotion-theming": "10.0.19",
-    "gatsby": "2.18.18",
+    "eslint-webpack-plugin": "2.5.4",
+    "gatsby": "3.9.1",
     "gatsby-cli": "2.8.26",
     "gatsby-link": "2.2.27",
     "gatsby-plugin-algolia": "0.5.0",
-    "gatsby-plugin-catch-links": "2.1.21",
-    "gatsby-plugin-emotion": "4.1.18",
-    "gatsby-plugin-eslint": "2.0.8",
+    "gatsby-plugin-catch-links": "3.9.0",
+    "gatsby-plugin-emotion": "6.9.0",
+    "gatsby-plugin-eslint": "3.0.0",
     "gatsby-plugin-gtag": "1.0.12",
     "gatsby-plugin-layout": "1.1.18",
     "gatsby-plugin-manifest": "2.2.33",
     "gatsby-plugin-mdx": "1.0.61",
-    "gatsby-plugin-netlify": "2.1.31",
+    "gatsby-plugin-netlify": "3.9.0",
     "gatsby-plugin-offline": "3.0.29",
-    "gatsby-plugin-react-helmet": "3.1.18",
+    "gatsby-plugin-react-helmet": "4.9.0",
     "gatsby-plugin-remove-serviceworker": "1.0.0",
-    "gatsby-plugin-sass": "2.1.27",
+    "gatsby-plugin-sass": "4.9.0",
     "gatsby-plugin-segment-analytics": "0.2.1",
     "gatsby-plugin-sharp": "2.3.7",
-    "gatsby-plugin-sitemap": "2.2.24",
+    "gatsby-plugin-sitemap": "4.5.0",
     "gatsby-remark-autolink-headers": "2.1.22",
     "gatsby-remark-copy-linked-files": "2.1.33",
     "gatsby-remark-images": "3.1.37",
-    "gatsby-source-filesystem": "2.1.42",
+    "gatsby-source-filesystem": "3.9.0",
     "gatsby-transformer-remark": "2.6.42",
     "graphql": "14.5.8",
+    "http-browserify": "1.7.0",
     "is-absolute-url": "3.0.3",
     "lodash.flatten": "4.4.0",
     "lodash.startcase": "4.4.0",
     "mapbox-gl": "1.7.0",
+    "mobx": "4.2.0",
     "moment": "2.24.0",
     "node-sass": "4.13.1",
     "numeral": "2.0.6",
     "papaparse": "5.2.0",
+    "path-browserify": "1.0.1",
     "react": "16.12.0",
     "react-bootstrap": "1.0.0-beta.16",
-    "react-dom": "16.12.0",
+    "react-dom": "16.13.1",
     "react-feather": "2.0.3",
     "react-github-btn": "1.1.1",
     "react-helmet": "5.2.1",
@@ -69,8 +78,11 @@
     "react-instantsearch-dom": "6.0.0",
     "react-live": "2.2.2",
     "react-loadable": "5.5.0",
-    "styled-components": "4.4.1",
-    "styled-icons": "9.0.1"
+    "redoc": "2.0.0-rc.55",
+    "styled-components": "5.2.0",
+    "styled-icons": "9.0.1",
+    "tailwindcss": "2.2.4",
+    "yaml": "1.10.2"
   },
   "license": "MIT",
   "main": "n/a",
@@ -79,12 +91,13 @@
     "build": "gatsby build --prefix-paths"
   },
   "devDependencies": {
+    "eslint": "7.31.0",
     "eslint-config-standard": "14.1.0",
     "eslint-plugin-import": "2.19.1",
     "eslint-plugin-node": "11.0.0",
     "eslint-plugin-promise": "4.2.1",
     "eslint-plugin-standard": "4.0.1",
-    "gatsby-plugin-remove-trailing-slashes": "2.1.17",
+    "gatsby-plugin-remove-trailing-slashes": "3.9.0",
     "prism-react-renderer": "1.0.2"
   }
 }

src/pages/jobs/index.js

@@ -1,6 +1,5 @@
 import React from 'react'
-import { StaticQuery } from 'gatsby'
-
+import { StaticQuery, graphql } from 'gatsby'
 import JobRow from '../../components/JobRow'
 import Head from '../../components/Head'
 import ExternalLink from '../../components/ExternalLink'