React with Webpack, Typescript and Cypress Loader Error - reactjs

Question

I'm trying to configure cypress with a working configuration of webpack with React and Typescript. It seems to me that the babel-loader is not picking up the cypress/support/components.ts file because my webpack entry is ./src/index.tsx and the cypress folder is on the root not inside src.
Here is the error I'm getting...
========
Error: The following error originated from your test code, not from Cypress.
Module parse failed: Unexpected token (28:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| // Alternatively, can be defined in cypress/support/component.d.ts
| // with a at the top of your spec.
declare global {
| namespace Cypress {
| interface Chainable {
When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.
Cypress could not associate this error to any specific test.
We dynamically generated a new test to display this failure.
===========
Here is my cypress.config.ts
import { defineConfig } from 'cypress';
export default defineConfig({
component: {
devServer: {
framework: 'react',
bundler: 'webpack',
webpackConfig: require('./webpack.dev'),
},
includeShadowDom: true,
},
});
Here is my webpack.common.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
module.exports = {
entry: {
main: './src/index.tsx',
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src', 'index.html'),
}),
],
module: {
rules: [
{
test: /\.(js|ts)x$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
{
test: /\.(png|jpg)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[contenthash].[ext]',
outputPath: 'static/images',
},
},
},
{
test: /\.svg$/,
use: [
{
loader: '#svgr/webpack',
options: {
name: '[name].[contenthash].[ext]',
outputPath: 'static/images',
},
},
{
loader: 'file-loader',
options: {
name: '[name].[contenthash].[ext]',
outputPath: 'static/images',
},
},
],
},
{
test: /\.(woff|woff2)$/,
type: 'asset/resource',
generator: {
filename: 'static/fonts/[name][ext][query]',
},
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.jsx', '.js'],
plugins: [new TsconfigPathsPlugin()],
},
};
Here is my webpack.dev.js
const path = require('path');
const { merge } = require('webpack-merge');
const common = require('./webpack.common');
module.exports = merge(common, {
mode: 'development',
devServer: {
port: '9500',
static: {
directory: path.join(__dirname, 'src'),
},
open: false,
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader', // 2) injects styles into DOM
'css-loader', // 1) turns css into commonjs
],
},
],
},
devtool: 'eval-source-map',
});
Again this config is working and will build, the issue I'm have is bringing in Cypress using Typescript for our testing suite.
I've tried all sorts of different configs and using ts-loader with babel-loader, but I feel like I'm just missing how to get webpack to "pick up" the .ts files in the Cypress folder with is outside of my src.
Any suggestions are very much appreciated!