Webpack loader cannot find module

Edit 2: The problem is not with webpack but with typescript. Something with declaring "*.md" as a module in a separate declaration file called *.d.ts

Edit: Confirmed the issue is not with webpack itself, since I got the following to work:

import txt from '../documents/test.md'

export default {
  txt,
}

Trying to load text files for rendering client side.

I'm following instructions for raw-loader: https://webpack.js.org/loaders/raw-loader/

I'm also using TypeScript.

import * as React from 'react'
import txt from './file.txt'

export default class HomePage extends React.Component<undefined, undefined> {
  render () {
    return <div>{txt}</div>
  }
}

My webpack config:

module.exports = {
  entry: './src/index',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist',
  },

  devtool: 'source-map',

  devServer: {
    hot: true,
  },

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

  module: {
    rules: [
      { test: /\.tsx$/, loader: 'awesome-typescript-loader', },
      { test: /\.js?$/, loader: 'source-map-loader', enforce: 'pre', },
      { test: /\.txt$/, use: 'raw-loader' },
    ],
  },
}

But all I get is:

ERROR in [at-loader] ./src/pages/Home.tsx:7:21
TS2307: Cannot find module './file.txt'.

What am I missing? Thanks!