Webpack loader cannot find module

Question

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!

Avaunt

your relative path is correct for sure? – Westmorland

Pretty sure, same directory and everything... I'm starting to think the issue is with at-loader or at least typescript related. – Avaunt

Can you run webpack with --display-error-details to display more information about the errors? – Hugibert

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

@Avaunt did you find a good resource outlining how to create the typings for '*.md' files? I have exactly the same issue, but with images. – Inconvincible

Well, I keep comming back to this resource: typescriptlang.org/docs/handbook/declaration-files/… In the end though, here's how it turned out for me (myDocs.js) import myDoc from './myDoc.md'; export default { myDoc }; Sorry for the formatting. So I'm not even using typings for my markdown files. I'm sure there are other ways, but I had to move on... Edit: semicolons for clarity – Avaunt