Karma throws "Module parse failed" when reading typescript

Question

Repo with an example: https://github.com/OriolInvernonLlaneza/karma-webpack-error-example

I had Karma + Jasmine tests running correctly with Angular 11 and Webpack 4. However, when trying to update Angular and Webpack to v12 and v5, I'm getting stuck on the following error when launching the tests:

This is my Karma conf:

module.exports = (config) => {
  config.set({
    // ... normal karma configuration

    // make sure to include webpack as a framework
    frameworks: ['jasmine', 'webpack'],

    plugins: [
      'karma-webpack',
      'karma-jasmine',
      'karma-chrome-launcher',
      'karma-jasmine-html-reporter',
      'karma-coverage-istanbul-reporter',
      'karma-sourcemap-loader',
    ],

    files: [
      // all files ending in ".spec.ts"
      // !!! use watched: false as we use webpacks watch
      { pattern: './src/**/*.spec.ts', watched: false }
    ],

    preprocessors: {
      // add webpack as preprocessor
      "**/*.ts": ['webpack', 'sourcemap']
    },

    browsers: ['Chrome'],
    reporters: ['progress'],
    port: 9876,

    webpack: {
      externals: [
        /^@example\/*/,
      ],
      module: {
        rules: [
          {
            test: /\.ts$/,
            loader: 'ts-loader',
          },
        ],
      },
    }
  });
}

And my Webpack conf:

const singleSpaAngularWebpack = require('single-spa-angular/lib/webpack').default
    const path = require('path');
    
    module.exports = (angularWebpackConfig, options) => {
      const singleSpaWebpackConfig = singleSpaAngularWebpack(angularWebpackConfig, options);
        
      singleSpaWebpackConfig.externals = [
        /^@example\/*/,
      ];
    
      singleSpaWebpackConfig.condig.resolve.extensions = ['', '.ts', '.js']

      singleSpaWebpackConfig.module.rules = [
          { test: /\.ts$/, use: ['angular2-template-loader', 'ts-loader'], exclude: './node_modules' },
          { test: /\.js$/, use: 'babel-loader', exclude: './node_modules' }
      ];
}

I also tried with the custom rules I had before and got the same error.

Thank you in advance!

Edit:

Here's the package.json:

"dependencies": {
    "@angular/common": "~12.1.3",
    "@angular/compiler": "~12.1.3",
    "@angular/core": "~12.1.3",
    "@angular/forms": "~12.1.3",
    "@angular/platform-browser": "~12.1.3",
    "@angular/platform-browser-dynamic": "~12.1.3",
    "@angular/router": "~12.1.3",
    "angular-i18next": "^10.3.0",
    "core-js": "^3.6.4",
    "i18next": "^20.3.5",
    "rxjs": "^6.6.7",
    "single-spa": "~5.9.3",
    "single-spa-angular": "~5.0.2",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "12",
    "@angular-devkit/build-angular": "~12.1.3",
    "@angular/cli": "~12.1.3",
    "@angular/compiler-cli": "~12.1.3",
    "@angular/language-service": "~12.1.3",
    "@babel/core": "^7.6.4",
    "@babel/preset-env": "^7.6.3",
    "@types/jasmine": "^3.6.0",
    "@types/jasminewd2": "^2.0.3",
    "@types/node": "^16.4.5",
    "angular2-template-loader": "^0.6.2",
    "autoprefixer": "^9.6.5",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "enhanced-resolve": "^4.1.1",
    "jasmine-core": "~3.8.0",
    "jasmine-spec-reporter": "^7.0.0",
    "karma": "~6.3.4",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.7.0",
    "karma-source-map-support": "^1.4.0",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^5",
    "ts-loader": "^9.2.5",
    "ts-node": "^10.2.1",
    "tslib": "^2.0.0",
    "tslint": "~6.1.0",
    "typescript": "4.3.5",
    "webpack": "^5",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  }

.babelrc:

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 versions"]
      }
    }]
  ],
  "plugins": [
    "@babel/syntax-dynamic-import"
  ]
}

Update: I changed the test framework to Jest as I couldn't find the fix for this.

Answer 1

ts-loader 6.x.x is not compatible with webpack 5.x.x. Based on the documentation ts-loader 9.x.x needs to be used with webpack 5.x.x.

Please try to update the ts-loader to the latest version. It might not solve the problem fully, but lets give it a try.

Answer 2

From your error, your issue is definitely with the ts files, as it states "error in ./src/test.ts"

Please update ts-loader to version 9, as github Compatibility documentation for ts-loader states:

TypeScript: 3.6.3+

webpack: 5.x+ (please use ts-loader 8.x if you need webpack 4 support)

node: 12.x+

Also further Research states the following:

The minimum webpack version supported is now webpack 5. This simplifies the codebase, which previously had to if/else the various API registrations based on the version of webpack being used. The minimum node version supported is now node 12

According to webpack documentation that states:

Webpack 5 requires at least Node.js 10.13.0 (LTS)

Upgrade webpack-cli to the latest available version (when used)

So to be clear:

ts-loader - to be updated to version 9 minimum.

node - to be updated to version 12 minimum.

I notice your using 2 loaders for ts, I'm not sure whether the angular2-template-loader is supported for webpack 5, as it was last published 5 years ago according to the angular2-template-loader documentation.

From looking at webpack Integration documentation, specifically for integration using karma it says you can add webpack configuration within karma.config. So it leads me to believe that it might be struggling to read your webpack.config. could you try updating your karma.config specifically the webpack key to the below:

 webpack: {
      resolve: {
        modules: ['node_modules']
      },
      module: {
        rules: [
          {
            test: /\.ts$/,
            loader: 'ts-loader',
          },
        ],
      },
    }

I've added the resolve - modules to the webpack key as it:

Tells webpack what directories should be searched when resolving modules.