Monday, June 3, 2024
 Popular · Latest · Hot · Upcoming
146
rated 0 times [  147] [ 1]  / answers: 1 / hits: 23082  / 7 Years ago, mon, november 20, 2017, 12:00:00

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!


More From » typescript

 Answers
24

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

[#55888] Thursday, November 16, 2017, 7 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
makiyac

Total Points: 470
Total Questions: 100
Total Answers: 115

Location: Botswana
Member since Sat, Jan 7, 2023
1 Year ago
;