Fixing webpack error: “You may need an appropriate loader to handle this file type.”

When you set up Webpack to load other file types (e.g. Typescript or JSX) you set up a list of rules for how to delegate responsibility for a particular file type.

If you screw this up, you can get errors like this – in particular, the typescript loader seems to be particularly more sensitive than the babel loader.

ERROR in ./data/talks/json/categories.ts
Module parse failed: D:\projects\image-annotation\data\talks\json\categories.ts Line 1: Unexpected token :
You may need an appropriate loader to handle this file type.
| let data: Object = {
|   "History": {
|     "Political History": {},
 @ ./src/lecture_search/LectureSearchConfig.ts 3:19-62

The section of my webpack.config that fixes this looks like so:

  module: {
    loaders: [
      {
        test: /(\.ts|\.tsx)$/, 
        loaders: ["ts-loader"],
        include: [path.join(__dirname, "src"), path.join(__dirname, "data")] 
      },
      { 
        test: /\.css$/, 
        loader: "style-loader!css-loader" 
      },     
      {
        test: /(\.jsx|\.js)$/,
        loaders: ["babel"],
        include: path.join(__dirname, "src")
      }      
    ]
  }

The key thing is that you need both the file extensions and paths for Typescript. If you import something in a file Babel handles, it will just find it, but Typescript will refuse unless you include the path in the “include” section (excepting things in node_modules).