[Karma] Uncaught ReferenceError: sourceMapSupport is not defined #1046
Description
I have this issue after migration to angular 12
dev build work correctly also production
but running karma test is problem
this is still reported and than stuct, browser is open but cannot continue bc. same issue is in console
⠙ Generating browser application bundles (phase: building)...25 10 2021 18:19:48.078:WARN [karma]: No captured browser, open http://192.168.69.1:9876/
✔ Browser application bundle generation complete.
25 10 2021 18:19:52.165:WARN [karma]: No captured browser, open http://192.168.69.1:9876/
START:
Chrome 95.0.4638.54 (Linux x86_64) ERROR
Uncaught ReferenceError: sourceMapSupport is not defined
at node_modules/karma-source-map-support/lib/client.js:1:1
ReferenceError: sourceMapSupport is not defined
at node_modules/karma-source-map-support/lib/client.js:1:1
Chrome 95.0.4638.54 (Linux x86_64) ERROR
Uncaught ReferenceError: sourceMapSupport is not defined
at node_modules/karma-source-map-support/lib/client.js:1:1
ReferenceError: sourceMapSupport is not defined
at node_modules/karma-source-map-support/lib/client.js:1:1
Chrome 95.0.4638.54 (Linux x86_64) ERROR
Uncaught ReferenceError: sourceMapSupport is not defined
at node_modules/karma-source-map-support/lib/client.js:1:1
ReferenceError: sourceMapSupport is not defined
at node_modules/karma-source-map-support/lib/client.js:1:1
karma.conf.js
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html
const webdriver = require('selenium-webdriver');
module.exports = async function (config) {
// Get local IP for selenium runner
const address = require('./builder/helpers').getMyIPAddress(false);
const configuration = {
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-selenium-webdriver-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage'),
require('karma-junit-reporter'),
require('karma-mocha-reporter'),
require('@angular-devkit/build-angular/plugins/karma'),
{ 'reporter:jasmine-seed': ['type', JasmineSeedReporter] },
],
reporters: ['mocha', 'coverage', 'kjhtml', 'junit', 'jasmine-seed'],
coverageReporter: {
reporters: [
{ type: 'html', subdir: 'html' },
{ type: 'text-summary', subdir: '.' },
{ type: 'lcovonly', subdir: '.' },
{ type: 'json', subdir: '.', file: 'coverage.json' },
],
dir: './coverage',
includeAllSources: true,
},
mochaReporter: {
maxLogLines: 50,
},
// the default configuration
junitReporter: {
outputDir: './coverage',
outputFile: './karma-junit.xml',
suite: 'Crossuite Karma Unit',
useBrowserName: false,
nameFormatter: (browser, result) => {
return result.description;
},
classNameFormatter: (browser, result) => {
return result.suite[0];
},
// properties: {}
},
port: 9876,
colors: process.env.DOCKER_EXTRA !== '--no-color',
logLevel: config.LOG_WARN,
// autoWatch: true, // already in parent config
browsers: [/*'ChromeTravisCi'*/ 'Chrome'],
// singleRun: false, // already in parent config
client: {
clearContext: false, // leave Jasmine Spec Runner output visible in browser
jasmine: {
random: true,
seed: '',
},
},
browserDisconnectTimeout: 15 * 1000,
browserDisconnectTolerance: 1,
browserNoActivityTimeout: 100 * 60 * 1000,
captureTimeout: 10 * 60 * 1000,
restartOnFileChange: true,
hostname: address && address.length ? address[0] : 'localhost',
customLaunchers: {
ChromeTravisCi: {
base: 'ChromeHeadless',
browserName: 'Chrome',
flags: [
'--no-sandbox',
'--headless',
'--disable-gpu',
'--disable-web-security',
'--disable-translate',
'--disable-extensions',
'--disable-dev-shm-usage',
'--hide-scrollbars',
'--mute-audio',
// '--remote-debugging-port=9223'
],
},
ChromeSelenium: {
base: 'SeleniumWebdriver',
browserName: 'Chrome',
flags: [
'--no-sandbox',
'--headless',
'--disable-gpu',
'--disable-web-security',
'--disable-translate',
'--disable-extensions',
'--disable-dev-shm-usage',
'--hide-scrollbars',
'--mute-audio',
// '--remote-debugging-port=9223'
],
getDriver: function () {
return new webdriver.Builder()
.forBrowser('chrome')
.usingServer('http://selenium-chrome:4444/wd/hub')
.build();
},
},
},
};
if (
process.env.TRAVIS ||
config.browsers.includes('ChromeTravisCi') ||
config.browsers.includes('ChromeSelenium')
) {
if (config.browsers.includes('ChromeSelenium')) {
configuration.browsers = ['ChromeSelenium'];
} else {
configuration.browsers = ['ChromeTravisCi'];
}
}
if (
configuration.browsers.includes('ChromeTravisCi') ||
configuration.browsers.includes('ChromeSelenium')
) {
const kjhtml = configuration.reporters.indexOf('kjhtml');
if (kjhtml > -1) {
configuration.reporters.splice(kjhtml, 1);
}
const chrome = configuration.browsers.indexOf('Chrome');
if (chrome > -1) {
configuration.browsers.splice(chrome, 1);
}
}
if (process.env.PARALLEL) {
config.frameworks.unshift('parallel');
config.plugins.unshift(require('karma-parallel'));
config.parallelOptions = {
// executors: 10, // Defaults to cpu-count - 1
// shardStrategy: 'round-robin'
// shardStrategy: 'description-length'
// shardStrategy: 'custom'
// customShardStrategy: function(config) {
// config.executors // number, the executors set above
// config.shardIndex // number, the specific index for the shard currently running
// config.description // string, the name of the top-level describe string. Useful // for determining how to shard the current specs
// return config.
// }
};
}
config.set(configuration);
};
// Helpers
function JasmineSeedReporter(baseReporterDecorator) {
baseReporterDecorator(this);
this.onBrowserComplete = (browser, result) => {
const seed = result.order && result.order.random && result.order.seed;
if (seed) this.write(`${browser}: Randomized with seed ${seed}.\n`);
};
this.onRunComplete = () => undefined;
}
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"defaultProject": "sandbox",
"cli": {
"analytics": false,
"packageManager": "npm"
},
"projects": {
"sandbox": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "cp",
"i18n": {
"sourceLocale": "en-GB",
"locales": {
"nl-BE": "src/locale/messages.nl-BE.xlf",
"nl-NL": "src/locale/messages.nl-NL.xlf",
"fr-BE": "src/locale/messages.fr-BE.xlf",
"de-DE": "src/locale/messages.de-DE.xlf"
}
},
"architect": {
"build": {
"defaultConfiguration": "",
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"outputPath": "build/sandbox",
"index": "src/index.html",
"main": "src/app.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"sourceMap": {
"scripts": true,
"styles": true,
"vendor": false
},
"assets": [
{
"glob": "favicon-32x32.png",
"input": "nui/assets/favicons/",
"output": "/favicons/"
},
{
"glob": "*",
"input": "assets",
"output": "/public/images/"
},
{
"glob": "*",
"input": "config/init/",
"output": "/config/init/"
}
],
"styles": ["src/style.scss"],
"stylePreprocessorOptions": {
"includePaths": ["nui", "node_modules/@syncfusion"]
},
"scripts": [],
"customWebpackConfig": {
"path": "./builder/webpack.extras.dev.ts"
},
"allowedCommonJsDependencies": [
"md5",
"croppie",
"xlsx",
"file-saver",
"node-interval-tree",
"socket.io-client",
"moment-timezone",
"dom-set",
"dom-plane",
"dom-autoscroller",
"zone.js/dist/long-stack-trace-zone",
"querystring",
"formiojs"
],
"vendorChunk": true,
"extractLicenses": false,
"buildOptimizer": false,
"optimization": false,
"namedChunks": true
},
"configurations": {
"production": {
"customWebpackConfig": {
"path": "./builder/webpack.extras.prod.ts"
},
"assets": [
{
"glob": "robots.txt",
"input": "nui/assets/",
"output": "/"
},
{
"glob": "humans.txt",
"input": "nui/assets/",
"output": "/"
},
{
"glob": "**/*",
"input": "nui/assets/favicons/",
"output": "/favicons/"
},
{
"glob": "*",
"input": "assets",
"output": "/public/images/"
},
{
"glob": "*",
"input": "config/init/",
"output": "/config/init/"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"localize": true,
"statsJson": false,
"optimization": true,
"outputHashing": "all",
"sourceMap": {
"scripts": true,
"styles": true,
"vendor": false,
"hidden": true
},
"namedChunks": false,
"extractLicenses": true,
"buildOptimizer": true,
"budgets": [
{
"type": "bundle",
"name": "main",
"maximumWarning": "700kb",
"maximumError": "1400kb"
},
{
"type": "initial",
"maximumWarning": "1500kb",
"maximumError": "3mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "50kb"
},
{
"type": "anyScript",
"maximumWarning": "1mb",
"maximumError": "5mb"
}
]
},
"be": {
"localize": ["nl-BE"]
},
"nl": {
"localize": ["nl-NL"]
},
"fr": {
"localize": ["fr-BE"]
},
"de": {
"localize": ["de-DE"]
},
"prod-stats": {
"browserTarget": "sandbox:build:production",
"statsJson": true,
"outputHashing": "none"
}
}
},
"serve": {
"builder": "@angular-builders/custom-webpack:dev-server",
"options": {
"browserTarget": "sandbox:build",
"port": 8080
},
"configurations": {
"production": {
"browserTarget": "sandbox:build:production"
},
"be": {
"browserTarget": "sandbox:build:be"
},
"nl": {
"browserTarget": "sandbox:build:nl"
},
"fr": {
"browserTarget": "sandbox:build:fr"
},
"de": {
"browserTarget": "sandbox:build:de"
},
"jit": {
"aot": false,
"sourceMap": {
"scripts": true,
"styles": false,
"vendor": false
}
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "sandbox:build",
"format": "xlf2",
"outputPath": "src/locale",
"outFile": "messages.xlf"
}
},
"test": {
"builder": "@angular-builders/custom-webpack:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"codeCoverage": true,
"styles": [],
"scripts": [],
"customWebpackConfig": {
"path": "./builder/webpack.extras.ts"
}
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "sandbox:serve"
},
"configurations": {
"production": {
"devServerTarget": "sandbox:serve:production"
},
"noserve": {
"devServerTarget": ""
},
"sandbox": {
"devServerTarget": "",
"baseUrl": "https://app.mvp-dev.aws.crossuite.com"
}
}
},
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": ["src/**/*.ts", "src/**/*.html"],
"exclude": ["**/node_modules/**"]
}
}
}
}
}
}
tsconfig.spec.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec"
},
"files": ["src/test.ts", "src/polyfills.ts"],
"include": [
"src/**/*.spec.ts",
"src/**/*.d.ts",
"@types/*.d.ts",
"nui/@types/*.d.ts",
"core/@types/*.d.ts"
]
}
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"target": "ES2015",
"module": "es2020",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"noUnusedParameters": false,
"noUnusedLocals": true,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"removeComments": false,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"noEmitHelpers": true,
"importHelpers": true,
"strictNullChecks": false,
"skipLibCheck": true,
"strict": true,
"strictPropertyInitialization": false,
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"pretty": true,
"resolveJsonModule": true,
"declaration": false,
"lib": ["dom", "es2019"],
"baseUrl": ".",
"outDir": "./out-tsc/base",
"paths": {
"nui/*": ["nui/src/lib/*"],
"nui/shared/*": ["nui/src/shared/*"],
"src/globals": ["src/globals.ts"],
"src/env": ["src/env.ts"],
"core/*": ["core/src/*"],
"store/*": ["src/store/*"],
"app/*": ["src/app/*"],
"lib/*": ["src/lib/*"],
"lazy/*": ["src/lazy/*"],
"modernizr": ["nui/vendor/modernizr.js"],
"test/*": ["src/test/*"],
"src/i18n": ["src/i18n/index.ts"]
},
"typeRoots": ["node_modules/@types", "@types", "nui/@types", "core/@types"]
},
"exclude": [
"aio-builds-setup",
"content",
"dist",
"build",
"node_modules",
"out-tsc",
"scripts",
"tools",
"nui/node_modules"
],
"angularCompilerOptions": {
"strictInputAccessModifiers": true,
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true,
"strictTemplates": true,
"strictInputTypes": true,
"strictOutputEventTypes": true
}
}