You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. TypeScript/Javascript

Question

Im trying to do some component testing with cypress version 10. I keep running into this error telling me I need an appropriate loader , and that I have none to process files in my app.

My repo is primarily javascript, when I initialize cypress it runs in typescript, which is fine. After initializing and passing the base test, im trying to make a simple test where I mount a loader component but it keeps failing with You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. I believe the issue is that its having a hard time switching from ts for js but im not sure how to fix this.

The set up is as follows cypress.config.ts - src/cypress.config

import { defineConfig } from "cypress";
const webpackConfig = require('./config/cypress.webpack.config.js');

export default defineConfig({
  component: {
    devServer: {
      framework: "react",
      bundler: "webpack",
      webpackConfig,
    },
    specPattern: 'src/**/*.cy.{js,ts,jsx,tsx}',
  },
});

cypress.webpack.config.js - src/config/cypress.webpack.config.js

const webpack = require('webpack');
const { resolve } = require('path');
const config = require('@placehold-cloud-services/frontend-components-config');

const { config: webpackConfig, plugins } = config({
  rootFolder: resolve(__dirname, '../'),
});

plugins.push(
  new webpack.DefinePlugin({ insights: { chrome: { isProd: false } } })
);

module.exports = {
  mode: 'development',
  // make sure the source maps work
  devtool: 'eval-source-map',
  // webpack will transpile TS and JS files
  resolve: {
    extensions: ['.ts', '.js'],
  },
  module: {
    rules: [
      {
        // every time webpack sees a TS file (except for node_modules)
        // webpack will use "ts-loader" to transpile it to JavaScript
        test: /\.ts$/,
        exclude: [/node_modules/],
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/typescript'],
            },
          },
        ],
      },
    ],
  },
};

And my tsconfig.json (inside cypress directory) - src/cypress/tsconfig.json

{
    "compilerOptions": {
      "target": "es5",
      "lib": ["es5", "dom"],
      "types": ["cypress", "node"]
    },
    "include": ["**/*.ts"]
}

Loading.cy.ts

import Loading from './PresentationalComponents/Loading/Loading.js'
import { mount } from 'cypress/react';

describe('Loading.cy.ts', () => {
   mount( Loading )
})

Loading.js

const Loading = () => (
  <>
    <Card>
      <CardBody>
        <List />
      </CardBody>
    </Card>
  </>
);

export default Loading;