Module parse failed: Unexpected token

Hey Getting the error below I run the webpack command: $> webpack --mode "development"

stack trace:

Version: webpack 4.17.2
Time: 1357ms
Built at: 09/10/2018 8:13:26 PM Asset Size Chunks Chunk Names
bundle.js 1.37 MiB main [emitted] main
Entrypoint main = bundle.js
[0] fs (ignored) 15 bytes {main} [built]
[./node_modules/css-loader/index.js!./wwwroot/Source/Styles/app.css] ./node_modules/css-loader!./wwwroot/Source/Styles/app.css 165 bytes {main} [built]
[./node_modules/css-loader/index.js!./wwwroot/Source/Styles/site.css] ./node_modules/css-loader!./wwwroot/Source/Styles/site.css 207 bytes {main} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 509 bytes {main} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 519 bytes {main} [built]
[./wwwroot/Source/Script/app.ts] 221 bytes {main} [built]
[./wwwroot/Source/Script/site.ts] 274 bytes {main} [built] [failed] [1 error]
[./wwwroot/Source/Styles/app.css] 1.06 KiB {main} [built]
[./wwwroot/Source/Styles/site.css] 1.07 KiB {main} [built] + 30 hidden modules
ERROR in ./wwwroot/Source/Script/site.ts 25:8
Module parse failed: Unexpected token (25:8)
You may need an appropriate loader to handle this file type.
|
| class Animal {
> name: string;
| constructor(theName: string) { this.name = theName; }
| move(distanceInMeters: number = 0) { @ ./wwwroot/Source/Script/app.ts 4:0-16

It seems it does not recognize the properties in any of my classes when transpiling.

** ts code **

class Animal { name: string; constructor(theName: string) { this.name = theName; } move(distanceInMeters: number = 0) { console.log(`${this.name} moved ${distanceInMeters}m.`); }
}

tsconfig

{ "compilerOptions": { "outDir": "./app/", "noImplicitAny": true, "module": "es6", "target": "es5", "allowJs": true, "sourceMap": true }
}

package.json

 { "name": "ExposureAPI", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "wbp": "webpack" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.0.0", "@babel/preset-env": "^7.0.0", "@types/jquery": "^3.3.6", "@types/underscore": "^1.8.9", "babel-loader": "^8.0.2", "bootstrap": "^4.1.3", "css-loader": "^1.0.0", "gulp-babel": "^8.0.0", "jquery": "^3.3.1", "popper.js": "^1.14.4", "style-loader": "^0.22.1", "ts-loader": "^4.5.0", "typescript": "^3.0.1", "underscore": "^1.9.1", "webpack": "^4.17.2", "webpack-cli": "^3.1.0" }, "dependencies": { "@types/simplemde": "^1.11.7", "simplemde": "^1.11.2" }
}

webpack.config.js

 const path = require('path'); module.exports = { entry: './wwwroot/Source/Script/app.ts', module: { rules: [ { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/, devtool: 'inline-source-map' } ] }, resolve: { extensions: [ '.tsx', '.ts', '.js' ] }, output: { path: path.resolve(__dirname, 'wwwroot/App'), filename: 'bundle.js' }, module: { rules: [ { test: /\.css$/, exclude: ['node_modules'], use: [ { loader: "style-loader" }, { loader: "css-loader" } ] }] } };

Thanks

1 Answer

Apparently it happened because you have two module properties in the webpack config object.

Given JS objects can only hold one value per key - one value would be lost. And in this particular case the latter was overwriting the former, so webpack ended up configured without typescript loader config at all.