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:

{
  "pilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "module": "monjs",
    "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!

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:

{
  "pilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "module": "monjs",
    "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!

• javascript
• typescript
• webpack

• What's the content of Something.ts? You could potentially be importing something that you haven't defined in your webpack config. – Dan Gamble Commented Nov 20, 2017 at 13:22
• it is a super simple .ts file, I just wanted to get it working, please see the update – Martin Shishkov Commented Nov 20, 2017 at 13:24
• Which version of webpack are you using? – Siya Mzam Commented Nov 20, 2017 at 13:34
• from package.json file: "webpack": "^3.8.1" – Martin Shishkov Commented Nov 20, 2017 at 13:34
• Okay cool, and have you tried this syntax: { test: /\.(ts|tsx)?$/, use: { loader: "awesome-typescript-loader" }, exclude: /node_modules/ } It seems that webpack v3 requires that kind of syntax. – Siya Mzam Commented Nov 20, 2017 at 13:42

1 Answer 1

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/
 }