Can't resolve tsx modules even with .tsx in webpack.config resolve extensions array

Question

I have the following component:

import { useAuth } from './Auth';

export function Home() {
    const { user } = useAuth();
    const location = useLocation();
    // if (location.pathname == "/") {
    //     return <Navigate to={`/sessions/`} />
    // }
    return (
        <Container>
            <Row>
                <Col><h3>Welcome, {user.email}!</h3></Col>
            </Row>
        </Container>
    )
}

I used to have .tsx after auth but VS code would yell at me for it

("An import path cannot end with a '.tsx' extension. Consider importing './Auth' instead.ts(2691)")

I added .tsx and .jsx to webpage.config.js:

//@ts-check

'use strict';

const path = require('path');

//@ts-check
/** @typedef {import('webpack').Configuration} WebpackConfig **/

/** @type WebpackConfig */
const extensionConfig = {
  target: 'node', // vscode extensions run in a Node.js-context 📖 -> https://webpack.js.org/configuration/node/
    mode: 'none', // this leaves the source code as close as possible to the original (when packaging we set this to 'production')

  entry: './src/extension.ts', // the entry point of this extension, 📖 -> https://webpack.js.org/configuration/entry-context/
  output: {
    // the bundle is stored in the 'dist' folder (check package.json), 📖 -> https://webpack.js.org/configuration/output/
    path: path.resolve(__dirname, 'dist'),
    filename: 'extension.js',
    libraryTarget: 'commonjs2'
  },
  externals: {
    vscode: 'commonjs vscode' // the vscode-module is created on-the-fly and must be excluded. Add other modules that cannot be webpack'ed, 📖 -> https://webpack.js.org/configuration/externals/
    // modules added here also need to be added in the .vscodeignore file
  },
  resolve: {
    // support reading TypeScript and JavaScript files, 📖 -> https://github.com/TypeStrong/ts-loader
      extensions: ['.ts', '.tsx', '.js','.jsx']
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'ts-loader'
          }
        ]
      }
    ]
  },
  devtool: 'nosources-source-map',
  infrastructureLogging: {
    level: "log", // enables logging required for problem matchers
  },
};
module.exports = [ extensionConfig ];

Still getting a Module not found: Error: Can't resolve './Auth' in '/home/app/web/src' when webpack tries to compile.

I know I can just ignore the error but it seems like importing modules like this is the correct way to do things in TSX. Why does this method not work for me?