"Typescript by default" interferes with ts-loader in Webpack build

[Js-Brecht]

Description

Since it was decided that gatsby-plugin-typescript should be included by default, I have issues running ts-loader beside it. ts-loader winds up throwing a ton of type errors like some of these below

TS2683: 'this' implicitly has type 'any' because it does not have a type annotation.
TS7006: Parameter '_ref3' implicitly has an 'any' type.
TS2307: Cannot find module '@babel/runtime/helpers/esm/createClass' or its corresponding type declarations.

It's apparent to me that the types are being stripped from the code before it reaches ts-loader, which seemed a bit odd. The Webpack config snippet in question is here:

    "rules": [
      {
        "test": "/\\.tsx?$/",
        "exclude": "/node_modules/",
        "use": [
          {
            "options": {
              "stage": "develop",
              "cacheDirectory": "/home/jeremy/dev/autocorp-portal/apps/ac-dealer-portal/.cache/webpack/babel"
            },
            "loader": "/home/jeremy/dev/autocorp-portal/apps/ac-dealer-portal/node_modules/.pnpm/gatsby@2.24.4_4c4b323380cb034cb63962d4309d544e/node_modules/gatsby/dist/utils/babel-loader.js"
          },
          {
            "loader": "/home/jeremy/dev/autocorp-portal/apps/ac-dealer-portal/node_modules/.pnpm/ts-loader@8.0.1_typescript@3.9.7/node_modules/ts-loader/index.js",
            "options": {
              "compiler": "/home/jeremy/dev/autocorp-portal/apps/ac-dealer-portal/node_modules/.pnpm/ttypescript@1.5.10_typescript@3.9.7/node_modules/ttypescript/lib/typescript.js"
            }
          }
        ]
      },
      {
        "test": "/\\.(js|mjs|jsx)$/",
        "include": "modulePath => {\n          // when it's not coming from node_modules we treat it as a source file.\n          if (!vendorRegex.test(modulePath)) {\n            return true;\n          } // If the module uses Gatsby as a dependency\n          // we want to treat it as src so we can extract queries\n\n\n          return modulesThatUseGatsby.some(module => modulePath.includes(module.path));\n        }",
        "type": "javascript/auto",
        "use": [
          {
            "options": {
              "stage": "develop",
              "cacheDirectory": "/home/jeremy/dev/autocorp-portal/apps/ac-dealer-portal/.cache/webpack/babel",
              "configFile": true,
              "compact": false
            },
            "loader": "/home/jeremy/dev/autocorp-portal/apps/ac-dealer-portal/node_modules/.pnpm/gatsby@2.24.4_4c4b323380cb034cb63962d4309d544e/node_modules/gatsby/dist/utils/babel-loader.js"
          }
        ],
      },

This shouldn't be an issue because I've run ts-loader on top of babel-loader with @babel/preset-typescript set up before and never had any issues. To me, this sounds like another loader is hitting the .ts files first, which would make sense because gatsby-plugin-typescript sets up that loader. Under normal circumstances, I would drop the entry from the Webpack config, but...

I don't see it in the generated config. I have a function like this for debugging:

// gatsby-node.js
exports.onCreateWebpackConfig = ({ getConfig, stage }) => {
    require('fs').writeFileSync(
        `./webpack.config-${stage}.json`,
        JSON.stringify(
            getConfig(),
            (key, val) => (
                val instanceof RegExp ||
                val instanceof Function
                    ? val.toString()
                    : val
            ),
            2,
        ),
    );
};

I have examined the generated config from top to bottom, and I don't see the loader that gets added by gatsby-plugin-typescript. I've confirmed that it is the culprit by dropping these lines, though:

gatsby/packages/gatsby/src/bootstrap/load-plugins/load.ts

Lines 267 to 279 in 222920b

	const typescriptPlugin = (config.plugins || []).find(
	plugin =>
	(plugin as IPluginRefObject).resolve === `gatsby-plugin-typescript` ||
	plugin === `gatsby-plugin-typescript`
	)
	if (typescriptPlugin === undefined) {
	plugins.push(
	processPlugin({
	resolve: require.resolve(`gatsby-plugin-typescript`),
	})
	)
	}

---

So I guess I have a couple of questions:

• Why isn't onCreateWebpack() getting hit with the correct webpack config

• Can we set up a way to switch on/off the "typescript by default" feature?

  I frequently use Typescript plugins, and it's just not possible to use them through Babel, because it relies on typescript itself doing the transpiling/type-checking. Hence, ts-loader.

---

When I have the time in a couple days, I will create a reproduction. I'm on a time crunch right now, and I've already been on this issue for too long.

[Js-Brecht]

I have created a simple reproduction with a default starter here:
https://github.com/Js-Brecht/gatsby-typescript-webpack-issue

All it does is dump the webpack config to disk for examination. I would expect to see a babel-loader instance in there handling .tsx? files.

If so desired, I can extend it to showcase the issue when using ts-loader as well.

[Js-Brecht]

I know why I don't see it now. It's because of the timing for when gatsby-plugin-typescript is injected into the plugins:

{
    resolve: 'D:/dev/source/gatsby/typescript-issue/node_modules/gatsby-plugin-page-creator',
    id: 'b321aaec-3e3a-56df-9e0d-ac064e863300',
    name: 'gatsby-plugin-page-creator',
    version: '2.3.19',
    pluginOptions: {
      plugins: [],
      path: 'D:/dev/source/gatsby/typescript-issue/node_modules/gatsby-plugin-manifest/src/pages',
      pathCheck: false
    }
  },
  {
    resolve: 'D:/dev/source/gatsby/typescript-issue',
    id: '7374ebf2-d961-52ee-92a2-c25e7cb387a9',
    name: 'default-site-plugin',
    version: 'bef94002bc34517b45419dc06b7ac30f',
    pluginOptions: { plugins: [] }
  },
  {
    resolve: 'D:/dev/source/gatsby/typescript-issue/node_modules/gatsby-plugin-typescript',
    id: 'a58f9c71-fc82-5bcc-87ff-c26016f65ade',
    name: 'gatsby-plugin-typescript',
    version: '2.4.16',
    pluginOptions: { plugins: [] }
  },
  {
    resolve: 'D:/dev/source/gatsby/typescript-issue/node_modules/gatsby-plugin-page-creator',
    id: '297d37f1-aef5-5701-821a-11ec2a19e6fb',
    name: 'gatsby-plugin-page-creator',
    version: '2.3.19',
    pluginOptions: {
      plugins: [],
      path: 'D:/dev/source/gatsby/typescript-issue/src/pages',
      pathCheck: false
    }
  }
]