feat(gatsby): upgrade webpack to version 5

e2e-tests/development-runtime/cypress/integration/eslint-rules/limited-exports-page-templates.js

@@ -1,14 +1,21 @@
 if (Cypress.env("HOT_LOADER") === `fast-refresh`) {
   describe(`limited-exports-page-templates`, () => {
-    it(`should log warning to console for invalid export`, () => {
+    // Skipped because HMR not show warnings because of https://github.com/webpack-contrib/webpack-hot-middleware/pull/397
+    it.skip(`should log warning to console for invalid export`, () => {
       cy.visit(`/eslint-rules/limited-exports-page-templates`, {
         onBeforeLoad(win) {
-          cy.stub(win.console, 'log').as(`consoleLog`)
-        }
+          cy.stub(win.console, "log").as(`consoleLog`)
+        },
       }).waitForRouteChange()
 
-      cy.get(`@consoleLog`).should(`be.calledWithMatch`, /15:1  warning  In page templates only a default export of a valid React component and the named export of a page query is allowed./i)
-      cy.get(`@consoleLog`).should(`not.be.calledWithMatch`, /17:1  warning  In page templates only a default export of a valid React component and the named export of a page query is allowed./i)
+      cy.get(`@consoleLog`).should(
+        `be.calledWithMatch`,
+        /15:1  warning  In page templates only a default export of a valid React component and the named export of a page query is allowed./i
+      )
+      cy.get(`@consoleLog`).should(
+        `not.be.calledWithMatch`,
+        /17:1  warning  In page templates only a default export of a valid React component and the named export of a page query is allowed./i
+      )
     })
   })
 }

e2e-tests/development-runtime/cypress/integration/eslint-rules/no-anonymous-exports-page-templates.js

@@ -1,22 +1,29 @@
 if (Cypress.env("HOT_LOADER") === `fast-refresh`) {
   describe(`no-anonymous-exports-page-templates`, () => {
-    it(`should log warning to console for arrow functions`, () => {
+    // Skipped because HMR not show warnings because of https://github.com/webpack-contrib/webpack-hot-middleware/pull/397
+    it.skip(`should log warning to console for arrow functions`, () => {
       cy.visit(`/eslint-rules/no-anonymous-exports-page-templates`, {
         onBeforeLoad(win) {
-          cy.stub(win.console, 'log').as(`consoleLog`)
-        }
+          cy.stub(win.console, "log").as(`consoleLog`)
+        },
       }).waitForRouteChange()
 
-      cy.get(`@consoleLog`).should(`be.calledWithMatch`, /Anonymous arrow functions cause Fast Refresh to not preserve local component state./i)
+      cy.get(`@consoleLog`).should(
+        `be.calledWithMatch`,
+        /Anonymous arrow functions cause Fast Refresh to not preserve local component state./i
+      )
     })
-    it(`should log warning to console for function declarations`, () => {
+    it.skip(`should log warning to console for function declarations`, () => {
       cy.visit(`/eslint-rules/no-anonymous-exports-page-templates-function`, {
         onBeforeLoad(win) {
-          cy.stub(win.console, 'log').as(`consoleLog`)
-        }
+          cy.stub(win.console, "log").as(`consoleLog`)
+        },
       }).waitForRouteChange()
 
-      cy.get(`@consoleLog`).should(`be.calledWithMatch`, /Anonymous function declarations cause Fast Refresh to not preserve local component state./i)
+      cy.get(`@consoleLog`).should(
+        `be.calledWithMatch`,
+        /Anonymous function declarations cause Fast Refresh to not preserve local component state./i
+      )
     })
   })
 }

e2e-tests/development-runtime/gatsby-config.js

@@ -6,6 +6,9 @@ module.exports = {
       twitter: `kylemathews`,
     },
   },
+  flags: {
+    DEV_SSR: false,
+  },
   plugins: [
     `gatsby-plugin-react-helmet`,
     {

e2e-tests/development-runtime/src/components/static-query/use-static-query/destructuring.js

@@ -12,7 +12,7 @@ function DestructuringQuery(props) {
   return (
     <ul {...props}>
       {plugins.map(plugin => (
-        <li key={plugin.name}>
+        <li key={plugin.id}>
           {plugin.name}: {plugin.version}
         </li>
       ))}
@@ -25,6 +25,7 @@ const variableQuery = graphql`
     allSitePlugin {
       edges {
         node {
+          id
           name
           version
           pluginFilepath

integration-tests/artifacts/gatsby-browser.js

@@ -2,12 +2,14 @@ const React = require(`react`)
 const { useMoreInfoQuery } = require("./src/hooks/use-more-info-query")
 const Github = require(`./src/components/github`).default
 
-exports.wrapRootElement = ({ element }) => (
-  <>
-    <Github />
-    {element}
-  </>
-)
+exports.wrapRootElement = ({ element }) => {
+  return (
+    <>
+      <Github />
+      {element}
+    </>
+  )
+}
 
 function PageWrapper({ children }) {
   const data = useMoreInfoQuery()

integration-tests/gatsby-cli/__tests__/build-errors.js

@@ -34,7 +34,9 @@ describe(`gatsby build (errors)`, () => {
       `WebpackError: TypeError: Cannot read property 'bar' of null`
     )
     logs.should.contain(`- index.js:5`)
-    logs.should.contain(`  src/pages/index.js:5:5`)
+    logs.should.contain(
+      `  gatsby-starter-default-build-errors/src/pages/index.js:5:5`
+    )
 
     expect(code).not.toBe(0)
   })

integration-tests/gatsby-cli/__tests__/build-ssr-errors.js

@@ -35,7 +35,9 @@ describe(`gatsby build (SSR errors)`, () => {
     // // Stack trace
     logs.should.contain(`WebpackError: ReferenceError: window is not defined`)
     logs.should.contain(`- gatsby-ssr.js:3`)
-    logs.should.contain(`  gatsby-ssr.js:3:3`)
+    logs.should.contain(
+      `  gatsby-starter-default-build-ssr-errors/gatsby-ssr.js:3:3`
+    )
 
     expect(code).not.toBe(0)
   })

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-admin/gatsby-node.js

@@ -1,7 +1,9 @@
 exports.onCreateWebpackConfig = ({ actions }) => {
     actions.setWebpackConfig({
-      node: {
-        fs: 'empty'
+      resolve: {
+        alias: {
+          path: require.resolve("path-browserify")
+        }
       }
     })
-  }
+  }

packages/gatsby-admin/package.json

@@ -29,6 +29,7 @@
     "ncp": "^2.0.0",
     "nodemon": "^2.0.7",
     "normalize.css": "^8.0.1",
+    "path-browserify": "^1.0.1",
     "prism-react-renderer": "^1.1.1",
     "query-string": "^6.13.8",
     "react": "^16.12.0",
@@ -55,4 +56,4 @@
     "postbuild": "ncp public ../gatsby/gatsby-admin-public",
     "watch": "nodemon --watch src --ext js,ts,tsx,json --exec \"yarn run build\""
   }
-}
+}

packages/gatsby/cache-dir/__tests__/__snapshots__/static-entry.js.snap

@@ -6,11 +6,11 @@ exports[`develop-static-entry SSR: onPreRenderHTML can be used to replace postBo
 
 exports[`develop-static-entry SSR: onPreRenderHTML can be used to replace preBodyComponents 1`] = `"<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><meta name=\\"note\\" content=\\"environment=development\\"/><script src=\\"/socket.io/socket.io.js\\"></script></head><body><div> div3 </div><div> div2 </div><div> div1 </div><div id=\\"___gatsby\\"><div style=\\"outline:none\\" tabindex=\\"-1\\" id=\\"gatsby-focus-wrapper\\"></div><div id=\\"gatsby-announcer\\" style=\\"position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0\\" aria-live=\\"assertive\\" aria-atomic=\\"true\\"></div></div><script src=\\"/polyfill.js\\" nomodule=\\"\\"></script><script src=\\"/commons.js\\"></script></body></html>"`;
 
-exports[`develop-static-entry onPreRenderHTML can be used to replace headComponents 1`] = `"<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><style> .style3  </style><style> .style2  </style><style> .style1  </style><meta name=\\"note\\" content=\\"environment=development\\"/><script src=\\"/socket.io/socket.io.js\\"></script></head><body><div id=\\"___gatsby\\"></div><script src=\\"/polyfill.js\\" nomodule=\\"\\"></script><script src=\\"/commons.js\\"></script></body></html>"`;
+exports[`develop-static-entry onPreRenderHTML can be used to replace headComponents 1`] = `"<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><style> .style3  </style><style> .style2  </style><style> .style1  </style><meta name=\\"note\\" content=\\"environment=development\\"/><script src=\\"/socket.io/socket.io.js\\"></script><link rel=\\"stylesheet\\" href=\\"/commons.css\\"/></head><body><div id=\\"___gatsby\\"></div><script src=\\"/polyfill.js\\" nomodule=\\"\\"></script><script src=\\"/commons.js\\"></script></body></html>"`;
 
-exports[`develop-static-entry onPreRenderHTML can be used to replace postBodyComponents 1`] = `"<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><meta name=\\"note\\" content=\\"environment=development\\"/><script src=\\"/socket.io/socket.io.js\\"></script></head><body><div id=\\"___gatsby\\"></div><div> div3 </div><div> div2 </div><div> div1 </div><script src=\\"/polyfill.js\\" nomodule=\\"\\"></script><script src=\\"/commons.js\\"></script></body></html>"`;
+exports[`develop-static-entry onPreRenderHTML can be used to replace postBodyComponents 1`] = `"<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><meta name=\\"note\\" content=\\"environment=development\\"/><script src=\\"/socket.io/socket.io.js\\"></script><link rel=\\"stylesheet\\" href=\\"/commons.css\\"/></head><body><div id=\\"___gatsby\\"></div><div> div3 </div><div> div2 </div><div> div1 </div><script src=\\"/polyfill.js\\" nomodule=\\"\\"></script><script src=\\"/commons.js\\"></script></body></html>"`;
 
-exports[`develop-static-entry onPreRenderHTML can be used to replace preBodyComponents 1`] = `"<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><meta name=\\"note\\" content=\\"environment=development\\"/><script src=\\"/socket.io/socket.io.js\\"></script></head><body><div> div3 </div><div> div2 </div><div> div1 </div><div id=\\"___gatsby\\"></div><script src=\\"/polyfill.js\\" nomodule=\\"\\"></script><script src=\\"/commons.js\\"></script></body></html>"`;
+exports[`develop-static-entry onPreRenderHTML can be used to replace preBodyComponents 1`] = `"<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><meta name=\\"note\\" content=\\"environment=development\\"/><script src=\\"/socket.io/socket.io.js\\"></script><link rel=\\"stylesheet\\" href=\\"/commons.css\\"/></head><body><div> div3 </div><div> div2 </div><div> div1 </div><div id=\\"___gatsby\\"></div><script src=\\"/polyfill.js\\" nomodule=\\"\\"></script><script src=\\"/commons.js\\"></script></body></html>"`;
 
 exports[`static-entry onPreRenderHTML can be used to replace headComponents 1`] = `"<!DOCTYPE html><html><head><meta charSet=\\"utf-8\\"/><meta http-equiv=\\"x-ua-compatible\\" content=\\"ie=edge\\"/><meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"/><link as=\\"fetch\\" rel=\\"preload\\" href=\\"/page-data/app-data.json\\" crossorigin=\\"anonymous\\"/><link as=\\"fetch\\" rel=\\"preload\\" href=\\"/page-data/about/page-data.json\\" crossorigin=\\"anonymous\\"/><style> .style3  </style><style> .style2  </style><style> .style1  </style><meta name=\\"generator\\" content=\\"Gatsby 2.0.0\\"/></head><body><div id=\\"___gatsby\\"><div style=\\"outline:none\\" tabindex=\\"-1\\" id=\\"gatsby-focus-wrapper\\"></div><div id=\\"gatsby-announcer\\" style=\\"position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0\\" aria-live=\\"assertive\\" aria-atomic=\\"true\\"></div></div><script id=\\"gatsby-script-loader\\">/*<![CDATA[*/window.pagePath=\\"/about/\\";/*]]>*/</script><script id=\\"gatsby-chunk-mapping\\">/*<![CDATA[*/window.___chunkMapping={};/*]]>*/</script></body></html>"`;
 

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

@@ -104,6 +104,7 @@ export default ({ pagePath }) => {
     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/ssr-develop-static-entry.js

@@ -136,7 +136,7 @@ export default (pagePath, isClientOnlyPage, callback) => {
         })
 
         namedChunkGroups[chunkKey].assets.forEach(asset =>
-          chunks.push({ rel: `preload`, name: asset })
+          chunks.push({ rel: `preload`, name: asset.name })
         )
 
         const childAssets = namedChunkGroups[chunkKey].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",
@@ -74,7 +74,7 @@
     "express-graphql": "^0.9.0",
     "fastest-levenshtein": "^1.0.12",
     "fastq": "^1.10.0",
-    "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",
@@ -109,29 +109,30 @@
     "memoizee": "^0.4.15",
     "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",
+    "css-minimizer-webpack-plugin": "^1.2.0",
     "p-defer": "^3.0.0",
     "parseurl": "^1.3.3",
     "physical-cpu-count": "^2.0.0",
     "pnp-webpack-plugin": "^1.6.4",
+    "postcss": "8.2.5",
     "postcss-flexbugs-fixes": "^4.2.1",
-    "postcss-loader": "^3.0.0",
+    "postcss-loader": "^5.0.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-refresh": "^0.8.3",
+    "react-hot-loader": "^4.13.0",
+    "react-refresh": "^0.9.0",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
     "semver": "^7.3.2",
@@ -146,28 +147,29 @@
     "stack-trace": "^0.0.10",
     "string-similarity": "^1.2.2",
     "strip-ansi": "^5.2.0",
-    "style-loader": "^0.23.1",
-    "terser-webpack-plugin": "^2.3.8",
+    "style-loader": "^2.0.0",
+    "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": "^2.2.0",
-    "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",
@@ -177,7 +179,6 @@
     "@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-virtual-modules": "^0.1.0",
     "babel-preset-gatsby-package": "^1.0.0-next.0",
     "cross-env": "^7.0.3",
@@ -259,4 +260,4 @@
   "yargs": {
     "boolean-negation": false
   }
-}
+}