fix(gatsby): remove apis from ts,tsx (#35183) (#35198)

(cherry picked from commit 8de18e7)

Co-authored-by: Ward Peeters <ward@coding-tech.com>

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/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)) {