Compiling HTML templates fail when using Webpack function config.

[xirdneh]

Expected behaviour

Using:

• karma ^3.1.1
• webpack ^3.12.0
• jasmine ^ 3.3.0
  A webpack config such as:

// webpack.config.js
module.exports = function(env, arg){
    return {
        devtool: 'source-map',
        module: {
            rules: [
                {
                     test: /\.js$/,
                     exclude: /node_modules/,
                     options: {
                         presets: ['es2015'],
                         plugins: ['angularjs-annotate'],
                     },
                },
                {
                     test: /\.html$/,
                     exclude: /node_modules/,
                     use: [{
                         { loader: 'html-loader' }
                     }],
                },
                {
                     test: /\.(s?)css$/,
                     exclude: /node_modules/,
                     use: [{
                         loader: 'css-loader',
                     },
                     {
                          loader: 'sass-loader'
                     }],
                },
            ],
        },
    };
};

And a karma config such as:

//karma.config.js
const webpackConfig = require('./webpack.config.js')

module.exports = function(config){
    config.set({
        basePath: './',
        files: [
            './project/static/scripts/test-context.js',
        ],
        frameworks: ['jasmine'],
        browsers: ['FirefoxHeadless', 'ChromeHeadless'],
        plugins: [
            'karma-webpack',
            'karma-chrome-launcher',
            'karma-firefox-launcher',
            'karma-jasmine',
        ]
        preprocessors: {
            './project/static/scripts/test-context.js: ['webpack'],
            './project/static/scripts/**/*.spec.js: ['webpack'],
        }
        webpack: {
            devtool: webpackConfig.devtool,
            resolve: webpackConfig.resolve,
            module: webpackConfig.module,
           plugins: webpackConfig.plugins,
            externals: webpackConfig.externals
        },
    });
};

Running karma start karma.conf.js --single-run should run test correctly.

Actual behaviour

When karma is compiling the source, I assume using webpack, this error is returned:

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <!-- <div modal="ModalClass">
|     <div class="modal-header">
|       <h3 class="modal-title">Some Title</h3>
 @ ./project/static/scripts/applications/app.js 68:22-69
 @ ./project/static/scripts/test-context.js

And it shows for every template imported as

import template from './html/template-name.html';

Environment Details

• Karma version (output of karma --version):
  Karma version: 3.1.1
• Relevant part of your karma.config.js file

Steps to reproduce the behaviour

above ^

The odd thing is that if I change the webpack configuration to export an object instead of a function then it works. Any ideas how to make it work with a webpack function config?

[johnjbarton]

When karma is compiling the source, I assume using webpack, this error is returned:

This operation is done by karma-webpack; karma-runner is not involved. You need to find info from the webpack folks.