Webpack Karma cannot resolve local import

Question

I am using Webpack for both the app and tests (using https://github.com/webpack/karma-webpack for it). The app is in typescript and the tests in Babel.

Importing something from a standalone module in the tests works (using import { cleanHTML, fromHTML, toHTML } from "../../app/utils/text.ts";, ie I need to mention the .ts extension otherwise it fails).

When I actually try to import a React component that imports a component in another file, I get the following error: Module not found: Error: Cannot resolve 'file' or 'directory' ./blocks/paragraph.

The tree of directory looks like:

src/
  app/
    components/
      blocks/
        paragraph.ts
    main.ts
  tests/
    components/
       main_tests.js
    utils/

And the main.ts imports paragraph.ts like so import { ParagraphBlockComponent } from "./blocks/paragraph";

Normal compilation works but not the tests. Here is the karma config:

var path = require('path');

module.exports = function (config) {

config.set({
    basePath: 'src',
    singleRun: true,
    frameworks: ['mocha', 'chai'],
    reporters: ['dots'],
    browsers: ['Firefox'],
    files: [
        'tests/index.js'
    ],
    preprocessors: {
        'tests/index.js': ['webpack']
    },
    webpack: {
        noInfo: true,
        module: {
            loaders: [
                {
                    test: /\.ts$/,
                    loaders: ['awesome-typescript-loader']
                },
                {
                    test: /\_tests.js$/,
                    loaders: ['babel-loader']
                }
            ]
        }
    },
    webpackMiddleware: {
        noInfo: true,
        stats: {
            color: true,
            chunkModules: false,
            modules: false
        }
    }
});

};

Did I miss something?

Answer 1

Adding the following to the karma webpack config fixed it for me

resolve: {
    extensions: ['', '.js', '.ts']
},