1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Module parse failed: Unexpected token

Discussion in 'Programming/Internet' started by Anthony, Sep 12, 2018.

  1. Anthony

    Anthony Guest

    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

    Login To add answer/comment
     

Share This Page