Component tests wont load

[danielyedaniel]

When I try to run my component tests, the UI becomes stuck loading the test. Here is a picture of what I am seeing:

The same is true for the electron browser as well. Could anyone help me resolve this issue? thanks

webpack.config.js:

// webpack.config.js
const { VueLoaderPlugin } = require("vue-loader");
const webpack = require("webpack");

module.exports = {
    mode: "development",
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: "vue-loader",
            },
            // this will apply to both plain `.js` files
            // AND `<script>` blocks in `.vue` files
            {
                test: /\.js$/,
                loader: "babel-loader",
            },
            // this will apply to both plain `.css` files
            // AND `<style>` blocks in `.vue` files
            {
                test: /\.css$/,
                use: ["vue-style-loader", "css-loader"],
            },
            // this will apply to both plain `.scss` files
            // AND `<style lang="scss">` blocks in `.vue` files
            {
                test: /\.scss$/,
                use: ["vue-style-loader", "css-loader", "sass-loader"],
            },
        ],
    },
    plugins: [
        // make sure to include the plugin for the magic
        new VueLoaderPlugin(),
        // new webpack.ProvidePlugin({
        //     $: "jquery",
        //     jQuery: "jquery",
        //     _: "lodash",
        //     Popper: ["popper.js", "default"],
        //     Dropzone: "dropzone",
        // }),
    ],
};

support file:

// ***********************************************************
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************

import { mount } from "cypress/vue2";
import Vue from "vue";
import VueRouter from "vue-router";

Cypress.Commands.add("mount", (component, options) => {
	Vue.use(VueRouter);

	// Setup options object
	options.extensions = options.extensions || {};
	options.extensions.plugins = options.extensions.plugins || [];

	// Add Router
	// https://docs.cypress.io/guides/component-testing/custom-mount-vue#Vue-Router
	options.router = options.router || router;

	options.listeners = options.listeners || [];

	return mount(component, options);
});

// Import commands.js using ES2015 syntax:
import "./commands";

cypress config:

const { defineConfig } = require("cypress");
require("dotenv").config();

module.exports = defineConfig({
    projectId: "jyk8ug",
    reporter: "junit",
    reporterOptions: {
        mochaFile: "results/my-test-output-[hash].xml",
        toConsole: true,
        video: false,
    },
    screenshotsFolder: "coverage-cypress/screenshots",
    videosFolder: "coverage-cypress/videos",
    e2e: {
        specPattern: "tests/cypress/e2e/**/*.cy.{js,jsx,ts,tsx}",
        supportFile: "tests/cypress/e2e/support/e2e.js",
        setupNodeEvents(on, config) {
            // implement node event listeners here
        },
    },
    component: {
        specPattern: "{app,public,resources}/**/*.cy.{js,jsx,ts,tsx}",
        supportFile: "tests/cypress/components/support/index.js",
		devServer: {
			framework: "vue",
			bundler: "webpack",
		},
        indexHtmlFile: "tests/cypress/components/support/component-index.html",
    },
    env: {
        ...process.env,
    },
});