ts-loader dynamic jsx

config.base.mjs

import { resolve } from 'node:path';
import { tsLoader } from './loaders.mjs';

/** @type {import('webpack').Configuration} */
export default {
  resolve: {
    extensions: ['.ts', '.tsx', '...'],
  },
  module: {
    rules: [
      {
        test: /\.(m?ts|tsx)$/i,
        use: tsLoader,
        include: resolve(process.cwd(), 'src'),
      },
    ],
  },
};

config.mjs

import { resolve } from 'node:path';
import ts from 'typescript';
import { tsLoader } from './loaders.mjs';

const { JsxEmit } = ts.server.protocol;

tsLoader.options = {
  ...tsLoader.options,
  transpileOnly: true,
};

const configDev = () => {
  tsLoader.options.compilerOptions = {
    sourceMap: true,
    jsx: JsxEmit.ReactJSXDev,
  };
  return {
    extends: resolve(import.meta.dirname, './config.base.mjs'),
  };
};

const configProd = () => {
  tsLoader.options.compilerOptions = {
    jsx: JsxEmit.ReactJSX,
  };
  return {
    extends: resolve(import.meta.dirname, './config.base.mjs'),
  };
};

export default process.env.NODE_ENV === 'development' ? configDev : configProd;

loaders.mjs

/** @typedef {Record<'compilerOptions', import('typescript').server.protocol.CompilerOptions>} CompilerOptions */

/** @type {{loader: string, options: Partial<import('ts-loader').Options> | CompilerOptions}} */
export const tsLoader = {
  loader: 'ts-loader',
  options: {
    onlyCompileBundledFiles: true,
  },
};