karma config not loading with angular 13

[PradyumnaTalsania94]

I have recently upgraded to version 13 of angular. I’m able to build the project successfully but running tests gives the below issues,

Here is package.json dependencies

"devDependencies": {
        "@angular-builders/jest": "^13.0.4",
        "@angular-devkit/build-angular": "~13.3.9",
        "@angular-devkit/build-ng-packagr": "~0.1002.4",
        "@angular-devkit/core": "^13.3.9",
        "@angular-eslint/builder": "13.5.0",
        "@angular-eslint/eslint-plugin": "13.5.0",
        "@angular-eslint/eslint-plugin-template": "13.5.0",
        "@angular-eslint/schematics": "13.5.0",
        "@angular-eslint/template-parser": "13.5.0",
        "@angular/animations": "13.3.11",
        "@angular/cdk": "13.3.9",
        "@angular/cli": "13.3.9",
        "@angular/common": "13.3.11",
        "@angular/compiler": "13.3.11",
        "@angular/compiler-cli": "13.3.11",
        "@angular/core": "13.3.11",
        "@angular/forms": "13.3.11",
        "@angular/language-service": "13.3.11",
        "@angular/material": "13.3.9",
        "@angular/platform-browser": "13.3.11",
        "@angular/platform-browser-dynamic": "13.3.11",
        "@angular/router": "13.3.11",
        "@babel/core": "^7.10.4",
        "@commitlint/cli": "9.1.1",
        "@commitlint/config-conventional": "9.1.1",
        "@compodoc/compodoc": "^1.1.11",
        "@storybook/addon-a11y": "6.1.15",
        "@storybook/addon-actions": "6.1.15",
        "@storybook/addon-docs": "6.1.15",
        "@storybook/addon-essentials": "6.1.15",
        "@storybook/addon-knobs": "6.1.15",
        "@storybook/addons": "6.1.15",
        "@storybook/angular": "6.1.15",
        "@types/common-tags": "1.8.0",
        "@types/d3-scale": "2.1.1",
        "@types/glob": "^7.1.1",
        "@types/jasmine": "3.5.11",
        "@types/karma": "5.0.0",
        "@types/lodash": "4.14.172",
        "@types/markdown-to-jsx": "^7.0.1",
        "@types/node": "^16.4.1",
        "@types/promptly": "1.1.28",
        "@types/puppeteer": "3.0.1",
        "@types/resize-observer-browser": "^0.1.7",
        "@types/sass": "^1.43.1",
        "@types/segment-analytics": "^0.0.32",
        "@types/tmp": "^0.2.0",
        "@types/webgl2": "^0.0.6",
        "@types/webpack-env": "^1.15.2",
        "@typescript-eslint/eslint-plugin": "5.44.0",
        "@typescript-eslint/parser": "5.44.0",
        "assemblyscript": "0.9.1",
        "autoprefixer": "^8.1.0",
        "axios": "0.19.2",
        "babel-loader": "^8.1.0",
        "commitizen": "4.1.2",
        "common-tags": "1.8.0",
        "core-js": "^3.8.2",
        "cz-conventional-changelog": "3.2.0",
        "d3-scale": "3.2.1",
        "downlevel-dts": "0.10.1",
        "eslint": "^8.28.0",
        "glob": "^7.1.6",
        "hammerjs": "^2.0.8",
        "highcharts": "9.0.1",
        "husky": "4.2.5",
        "jasmine": "3.5.0",
        "jasmine-core": "~3.5.0",
        "jasmine-spec-reporter": "~5.0.0",
        "jest": "^28.1.3",
        "jest-environment-jsdom": "28.1.3",
        "jest-preset-angular": "12.1.0-next.0",
        "karma": "~6.4.1",
        "karma-chrome-launcher": "~3.1.0",
        "karma-coverage-istanbul-reporter": "~3.0.2",
        "karma-jasmine": "~4.0.0",
        "karma-jasmine-html-reporter": "^1.5.0",
        "karma-junit-reporter": "2.0.1",
        "karma-spec-reporter": "0.0.32",
        "karma-teamcity-reporter": "1.1.0",
        "lerna": "3.22.1",
        "lodash": "4.17.21",
        "ng-packagr": "^13.3.1",
        "prettier": "2.0.5",
        "pretty-quick": "2.0.1",
        "promptly": "3.0.3",
        "puppeteer": "5.0.0",
        "query-ast": "^1.0.3",
        "react": "^16.6.0",
        "react-dom": "^16.6.0",
        "regenerator-runtime": "^0.13.5",
        "rxjs": "^7.4.0",
        "sass": "^1.43.1",
        "scss-parser": "^1.0.4",
        "slnodejs": "^4.0.286",
        "storybook-addon-compodoc": "1.0.2",
        "stylelint": "13.6.1",
        "stylelint-config-recommended-scss": "4.2.0",
        "stylelint-scss": "3.18.0",
        "tmp": "0.2.1",
        "ts-jest": "28.0.3",
        "ts-node": "^10.4.0",
        "tslib": "^2.0.0",
        "typescript": "~4.6.4",
        "zone.js": "~0.11.4"
    },

Below is the error while running the tests

An unhandled exception occurred: Error in config file! Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: <path-to>/karma.config.ts require() of ES modules is not supported. require() of <path-to>/karma.config.ts from /node_modules/karma/lib/config.js is an ES module file as it is a .ts file whose nearest parent package.json contains "type": "module" which defines all .ts files in that package scope as ES modules. Instead change the requiring code to use import(), or remove "type": "module" from package.json.

removing “type”: “module” from package.json gives below error

SyntaxError: Cannot use import statement outside a module

tried converting karma config file to .mjs and it below error

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/ptalsani/Desktop/ui-kit-upgrade/ui-kit/projects/appd/common/karma.config.mjs