From 8de18e77ca9e295860b6374ce6b9f28596645604 Mon Sep 17 00:00:00 2001
From: Ward Peeters <ward@coding-tech.com>
Date: Mon, 21 Mar 2022 15:53:11 +0100
Subject: [PATCH] fix(gatsby): remove apis from ts,tsx (#35183)

---
 .../integration/modified-exports-ts.js        | 65 +++++++++++++++++++
 .../src/pages/modified-exports-ts.tsx         | 39 +++++++++++
 packages/gatsby/src/utils/webpack-utils.ts    |  2 +-
 3 files changed, 105 insertions(+), 1 deletion(-)
 create mode 100644 e2e-tests/production-runtime/cypress/integration/modified-exports-ts.js
 create mode 100644 e2e-tests/production-runtime/src/pages/modified-exports-ts.tsx

diff --git a/e2e-tests/production-runtime/cypress/integration/modified-exports-ts.js b/e2e-tests/production-runtime/cypress/integration/modified-exports-ts.js
new file mode 100644
index 0000000000000..bc1753403d1aa
--- /dev/null
+++ b/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)
+    })
+  })
+})
diff --git a/e2e-tests/production-runtime/src/pages/modified-exports-ts.tsx b/e2e-tests/production-runtime/src/pages/modified-exports-ts.tsx
new file mode 100644
index 0000000000000..9a4a64506f820
--- /dev/null
+++ b/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
diff --git a/packages/gatsby/src/utils/webpack-utils.ts b/packages/gatsby/src/utils/webpack-utils.ts
index fece1fa46df08..213470b7cb4ea 100644
--- a/packages/gatsby/src/utils/webpack-utils.ts
+++ b/packages/gatsby/src/utils/webpack-utils.ts
@@ -416,7 +416,7 @@ export const createWebpackUtils = (
       modulesThatUseGatsby?: Array<IModuleThatUseGatsby>
     } = {}): RuleSetRule => {
       return {
-        test: /\.(js|mjs|jsx)$/,
+        test: /\.(js|mjs|jsx|ts|tsx)$/,
         include: (modulePath: string): boolean => {
           // when it's not coming from node_modules we treat it as a source file.
           if (!vendorRegex.test(modulePath)) {