karma config not loading with angular 13
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
Source: karma-runner/karma