Merge branch 'master' into feat/package

.circleci/config.yml

@@ -350,9 +350,6 @@ jobs:
       - run: # Quick upgrade to the v2 (any version, we just need the real set version)
           command: yarn policies set-version berry
           working_directory: /tmp/e2e-tests/gatsby-pnp
-      - run: # TODO: remove pinned version
-          command: yarn set version 3.1.1
-          working_directory: /tmp/e2e-tests/gatsby-pnp
       - run: # Explicitly set nodeLinker to avoid Yarn selecting node_modules due to the Yarn 1.x lockfile
           command: yarn config set nodeLinker pnp
           working_directory: /tmp/e2e-tests/gatsby-pnp

docs/docs/using-client-side-only-packages.md

@@ -7,7 +7,7 @@ On occasion, you may need to use a function or library that only works client-si
 You'll need to use one of the workarounds outlined below if your project fails to compile with `gatsby develop` or `gatsby build` with an error like:
 
 ```shell
-Reference error: Window is not Defined
+Reference error: window is not defined
 ```
 
 ## Workaround 1: Use a different library or approach
@@ -21,7 +21,7 @@ In the component where you need it, load the package via CDN using a [`<script /
 To embed your script, you can:
 
 - Include it in a custom component as needed using [`react-helmet`](https://github.com/nfl/react-helmet).
-- Add the script tag directly in your base HTML using Gatsby's [html.js](/docs/custom-html/)
+- Add the script tag directly by using Gatsby's [`setHeadComponents`](/docs/reference/config-files/gatsby-ssr/#onRenderBody) in the `onRenderBody` API in `gatsby-ssr`.
 
 You should then follow React's guidelines for [Integrating with DOM Manipulation Plugins](https://reactjs.org/docs/integrating-with-other-libraries.html#integrating-with-dom-manipulation-plugins), using the methods available in the [React Component Lifecycle](https://reactjs.org/docs/react-component.html#the-component-lifecycle) to interact with the library you're using.
 
@@ -50,16 +50,41 @@ class MyComponent extends Component {
 }
 ```
 
-## Workaround 3: Load client-side dependent components with loadable-components
+## Workaround 3: Use React.lazy and Suspense on client-side only
+
+React.lazy and Suspense are not ready for server-side rendering, but they can be used by checking that the code is executed only on the client. While this solution is inferior to `loadable-components`, that works both on server side and client, it still provides an alternative for dealing with client-side only packages, without an added dependency. Remember that the following code could break if executed without the `isSSR` guard.
+
+```jsx
+import React from "react"
+
+const ClientSideOnlyLazy = React.lazy(() =>
+  import("../components/ClientSideOnly")
+)
+const MyPage = () => {
+  const isSSR = typeof window === "undefined"
+
+  return (
+    <>
+      {!isSSR && (
+        <React.Suspense fallback={<div />}>
+          <ClientSideOnlyLazy />
+        </React.Suspense>
+      )}
+    </>
+  )
+}
+```
+
+## Workaround 4: Load client-side dependent components with loadable-components
 
 Install [loadable-components](https://github.com/smooth-code/loadable-components) and use it as a wrapper for a component that wants to use a client-side only package.
 
 ```shell
 npm install @loadable/component
-# or use yarn
-yarn add @loadable/component
 ```
 
+And in your component:
+
 ```jsx
 import React, { Component } from "react"
 import PropTypes from "prop-types"
@@ -80,33 +105,6 @@ const LoadableBuyButton = Loadable(() => import("./ShopifyBuyButton"))
 export default LoadableBuyButton
 ```
 
-## Workaround 4: Use React.lazy and Suspense on client-side only
-
-React.lazy and Suspense are still not ready for server-side rendering, but they can still be used by checking that the code is executed only on the client.
-While this solution is inferior to `loadable-components`, that works both on server side and client, it still provides an alternative for dealing with client-side only packages, without an added dependency.
-Remember that the following code could break if executed without the `isSSR` guard.
-
-```jsx
-import React from "react"
-
-const ClientSideOnlyLazy = React.lazy(() =>
-  import("../components/ClientSideOnly")
-)
-const MyPage = () => {
-  const isSSR = typeof window === "undefined"
-
-  return (
-    <>
-      {!isSSR && (
-        <React.Suspense fallback={<div />}>
-          <ClientSideOnlyLazy />
-        </React.Suspense>
-      )}
-    </>
-  )
-}
-```
-
 > **Note:** There are other potential workarounds than those listed here. If you've had success with another method, check out the [contributing docs](/contributing/docs-contributions/) and add yours!
 
 If all else fails, you may also want to check out the documentation on [Debugging HTML Builds](/docs/debugging-html-builds/).

e2e-tests/production-runtime/cypress/integration/modified-exports-ts.js

@@ -0,0 +1,65 @@
+/**
+ * Test that page templates have certain exports removed while other files are left alone.
+ *
+ * Page templates support only a default exported React component and named exports of
+ * `config` and `getServerData`, so it's not necessary (or possible) to test other exports
+ * in page templates.
+ */
+
+const config = `config exported from a non-page template module`
+const getServerData = `getServerData exported from a non-page template module`
+const helloWorld = `hello world`
+
+describe(`modifed exports`, () => {
+  beforeEach(() => {
+    cy.visit(`/modified-exports-ts`).waitForRouteChange()
+  })
+
+  describe(`page templates`, () => {
+    it(`should have exports named config removed`, () => {
+      cy.getTestElement(`modified-exports-page-template-config`)
+        .invoke(`text`)
+        .should(`contain`, `undefined`)
+    })
+    it(`should have exports named getServerData removed`, () => {
+      cy.getTestElement(`modified-exports-page-template-get-server-data`)
+        .invoke(`text`)
+        .should(`contain`, `undefined`)
+    })
+    it(`should have imported exports named config left alone`, () => {
+      cy.getTestElement(`unmodified-exports-page-template-config`)
+        .invoke(`text`)
+        .should(`contain`, config)
+    })
+    it(`should have imported exports named getServerData left alone`, () => {
+      cy.getTestElement(`unmodified-exports-page-template-get-server-data`)
+        .invoke(`text`)
+        .should(`contain`, getServerData)
+    })
+    it(`should have other imported exports left alone`, () => {
+      cy.getTestElement(`unmodified-exports-page-template-hello-world`)
+        .invoke(`text`)
+        .should(`contain`, helloWorld)
+    })
+  })
+
+  describe(`other JS files`, () => {
+    it(`should have exports named config left alone`, () => {
+      cy.getTestElement(`unmodified-exports-config`)
+        .invoke(`text`)
+        .should(`contain`, config)
+    })
+
+    it(`should have exports named getServerData left alone`, () => {
+      cy.getTestElement(`unmodified-exports-get-server-data`)
+        .invoke(`text`)
+        .should(`contain`, getServerData)
+    })
+
+    it(`should have other named exports left alone`, () => {
+      cy.getTestElement(`unmodified-exports-hello-world`)
+        .invoke(`text`)
+        .should(`contain`, helloWorld)
+    })
+  })
+})

e2e-tests/production-runtime/src/pages/modified-exports-ts.tsx

@@ -0,0 +1,39 @@
+import React from "react"
+import UnmodifiedExports, {
+  config as importedConfig,
+  getServerData as importedGetServerData,
+  helloWorld,
+} from "../components/unmodified-exports"
+
+function ModifiedExports() {
+  return (
+    <div>
+      <p>This is the modified exports for page templates test page</p>
+      {/* Use typeof to avoid runtime error */}
+      <p data-testid="modified-exports-page-template-config">{typeof config}</p>
+      <p data-testid="modified-exports-page-template-get-server-data">
+        {typeof getServerData}
+      </p>
+      <p data-testid="unmodified-exports-page-template-config">
+        {importedConfig()}
+      </p>
+      <p data-testid="unmodified-exports-page-template-get-server-data">
+        {importedGetServerData()}
+      </p>
+      <p data-testid="unmodified-exports-page-template-hello-world">
+        {helloWorld()}
+      </p>
+      <UnmodifiedExports />
+    </div>
+  )
+}
+
+export function config() {
+  return () => "config exported from a page template module" // Expects config to be a function factory
+}
+
+export function getServerData() {
+  return "getServerData exported from a page template module"
+}
+
+export default ModifiedExports

packages/babel-preset-gatsby/package.json

@@ -1,6 +1,6 @@
 {
   "name": "babel-preset-gatsby",
-  "version": "2.11.0-next.1",
+  "version": "2.11.0-next.2",
   "author": "Philipp Spiess <[email protected]>",
   "repository": {
     "type": "git",

packages/create-gatsby/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-gatsby",
-  "version": "2.11.0-next.1",
+  "version": "2.11.0-next.2",
   "main": "lib/index.js",
   "bin": "cli.js",
   "license": "MIT",
@@ -28,7 +28,7 @@
     "eslint": "^7.32.0",
     "execa": "^5.1.1",
     "fs-extra": "^10.0.0",
-    "gatsby-plugin-utils": "^3.5.0-next.1",
+    "gatsby-plugin-utils": "^3.5.0-next.2",
     "joi": "^17.4.2",
     "microbundle": "^0.14.2",
     "node-fetch": "^2.6.6",

packages/gatsby-cli/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gatsby-cli",
   "description": "Gatsby command-line interface for creating new sites and running Gatsby commands",
-  "version": "4.11.0-next.1",
+  "version": "4.11.0-next.3",
   "author": "Kyle Mathews <[email protected]>",
   "bin": {
     "gatsby": "cli.js"
@@ -26,7 +26,7 @@
     "common-tags": "^1.8.2",
     "configstore": "^5.0.1",
     "convert-hrtime": "^3.0.0",
-    "create-gatsby": "^2.11.0-next.1",
+    "create-gatsby": "^2.11.0-next.2",
     "envinfo": "^7.8.1",
     "execa": "^5.1.1",
     "fs-exists-cached": "^1.0.0",

packages/gatsby-cli/src/structured-errors/error-map.ts

@@ -528,6 +528,14 @@ const errors = {
     level: Level.ERROR,
     category: ErrorCategory.USER,
   },
+  "11332": {
+    text: (): string =>
+      `Failed to compile Gatsby Functions. See the error below for more details.\nNote: The src/api folder is a reserved folder for Gatsby Functions and can't be used for any other files.`,
+    type: Type.COMPILATION,
+    level: Level.ERROR,
+    category: ErrorCategory.USER,
+    docsUrl: `https://www.gatsbyjs.com/docs/reference/functions/`,
+  },
   // node object didn't pass validation
   "11467": {
     text: (context): string =>

packages/gatsby-codemods/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-codemods",
-  "version": "3.11.0-next.0",
+  "version": "3.11.0-next.1",
   "description": "A collection of codemod scripts for use with JSCodeshift that help migrate to newer versions of Gatsby.",
   "main": "index.js",
   "scripts": {

packages/gatsby-design-tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-design-tokens",
-  "version": "4.11.0-next.0",
+  "version": "4.11.0-next.1",
   "description": "Gatsby Design Tokens",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

packages/gatsby-dev-cli/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gatsby-dev-cli",
   "description": "CLI helpers for contributors working on Gatsby",
-  "version": "4.11.0-next.0",
+  "version": "4.11.0-next.1",
   "author": "Kyle Mathews <[email protected]>",
   "bin": {
     "gatsby-dev": "./dist/index.js"

packages/gatsby-link/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gatsby-link",
   "description": "An enhanced Link component for Gatsby sites with support for resource prefetching",
-  "version": "4.11.0-next.2",
+  "version": "4.11.0-next.3",
   "author": "Kyle Mathews <[email protected]>",
   "bugs": {
     "url": "https://github.com/gatsbyjs/gatsby/issues"

packages/gatsby-parcel-config/package.json

@@ -14,22 +14,22 @@
   },
   "dependencies": {
     "@gatsbyjs/parcel-namer-relative-to-cwd": "0.0.2",
-    "@parcel/bundler-default": "^2.3.1",
-    "@parcel/compressor-raw": "^2.3.1",
-    "@parcel/namer-default": "^2.3.1",
-    "@parcel/optimizer-terser": "^2.3.1",
-    "@parcel/packager-js": "^2.3.1",
-    "@parcel/packager-raw": "^2.3.1",
-    "@parcel/reporter-dev-server": "^2.3.1",
-    "@parcel/resolver-default": "^2.3.1",
-    "@parcel/runtime-browser-hmr": "^2.3.1",
-    "@parcel/runtime-js": "^2.3.1",
-    "@parcel/runtime-react-refresh": "^2.3.1",
-    "@parcel/runtime-service-worker": "^2.3.1",
-    "@parcel/transformer-js": "^2.3.1",
-    "@parcel/transformer-json": "^2.3.1",
-    "@parcel/transformer-raw": "^2.3.1",
-    "@parcel/transformer-react-refresh-wrap": "^2.3.1"
+    "@parcel/bundler-default": "^2.3.2",
+    "@parcel/compressor-raw": "^2.3.2",
+    "@parcel/namer-default": "^2.3.2",
+    "@parcel/optimizer-terser": "^2.3.2",
+    "@parcel/packager-js": "^2.3.2",
+    "@parcel/packager-raw": "^2.3.2",
+    "@parcel/reporter-dev-server": "^2.3.2",
+    "@parcel/resolver-default": "^2.3.2",
+    "@parcel/runtime-browser-hmr": "^2.3.2",
+    "@parcel/runtime-js": "^2.3.2",
+    "@parcel/runtime-react-refresh": "^2.3.2",
+    "@parcel/runtime-service-worker": "^2.3.2",
+    "@parcel/transformer-js": "^2.3.2",
+    "@parcel/transformer-json": "^2.3.2",
+    "@parcel/transformer-raw": "^2.3.2",
+    "@parcel/transformer-react-refresh-wrap": "^2.3.2"
   },
   "parcelDependencies": {
     "@gatsbyjs/parcel-namer-relative-to-cwd": "0.0.2",

packages/gatsby-plugin-catch-links/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gatsby-plugin-catch-links",
   "description": "Intercepts local links from markdown and other non-react pages and does a client-side pushState to avoid the browser having to refresh the page.",
-  "version": "4.11.0-next.0",
+  "version": "4.11.0-next.1",
   "author": "Kyle Mathews <[email protected]>",
   "bugs": {
     "url": "https://github.com/gatsbyjs/gatsby/issues"

packages/gatsby-plugin-cxs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gatsby-plugin-cxs",
   "description": "Gatsby plugin to add SSR support for ctx",
-  "version": "4.11.0-next.2",
+  "version": "4.11.0-next.3",
   "author": "Chen-Tai Hou <[email protected]>",
   "bugs": {
     "url": "https://github.com/gatsbyjs/gatsby/issues"
@@ -15,7 +15,7 @@
     "babel-preset-gatsby-package": "^2.11.0-next.0",
     "cross-env": "^7.0.3",
     "cxs": "^6.2.0",
-    "gatsby-plugin-utils": "^3.5.0-next.1"
+    "gatsby-plugin-utils": "^3.5.0-next.2"
   },
   "homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-cxs#readme",
   "keywords": [

packages/gatsby-plugin-feed/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gatsby-plugin-feed",
   "description": "Creates an RSS feed for your Gatsby site.",
-  "version": "4.11.0-next.2",
+  "version": "4.11.0-next.3",
   "author": "Nicholas Young <[email protected]>",
   "bugs": {
     "url": "https://github.com/gatsbyjs/gatsby/issues"
@@ -11,7 +11,7 @@
     "@hapi/joi": "^15.1.1",
     "common-tags": "^1.8.2",
     "fs-extra": "^10.0.0",
-    "gatsby-plugin-utils": "^3.5.0-next.1",
+    "gatsby-plugin-utils": "^3.5.0-next.2",
     "lodash.merge": "^4.6.2",
     "rss": "^1.2.2"
   },