SAVEPOINT

Author: wardpeet

.eslintignore

@@ -24,3 +24,5 @@ packages/gatsby-image/withIEPolyfill/index.js
 packages/gatsby/cache-dir/commonjs/**/*
 packages/gatsby-admin/public
 packages/gatsby/gatsby-admin-public
+
+packages/gatsby-codemods/transforms/*

package.json

@@ -10,7 +10,6 @@
     "@types/bluebird": "^3.5.33",
     "@types/cache-manager": "^2.10.3",
     "@types/common-tags": "^1.8.0",
-    "@types/eslint": "^6.8.1",
     "@types/express": "^4.17.3",
     "@types/fs-extra": "^8.1.1",
     "@types/got": "^9.6.11",
@@ -25,7 +24,6 @@
     "@types/semver": "^7.3.4",
     "@types/signal-exit": "^3.0.0",
     "@types/stack-trace": "^0.0.29",
-    "@types/webpack": "^4.41.24",
     "@types/webpack-merge": "^4.1.5",
     "@typescript-eslint/eslint-plugin": "^2.34.0",
     "@typescript-eslint/parser": "^2.34.0",
@@ -161,4 +159,4 @@
   "workspaces": [
     "packages/*"
   ]
-}
+}

packages/gatsby-plugin-manifest/.babelrc

@@ -1,3 +1,7 @@
 {
-  "presets": [["babel-preset-gatsby-package", { "browser": true }]]
+  "presets": [["babel-preset-gatsby-package"]],
+  "overrides": [{
+    "test": "./src/gatsby-browser.js",
+    "presets": [["babel-preset-gatsby-package", {"browser": true}]]
+  }]
 }

packages/gatsby/cache-dir/develop-static-entry.js

@@ -104,6 +104,7 @@ export default (pagePath, callback) => {
     body: ``,
     headComponents: headComponents.concat([
       <script key={`io`} src="/socket.io/socket.io.js" />,
+      <link key="styles" rel="stylesheet" href="/commons.css" />,
     ]),
     htmlAttributes,
     bodyAttributes,

packages/gatsby/cache-dir/static-entry.js

@@ -301,9 +301,9 @@ export default (pagePath, callback) => {
         return { rel: `preload`, name: chunk }
       })
 
-      namedChunkGroups[s].assets.forEach(asset =>
-        chunks.push({ rel: `preload`, name: asset })
-      )
+      namedChunkGroups[s].assets.forEach(asset => {
+        chunks.push({ rel: `preload`, name: asset.name })
+      })
 
       const childAssets = namedChunkGroups[s].childAssets
       for (const rel in childAssets) {

packages/gatsby/package.json

@@ -20,7 +20,7 @@
     "@mikaelkristiansson/domready": "^1.0.10",
     "@nodelib/fs.walk": "^1.2.4",
     "@pieh/friendly-errors-webpack-plugin": "1.7.0-chalk-2",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.1",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
     "@reach/router": "^1.3.4",
     "@types/http-proxy": "^1.17.4",
     "@typescript-eslint/eslint-plugin": "^2.24.0",
@@ -32,7 +32,7 @@
     "axios": "^0.21.1",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.1.0",
+    "babel-loader": "^8.2.2",
     "babel-plugin-add-module-exports": "^1.0.4",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -52,7 +52,7 @@
     "copyfiles": "^2.3.0",
     "core-js": "^3.6.5",
     "cors": "^2.8.5",
-    "css-loader": "^1.0.1",
+    "css-loader": "^5.0.1",
     "date-fns": "^2.14.0",
     "debug": "^3.2.7",
     "del": "^5.1.0",
@@ -61,7 +61,7 @@
     "dotenv": "^8.2.0",
     "eslint": "^6.8.0",
     "eslint-config-react-app": "^5.2.1",
-    "eslint-loader": "^2.2.1",
+    "eslint-loader": "^4.0.2",
     "eslint-plugin-flowtype": "^3.13.0",
     "eslint-plugin-graphql": "^4.0.0",
     "eslint-plugin-import": "^2.22.0",
@@ -73,7 +73,7 @@
     "express": "^4.17.1",
     "express-graphql": "^0.9.0",
     "fastest-levenshtein": "^1.0.12",
-    "file-loader": "^1.1.11",
+    "file-loader": "^6.2.0",
     "find-cache-dir": "^3.3.1",
     "fs-exists-cached": "1.0.0",
     "fs-extra": "^8.1.0",
@@ -107,28 +107,28 @@
     "meant": "^1.0.1",
     "micromatch": "^4.0.2",
     "mime": "^2.4.6",
-    "mini-css-extract-plugin": "^0.11.2",
+    "mini-css-extract-plugin": "^1.3.4",
     "mitt": "^1.2.0",
     "mkdirp": "^0.5.1",
     "moment": "^2.27.0",
     "name-all-modules-plugin": "^1.0.1",
     "normalize-path": "^3.0.0",
-    "null-loader": "^3.0.0",
+    "null-loader": "^4.0.1",
     "opentracing": "^0.14.4",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "optimize-css-assets-webpack-plugin": "^5.0.4",
     "p-defer": "^3.0.0",
     "parseurl": "^1.3.3",
     "physical-cpu-count": "^2.0.0",
     "pnp-webpack-plugin": "^1.6.4",
     "postcss-flexbugs-fixes": "^4.2.1",
-    "postcss-loader": "^3.0.0",
+    "postcss-loader": "^4.1.0",
     "prompts": "^2.3.2",
     "prop-types": "^15.7.2",
     "query-string": "^6.13.1",
-    "raw-loader": "^0.5.1",
-    "react-dev-utils": "^4.2.3",
+    "raw-loader": "^4.0.2",
+    "react-dev-utils": "^11.0.1",
     "react-error-overlay": "^3.0.0",
-    "react-hot-loader": "^4.12.21",
+    "react-hot-loader": "^4.13.0",
     "react-refresh": "^0.8.3",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
@@ -144,29 +144,30 @@
     "stack-trace": "^0.0.10",
     "string-similarity": "^1.2.2",
     "strip-ansi": "^5.2.0",
-    "style-loader": "^0.23.1",
+    "style-loader": "^2.0.0",
     "terminal-link": "^2.1.1",
-    "terser-webpack-plugin": "^2.3.8",
+    "terser-webpack-plugin": "^5.1.1",
     "tmp": "^0.2.1",
     "true-case-path": "^2.2.1",
     "type-of": "^2.0.1",
-    "url-loader": "^1.1.2",
+    "url-loader": "^4.1.1",
     "util.promisify": "^1.0.1",
     "uuid": "3.4.0",
     "v8-compile-cache": "^1.1.2",
-    "webpack": "^4.44.1",
-    "webpack-dev-middleware": "^3.7.2",
+    "webpack": "^5.16.0",
+    "webpack-dev-middleware": "^4.1.0",
     "webpack-dev-server": "^3.11.2",
     "webpack-hot-middleware": "^2.25.0",
-    "webpack-merge": "^4.2.2",
-    "webpack-stats-plugin": "^0.3.2",
-    "webpack-virtual-modules": "^0.2.2",
+    "webpack-merge": "^5.7.3",
+    "webpack-stats-plugin": "^1.0.3",
+    "webpack-virtual-modules": "^0.4.2",
     "xstate": "^4.11.0",
     "yaml-loader": "^0.6.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.12.1",
     "@babel/runtime": "^7.12.5",
+    "@types/eslint": "^7.2.6",
     "@types/hapi__joi": "^16.0.12",
     "@types/micromatch": "^4.0.1",
     "@types/normalize-path": "^3.0.0",
@@ -176,7 +177,7 @@
     "@types/socket.io": "^2.1.4",
     "@types/string-similarity": "^3.0.0",
     "@types/tmp": "^0.2.0",
-    "@types/webpack-dev-middleware": "^3.7.1",
+    "@types/webpack-dev-middleware": "^4.1.0",
     "@types/webpack-virtual-modules": "^0.1.0",
     "babel-preset-gatsby-package": "^0.12.0-next.0",
     "cross-env": "^7.0.3",
@@ -241,8 +242,8 @@
     "remark-mdxjs": "^2.0.0-next.3"
   },
   "scripts": {
-    "build": "npm run build:types && npm run build:src && npm run build:internal-plugins && npm run build:rawfiles && npm run build:cjs",
-    "postbuild": "node scripts/output-api-file.js && yarn workspace gatsby-admin build",
+    "build": "npm run build:src && npm run build:internal-plugins && npm run build:rawfiles && npm run build:cjs",
+    "postbuild": "node scripts/output-api-file.js",
     "build:internal-plugins": "copyfiles -u 1 src/internal-plugins/**/package.json dist",
     "build:rawfiles": "copyfiles -u 1 src/internal-plugins/**/raw_* dist",
     "build:cjs": "babel cache-dir --out-dir cache-dir/commonjs --ignore \"**/__tests__\" --ignore \"**/__mocks__\"",

