Webpack: You may need an appropriate loader to handle this file

Question

I am setting up typescript with webpack, using awesome-typescript-loader. However webpack is giving me this error on build:

ERROR in ./src/logic/Something.ts

Module parse failed: Unexpected token (2:19) You may need an appropriate loader to handle this file type.

here is a piece of code from webpack.config.js:

module: {
        loaders: [
            {
                test: /\.(js|jsx)?$/,
                loader: "babel-loader",
                exclude: /node_modules/
            },
            {
                test: /\.(ts|tsx)?$/,
                loader: "awesome-typescript-loader",
                exclude: /node_modules/
            },
            {
                test: /\.(css|less)?$/,
                use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader?modules&localIdentName=[local]--[hash:base64:5]"
                }, {
                    loader: "less-loader"
                }]
            },
            {
                test: /\.json$/,
                exclude: /node_modules/,
                loader: 'json-loader'
            }
        ]
    },
    resolve: {
        extensions: [".js", ".jsx", ".ts", ".tsx", ".css", ".less"]
    }

and tsconfig.json:

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "module": "commonjs",
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "jsx":  "react" 
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

UPDATE

Something.ts file:

class Something {
    constructor(str: string) {
        console.log(str);
    }
}

export { Something };

Do you have any ideas where the issue might be? Thanks!

Solution

webpack v3 requires using use instead of directly writing the loader rule for loading loaders.

Do it like this, rather:

 {
    test: /\.(ts|tsx)?$/,
    use: {
      loader: 'awesome-typescript-loader'
    },
    exclude: /node_modules/
 }