gatsbyjs · KyleAMathews · Sep 2, 2020 · Sep 3, 2020 · Sep 3, 2020 · Sep 8, 2020
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -271,6 +271,12 @@ jobs:
       - e2e-test:
           test_path: integration-tests/artifacts
 
+  integration_tests_ssr:
+    executor: node
+    steps:
+      - e2e-test:
+          test_path: integration-tests/ssr
+
   e2e_tests_path-prefix:
     <<: *e2e-executor
     environment:
@@ -582,6 +588,8 @@ workflows:
           <<: *e2e-test-workflow
       - integration_tests_artifacts:
           <<: *e2e-test-workflow
+      - integration_tests_ssr:
+          <<: *e2e-test-workflow
       - integration_tests_gatsby_cli:
           requires:
             - bootstrap

diff --git a/integration-tests/ssr/LICENSE b/integration-tests/ssr/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 gatsbyjs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/integration-tests/ssr/README.md b/integration-tests/ssr/README.md
@@ -0,0 +1 @@
+## SSR test suite
diff --git a/integration-tests/ssr/__tests__/__snapshots__/ssr.js.snap b/integration-tests/ssr/__tests__/__snapshots__/ssr.js.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SSR is run for a page when it is requested 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 style=\\"outline:none\\" tabindex=\\"-1\\" id=\\"gatsby-focus-wrapper\\"><div>Hello world</div></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[`SSR it generates an error page correctly 1`] = `
+"<title>Develop SSR Error</title><h1>Error<h1>
+        <h2>The page didn't SSR correctly</h2>
+        <ul>
+          <li><strong>URL path:</strong> <code>/bad-page/</code></li>
+          <li><strong>File path:</strong> <code>src/pages/bad-page.js</code></li>
+        </ul>
+        <h3>error message</h3>
+        <p><code>window is not defined</code></p>
+        <pre style=\\"background:#fdfaf6;padding:8px;\\"><span style=\\"font-weight:normal;opacity:1;color:#452475;background:#fdfaf6;\\"> <span style=\\"color:#527713;\\"> 2 | </span></span>
+<span style=\\"font-weight:normal;opacity:1;color:#452475;background:#fdfaf6;\\"> <span style=\\"color:#527713;\\"> 3 | </span><span style=\\"color:#006500;\\">const</span> <span style=\\"color:#DB3A00;\\">Component</span> <span style=\\"color:#DB3A00;\\">=</span> () <span style=\\"color:#DB3A00;\\">=></span> {</span>
+<span style=\\"font-weight:normal;opacity:1;color:#452475;background:#fdfaf6;\\"><span style=\\"color:#096fb3;\\"><span style=\\"font-weight:bold;\\">></span></span><span style=\\"color:#527713;\\"> 4 | </span>  <span style=\\"color:#006500;\\">const</span> a <span style=\\"color:#DB3A00;\\">=</span> window<span style=\\"color:#DB3A00;\\">.</span>width</span>
+<span style=\\"font-weight:normal;opacity:1;color:#452475;background:#fdfaf6;\\"> <span style=\\"color:#527713;\\">   | </span>            <span style=\\"color:#096fb3;\\"><span style=\\"font-weight:bold;\\">^</span></span></span>
+<span style=\\"font-weight:normal;opacity:1;color:#452475;background:#fdfaf6;\\"> <span style=\\"color:#527713;\\"> 5 | </span></span>
+<span style=\\"font-weight:normal;opacity:1;color:#452475;background:#fdfaf6;\\"> <span style=\\"color:#527713;\\"> 6 | </span>  <span style=\\"color:#006500;\\">return</span> <span style=\\"color:#DB3A00;\\"><</span><span style=\\"color:#DB3A00;\\">div</span><span style=\\"color:#DB3A00;\\">></span>hi<span style=\\"color:#DB3A00;\\"><</span><span style=\\"color:#DB3A00;\\">/</span><span style=\\"color:#DB3A00;\\">div</span><span style=\\"color:#DB3A00;\\">></span></span>
+<span style=\\"font-weight:normal;opacity:1;color:#452475;background:#fdfaf6;\\"> <span style=\\"color:#527713;\\"> 7 | </span>}</span></pre>"
+`;
diff --git a/integration-tests/ssr/__tests__/fixtures/bad-page.js b/integration-tests/ssr/__tests__/fixtures/bad-page.js
@@ -0,0 +1,9 @@
+import React from "react"
+
+const Component = () => {
+  const a = window.width
+
+  return <div>hi</div>
+}
+
+export default Component
diff --git a/integration-tests/ssr/__tests__/ssr.js b/integration-tests/ssr/__tests__/ssr.js
@@ -0,0 +1,61 @@
+const fetch = require(`node-fetch`)
+const { execFile } = require("child_process")
+const fs = require(`fs-extra`)
+const path = require(`path`)
+
+describe(`SSR`, () => {
+  test(`is run for a page when it is requested`, async () => {
+    const html = await fetch(`http://localhost:8000/`).then(res => res.text())
+
+    expect(html).toMatchSnapshot()
+  })
+  test(`dev & build outputs match`, async () => {
+    const childProcess = execFile(`yarn`, [`test-output`])
+    let exitCode
+    await new Promise(resolve => {
+      childProcess.on(`exit`, code => {
+        exitCode = { exitCode: code }
+        resolve()
+      })
+    })
+
+    expect(exitCode).toEqual({ exitCode: 0 })
+  })
+  test(`it generates an error page correctly`, async () => {
+    const src = path.join(__dirname, `/fixtures/bad-page.js`)
+    const dest = path.join(__dirname, `../src/pages/bad-page.js`)
+    fs.copySync(src, dest)
+
+    const pageUrl = `http://localhost:8000/bad-page/`
+    await new Promise(resolve => {
+      const testInterval = setInterval(() => {
+        fetch(pageUrl).then(res => {
+          if (res.status !== 404) {
+            clearInterval(testInterval)
+            resolve()
+          }
+        })
+      }, 1000)
+    })
+
+    const rawDevHtml = await fetch(
+      `http://localhost:8000/bad-page/`
+    ).then(res => res.text())
+    expect(rawDevHtml).toMatchSnapshot()
+    fs.remove(dest)
+
+    // After the page is gone, it'll 404.
+    await new Promise(resolve => {
+      setTimeout(() => {
+        const testInterval = setInterval(() => {
+          fetch(pageUrl).then(res => {
+            if (res.status === 404) {
+              clearInterval(testInterval)
+              resolve()
+            }
+          })
+        }, 400)
+      }, 400)
+    })
+  })
+})
diff --git a/integration-tests/ssr/gatsby-config.js b/integration-tests/ssr/gatsby-config.js
@@ -0,0 +1,10 @@
+module.exports = {
+  siteMetadata: {
+    title: `Hello world`,
+    author: `Sid Chatterjee`,
+    twitter: `chatsidhartha`,
+    github: `sidharthachatterjee`,
+    moreInfo: `Sid is amazing`,
+  },
+  plugins: [],
+}
diff --git a/integration-tests/ssr/jest.config.js b/integration-tests/ssr/jest.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  testPathIgnorePatterns: [`/node_modules/`, `__tests__/fixtures`, `.cache`],
+}
diff --git a/integration-tests/ssr/package.json b/integration-tests/ssr/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "ssr",
+  "description": "A simplified bare-bones starter for Gatsby.",
+  "version": "0.1.0",
+  "author": "Sid Chatterjee",
+  "bugs": {
+    "url": "https://github.com/gatsbyjs/gatsby/issues"
+  },
+  "dependencies": {
+    "gatsby": "2.24.82-dev-1603131999086",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0"
+  },
+  "devDependencies": {
+    "cross-env": "^5.0.2",
+    "fs-extra": "^9.0.0",
+    "jest": "^24.0.0",
+    "jest-cli": "^24.0.0",
+    "jest-diff": "^24.0.0",
+    "npm-run-all": "4.1.5",
+    "start-server-and-test": "^1.11.3"
+  },
+  "license": "MIT",
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gatsbyjs/gatsby-starter-hello-world"
+  },
+  "scripts": {
+    "build": "gatsby build",
+    "clean": "gatsby clean",
+    "develop": "gatsby develop",
+    "serve": "gatsby serve",
+    "start-dev-server": "start-server-and-test develop http://localhost:8000 test:jest",
+    "test": "cross-env GATSBY_EXPERIMENTAL_DEV_SSR=true npm-run-all -s build start-dev-server",
+    "test-output": "node test-output.js",
+    "test:jest": "jest --config=jest.config.js --runInBand"
+  }
+}
diff --git a/integration-tests/ssr/src/pages/hi.js b/integration-tests/ssr/src/pages/hi.js
@@ -0,0 +1,15 @@
+import React from "react"
+import { useStaticQuery, graphql } from "gatsby"
+
+export default function Inline() {
+  const { site } = useStaticQuery(graphql`
+    {
+      site {
+        siteMetadata {
+          title
+        }
+      }
+    }
+  `)
+  return <div>hi1 {site.siteMetadata.title}</div>
+}
diff --git a/integration-tests/ssr/src/pages/hi2.js b/integration-tests/ssr/src/pages/hi2.js
@@ -0,0 +1,15 @@
+import React from "react"
+import { useStaticQuery, graphql } from "gatsby"
+
+export default function Inline() {
+  const { site } = useStaticQuery(graphql`
+    {
+      site {
+        siteMetadata {
+          title
+        }
+      }
+    }
+  `)
+  return <div>hi2 {site.siteMetadata.title}</div>
+}
diff --git a/integration-tests/ssr/src/pages/hi3.js b/integration-tests/ssr/src/pages/hi3.js
@@ -0,0 +1,15 @@
+import React from "react"
+import { useStaticQuery, graphql } from "gatsby"
+
+export default function Inline() {
+  const { site } = useStaticQuery(graphql`
+    {
+      site {
+        siteMetadata {
+          title
+        }
+      }
+    }
+  `)
+  return <div> hi3{site.siteMetadata.title}</div>
+}
diff --git a/integration-tests/ssr/src/pages/index.js b/integration-tests/ssr/src/pages/index.js
@@ -0,0 +1,15 @@
+import React from "react"
+import { useStaticQuery, graphql } from "gatsby"
+
+export default function Inline() {
+  const { site } = useStaticQuery(graphql`
+    {
+      site {
+        siteMetadata {
+          title
+        }
+      }
+    }
+  `)
+  return <div>{site.siteMetadata.title}</div>
+}
diff --git a/integration-tests/ssr/test-output.js b/integration-tests/ssr/test-output.js
@@ -0,0 +1,96 @@
+// To run the test script manually on a site (e.g. to test a plugin):
+// - build the site first
+// - start the develop server
+// - run this script
+;(async function () {
+  const { getPageHtmlFilePath } = require(`gatsby/dist/utils/page-html`)
+  const { join } = require(`path`)
+  const fs = require(`fs-extra`)
+  const fetch = require(`node-fetch`)
+  const diff = require(`jest-diff`)
+  const prettier = require(`prettier`)
+  const cheerio = require(`cheerio`)
+  const stripAnsi = require(`strip-ansi`)
+
+  const devSiteBasePath = `http://localhost:8000`
+
+  const comparePath = async path => {
+    const format = htmlStr => prettier.format(htmlStr, { parser: `html` })
+
+    const filterHtml = htmlStr => {
+      const $ = cheerio.load(htmlStr)
+      // There are many script tag differences
+      $(`script`).remove()
+      // Only added in production. Dev uses css-loader
+      $(`#gatsby-global-css`).remove()
+      // Only in prod
+      $(`link[rel="preload"]`).remove()
+      // Only in prod
+      $(`meta[name="generator"]`).remove()
+      // Only in dev
+      $(`meta[name="note"]`).remove()
+
+      return $.html()
+    }
+
+    const builtHtml = format(
+      filterHtml(
+        fs.readFileSync(
+          getPageHtmlFilePath(join(process.cwd(), `public`), path),
+          `utf-8`
+        )
+      )
+    )
+
+    const rawDevHtml = await fetch(`${devSiteBasePath}/${path}`).then(res =>
+      res.text()
+    )
+
+    const devHtml = format(filterHtml(rawDevHtml))
+    const diffResult = diff(devHtml, builtHtml, {
+      contextLines: 3,
+      expand: false,
+    })
+    if (
+      stripAnsi(diffResult) === `Compared values have no visual difference.`
+    ) {
+      return true
+    } else {
+      console.log(`path "${path}" has differences between dev & prod`)
+      console.log(diffResult)
+      return false
+    }
+  }
+
+  const response = await fetch(`${devSiteBasePath}/__graphql`, {
+    method: `POST`,
+    headers: { "Content-Type": `application/json` },
+    body: JSON.stringify({
+      query: `query MyQuery {
+  allSitePage {
+    nodes {
+      path
+    }
+  }
+}
+`,
+    }),
+  }).then(res => res.json()) // expecting a json response
+
+  const paths = response.data.allSitePage.nodes
+    .map(n => n.path)
+    .filter(p => p !== `/dev-404-page/`)
+
+  console.log(
+    `testing these paths for differences between dev & prod outputs`,
+    paths
+  )
+
+  const results = await Promise.all(paths.map(p => comparePath(p)))
+  // Test all true
+  if (results.every(r => r)) {
+    process.exit(0)
+  } else {
+    process.exit(1)
+  }
+})()
diff --git a/packages/babel-plugin-remove-graphql-queries/src/index.ts b/packages/babel-plugin-remove-graphql-queries/src/index.ts
@@ -269,6 +269,7 @@ export default function ({ types: t }): PluginObj {
           JSXIdentifier(path2: NodePath<JSXIdentifier>): void {
             if (
               (process.env.NODE_ENV === `test` ||
+                state.opts.stage === `develop-html` ||
                 state.opts.stage === `build-html`) &&
               path2.isJSXIdentifier({ name: `StaticQuery` }) &&
               path2.referencesImport(`gatsby`, ``) &&
@@ -311,6 +312,7 @@ export default function ({ types: t }): PluginObj {
           CallExpression(path2: NodePath<CallExpression>): void {
             if (
               (process.env.NODE_ENV === `test` ||
+                state.opts.stage === `develop-html` ||
                 state.opts.stage === `build-html`) &&
               isUseStaticQuery(path2)
             ) {

diff --git a/packages/gatsby-cli/src/structured-errors/error-map.ts b/packages/gatsby-cli/src/structured-errors/error-map.ts
@@ -539,6 +539,18 @@ const errors = {
     level: Level.ERROR,
     docsUrl: `https://www.gatsbyjs.org/docs/gatsby-cli/#new`,
   },
+  "11614": {
+    text: ({
+      path,
+      filePath,
+      line,
+      column,
+    }): string => `The path "${path}" errored during SSR.
+
+    Edit its component ${filePath}:${line}:${column} to resolve the error.`,
+    level: Level.WARNING,
+    docsUrl: `https://gatsby.dev/debug-html`,
+  },
   // Watchdog
   "11701": {
     text: (context): string =>