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

2

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Marcus Vance

Marcus Vance

Cybersecurity & Digital Privacy Researcher

Marcus Vance is a cybersecurity auditor and technology writer dedicated to educating the public about online safety, data privacy regulations, enterprise security, and emerging cyber threats.

Share this article
Twitter Facebook Pinterest