diff --git a/packages/gatsby-plugin-typescript/src/__tests__/gatsby-node.js b/packages/gatsby-plugin-typescript/src/__tests__/gatsby-node.js
index 11f394593ba44..61e8bf8ab7ef2 100644
--- a/packages/gatsby-plugin-typescript/src/__tests__/gatsby-node.js
+++ b/packages/gatsby-plugin-typescript/src/__tests__/gatsby-node.js
@@ -1,4 +1,8 @@
-const { resolvableExtensions, onCreateBabelConfig } = require(`../gatsby-node`)
+const {
+  resolvableExtensions,
+  onCreateBabelConfig,
+  onCreateWebpackConfig,
+} = require(`../gatsby-node`)
 const path = require(`path`)
 
 const { testPluginOptionsSchema } = require(`gatsby-plugin-utils`)
@@ -43,6 +47,31 @@ describe(`gatsby-plugin-typescript`, () => {
     })
   })
 
+  describe(`onCreateWebpackConfig`, () => {
+    it(`sets the correct webpack config`, () => {
+      const actions = { setWebpackConfig: jest.fn() }
+      const loaders = { js: jest.fn(() => {}) }
+      onCreateWebpackConfig({ actions, loaders })
+      expect(actions.setWebpackConfig).toHaveBeenCalledWith({
+        module: {
+          rules: [
+            {
+              test: /\.tsx?$/,
+              use: expect.toBeFunction(),
+            },
+          ],
+        },
+      })
+    })
+
+    it(`does not set the webpack config if there isn't a js loader`, () => {
+      const actions = { setWebpackConfig: jest.fn() }
+      const loaders = { js: undefined }
+      onCreateWebpackConfig({ actions, loaders })
+      expect(actions.setWebpackConfig).not.toHaveBeenCalled()
+    })
+  })
+
   describe(`plugin schema`, () => {
     it(`should provide meaningful errors when fields are invalid`, async () => {
       const expectedErrors = [
diff --git a/packages/gatsby-plugin-typescript/src/gatsby-node.js b/packages/gatsby-plugin-typescript/src/gatsby-node.js
index fda27a40e817c..00dc016e70aea 100644
--- a/packages/gatsby-plugin-typescript/src/gatsby-node.js
+++ b/packages/gatsby-plugin-typescript/src/gatsby-node.js
@@ -16,6 +16,42 @@ function onCreateBabelConfig({ actions }, options) {
   })
 }
 
+function onCreateWebpackConfig({ actions, loaders }) {
+  if (typeof loaders?.js !== `function`) {
+    return
+  }
+
+  let doesUsedGatsbyVersionSupportResourceQuery
+  try {
+    const { version } = require(`gatsby/package.json`)
+    const [major, minor] = version.split(`.`).map(Number)
+    doesUsedGatsbyVersionSupportResourceQuery =
+      (major === 4 && minor >= 19) || major > 4
+  } catch {
+    doesUsedGatsbyVersionSupportResourceQuery = true
+  }
+
+  actions.setWebpackConfig({
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          use: ({ resourceQuery, issuer }) => [
+            loaders.js(
+              doesUsedGatsbyVersionSupportResourceQuery
+                ? {
+                    isPageTemplate: /async-requires/.test(issuer),
+                    resourceQuery,
+                  }
+                : undefined
+            ),
+          ],
+        },
+      ],
+    },
+  })
+}
+
 exports.pluginOptionsSchema = ({ Joi }) =>
   Joi.object({
     isTSX: Joi.boolean().description(`Enables jsx parsing.`).default(false),
@@ -49,3 +85,4 @@ exports.pluginOptionsSchema = ({ Joi }) =>
 
 exports.resolvableExtensions = resolvableExtensions
 exports.onCreateBabelConfig = onCreateBabelConfig
+exports.onCreateWebpackConfig = onCreateWebpackConfig
diff --git a/packages/gatsby/src/bootstrap/load-plugins/__tests__/__snapshots__/load-plugins.ts.snap b/packages/gatsby/src/bootstrap/load-plugins/__tests__/__snapshots__/load-plugins.ts.snap
index cf41eb42e0fa4..e1865c1370964 100644
--- a/packages/gatsby/src/bootstrap/load-plugins/__tests__/__snapshots__/load-plugins.ts.snap
+++ b/packages/gatsby/src/bootstrap/load-plugins/__tests__/__snapshots__/load-plugins.ts.snap
@@ -265,6 +265,7 @@ Array [
       "pluginOptionsSchema",
       "resolvableExtensions",
       "onCreateBabelConfig",
+      "onCreateWebpackConfig",
     ],
     "pluginOptions": Object {
       "allExtensions": false,
@@ -634,6 +635,7 @@ Array [
       "pluginOptionsSchema",
       "resolvableExtensions",
       "onCreateBabelConfig",
+      "onCreateWebpackConfig",
     ],
     "pluginOptions": Object {
       "allExtensions": false,
@@ -1015,6 +1017,7 @@ Array [
       "pluginOptionsSchema",
       "resolvableExtensions",
       "onCreateBabelConfig",
+      "onCreateWebpackConfig",
     ],
     "pluginOptions": Object {
       "allExtensions": false,
diff --git a/packages/gatsby/src/bootstrap/load-plugins/__tests__/load-plugins.ts b/packages/gatsby/src/bootstrap/load-plugins/__tests__/load-plugins.ts
index de09d5e1df825..607f76ddb9442 100644
--- a/packages/gatsby/src/bootstrap/load-plugins/__tests__/load-plugins.ts
+++ b/packages/gatsby/src/bootstrap/load-plugins/__tests__/load-plugins.ts
@@ -174,6 +174,7 @@ describe(`Load plugins`, () => {
               `pluginOptionsSchema`,
               `resolvableExtensions`,
               `onCreateBabelConfig`,
+              `onCreateWebpackConfig`,
             ],
             pluginOptions: {
               allExtensions: false,