packages/gatsby/src/services/start-webpack-server.ts

@@ -2,9 +2,10 @@ import openurl from "better-opn"
 import report from "gatsby-cli/lib/reporter"
 import formatWebpackMessages from "react-dev-utils/formatWebpackMessages"
 import chalk from "chalk"
-import { Compiler } from "webpack"
+import webpack, { Compiler } from "webpack"
 import { isEqual } from "lodash"
 import { Stage } from "../commands/types"
+import semver from "semver"
 
 import {
   reportWebpackWarnings,
@@ -26,6 +27,8 @@ import { enqueueFlush } from "../utils/page-data"
 import mapTemplatesToStaticQueryHashes from "../utils/map-templates-to-static-query-hashes"
 import { emitter } from "../redux"
 
+const webpackMajor = semver.major(webpack.version)
+
 export async function startWebpackServer({
   program,
   app,
@@ -89,7 +92,16 @@ export async function startWebpackServer({
       // We have switched off the default Webpack output in WebpackDevServer
       // options so we are going to "massage" the warnings and errors and present
       // them in a readable focused way.
-      const messages = formatWebpackMessages(stats.toJson({}, true))
+      const jsonStats = stats.toJson({})
+      let errors = jsonStats.errors
+      let warnings = jsonStats.warnings
+
+      if (webpackMajor >= 5) {
+        errors = jsonStats.errors.map(error => error.message)
+        warnings = jsonStats.warnings.map(warning => warning.message)
+      }
+
+      const messages = formatWebpackMessages({ errors, warnings })
       const urls = prepareUrls(
         program.https ? `https` : `http`,
         program.host,
@@ -141,7 +153,6 @@ export async function startWebpackServer({
           state,
           stats.compilation
         )
-
         mapOfTemplatesToStaticQueryHashes.forEach(
           (staticQueryHashes, componentPath) => {
             if (
@@ -167,7 +178,6 @@ export async function startWebpackServer({
             }
           }
         )
-
         enqueueFlush()
       }
 

packages/gatsby/src/utils/map-templates-to-static-query-hashes.ts

@@ -2,22 +2,10 @@ import { uniqBy, List } from "lodash"
 import path from "path"
 import { slash } from "gatsby-core-utils"
 import { IGatsbyState } from "../redux/types"
-import { Stats } from "webpack"
+import webpack, { Stats, Compilation, NormalModule } from "webpack"
+import semver from "semver"
 
-interface ICompilation {
-  modules: Array<IModule>
-}
-
-interface IReason extends Omit<Stats.Reason, "module"> {
-  module: IModule
-}
-
-interface IModule extends Omit<Stats.FnModules, "identifier" | "reasons"> {
-  hasReasons: () => boolean
-  resource?: string
-  identifier: () => string
-  reasons: Array<IReason>
-}
+const webpackMajor = semver.major(webpack.version)
 
 /* When we traverse upwards, we need to know where to stop. We'll call these terminal nodes.
  * `async-requires.js` is the entry point for every page, while `api-runner-browser-plugins.js`
@@ -45,8 +33,11 @@ const entryNodes = [
  */
 export default function mapTemplatesToStaticQueryHashes(
   reduxState: IGatsbyState,
-  compilation: ICompilation
+  compilation: Compilation
 ): Map<string, Array<number>> {
+  if (webpackMajor >= 5) {
+    return new Map()
+  }
   /* The `staticQueryComponents` slice of state is useful because
    * it is a pre extracted collection of all static queries found in a Gatsby site.
    * This lets us traverse upwards from those to templates that
@@ -69,15 +60,15 @@ export default function mapTemplatesToStaticQueryHashes(
    * a Set of strings, each an absolute path of a dependent
    * of this module
    */
-  function getDeps(mod: IModule): Set<string> {
+  function getDeps(mod: NormalModule): Set<string> {
     const staticQueryModuleComponentPath = mod.resource
     const result = new Set<string>()
     const seen = new Set<string>(
       staticQueryModuleComponentPath ? [staticQueryModuleComponentPath] : []
     )
 
     // This is the body of the recursively called function
-    function getDepsRec(m: IModule, seen: Set<string>): Set<string> {
+    function getDepsRec(m: NormalModule, seen: Set<string>): Set<string> {
       // Reasons in webpack are literally reasons of why this module was included in the tree
       const hasReasons = m.hasReasons()
 
@@ -93,7 +84,7 @@ export default function mapTemplatesToStaticQueryHashes(
 
       // These are non terminal dependents and hence modules that need
       // further upward traversal
-      const nonTerminalDependents: List<IModule> = m.reasons
+      const nonTerminalDependents: List<NormalModule> = m.reasons
         .filter(r => {
           const dependentModule = r.module
           const isTerminal = entryNodes.some(entryNode =>
@@ -136,8 +127,8 @@ export default function mapTemplatesToStaticQueryHashes(
     // componentPaths are slashed by gatsby-core-utils we undo it
     const nonSlashedPath = path.resolve(componentPath)
 
-    const staticQueryComponentModule = modules.find(
-      m => m.resource === nonSlashedPath
+    const staticQueryComponentModule: NormalModule = Array.from(modules).find(
+      m => (m as NormalModule)?.resource === nonSlashedPath
     )
     const dependants = staticQueryComponentModule
       ? getDeps(staticQueryComponentModule)
@@ -208,6 +199,6 @@ function mapComponentsToStaticQueryHashes(
   return map
 }
 
-function isGatsbyBrowser(m: IModule): boolean {
+function isGatsbyBrowser(m: NormalModule): boolean {
   return !!m?.resource?.includes(`gatsby-browser.js`)
 }

packages/gatsby/src/utils/start-server.ts

@@ -1,7 +1,5 @@
 import webpackHotMiddleware from "webpack-hot-middleware"
-import webpackDevMiddleware, {
-  WebpackDevMiddleware,
-} from "webpack-dev-middleware"
+import webpackDevMiddleware from "webpack-dev-middleware"
 import got from "got"
 import webpack from "webpack"
 import express from "express"
@@ -68,15 +66,6 @@ export interface IWebpackWatchingPauseResume extends webpack.Watching {
   resume: () => void
 }
 
-// context seems to be public, but not documented API
-// see https://github.com/webpack/webpack-dev-middleware/issues/656
-type PatchedWebpackDevMiddleware = WebpackDevMiddleware &
-  express.RequestHandler & {
-    context: {
-      watching: IWebpackWatchingPauseResume
-    }
-  }
-
 export async function startServer(
   program: IProgram,
   app: Express,
@@ -340,13 +329,11 @@ module.exports = {
   // We serve by default an empty index.html that sets up the dev environment.
   app.use(developStatic(`public`, { index: false }))
 
-  const webpackDevMiddlewareInstance = (webpackDevMiddleware(compiler, {
-    logLevel: `silent`,
+  const webpackDevMiddlewareInstance = webpackDevMiddleware(compiler, {
     publicPath: devConfig.output.publicPath,
-    watchOptions: devConfig.devServer ? devConfig.devServer.watchOptions : null,
     stats: `errors-only`,
     serverSideRender: true,
-  }) as unknown) as PatchedWebpackDevMiddleware
+  })
 
   app.use(webpackDevMiddlewareInstance)
 

packages/gatsby/src/utils/webpack-error-utils.ts

@@ -1,5 +1,5 @@
 import reporter from "gatsby-cli/lib/reporter"
-import { Stats } from "webpack"
+import { Stats, WebpackError } from "webpack"
 import { IMatch } from "../types"
 import { Stage as StageEnum } from "../commands/types"
 
@@ -100,7 +100,7 @@ const transformWebpackError = (
 
 export const structureWebpackErrors = (
   stage: StageEnum,
-  webpackError: any
+  webpackError: WebpackError
 ): Array<ITransformedWebpackError> | ITransformedWebpackError => {
   if (Array.isArray(webpackError)) {
     return webpackError.map(e => transformWebpackError(stage, e))