[Karma] Uncaught ReferenceError: sourceMapSupport is not defined

[KrakenTyio]

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

[just-jeb]

Hey @KrakenTyio, thanks for opening this issue!
If you switch back to the default Angular builder everything works fine?

[KrakenTyio]

Hi, when i switch to default its work almost correct, ofc almost bc i use in custom handler for svg loader, but yes when i turn off (comment) features in project which is needed this custom loaders, everethinks work correct

i found in other threats like that
tschaub/karma-source-map-support#30 (comment)

there is issue with this source-map-support and new ts-node version
after reading this for now i prepare my own quick prebuild file like npx tsc ./builder/webpack.extras.dev.ts which create ./builder/webpack.extras.dev.js and load to custom-webpack:karma this file and everethink work well

so issue is only when is setting wrote in ts

also will be nice set different tsconfig options for config ts file and different for builded project which will be tested

[DmitryEfimenko]

I locked the version of ts-node to 10.2.1 and that helped

[elliottregan]

@DmitryEfimenko How did you lock ts-node to 10.2.1?

[DmitryEfimenko]

@elliottregan in the package.json in the devDependencies in the version for the ts-node, make sure there is no ~ or ^:

"devDependencies": {
  "ts-node": "10.2.1"
}

[yasinkocak]

Is there any updates for this issue?

[elliottregan]

I just tried with ts-node@10.5.0, and the issue still exists. We're stuck on ts-node@10.2.1 still...

[elliottregan]

I started a discussion on the release notes for the version of ts-node that broke this. Hoping to get more traction with the issue.

TypeStrong/ts-node#1507

[cspotcode]

I've responded with a tiny, tested, working fix in TypeStrong/ts-node#1507 but no one has followed up. So the traction issue appears to be external to ts-node.

[SealmDegefu]

downgrading ts-node to V9 worked for me

[paulosteffenm]

Replacing this => "ts-node": "^10.7.0",
For this => "ts-node": "10.2.1"

Worked for me.