Thursday, April 25, 2024
 Popular · Latest · Hot · Upcoming
174
rated 0 times [  181] [ 7]  / answers: 1 / hits: 77793  / 6 Years ago, tue, september 11, 2018, 12:00:00

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


More From » typescript

 Answers
37

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.


[#53524] Thursday, September 6, 2018, 6 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
rhett

Total Points: 671
Total Questions: 100
Total Answers: 102

Location: Hong Kong
Member since Tue, Oct 19, 2021
3 Years ago
rhett questions
Thu, Oct 28, 21, 00:00, 3 Years ago
Mon, Aug 2, 21, 00:00, 3 Years ago
Fri, Dec 11, 20, 00:00, 3 Years ago
Fri, Aug 7, 20, 00:00, 4 Years ago
Thu, Mar 26, 20, 00:00, 4 Years ago
;