Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Karma] Uncaught ReferenceError: sourceMapSupport is not defined

See original GitHub issue

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
  }
}