添加类字段时出现“模块解析失败：意外令牌”

Question

Below TypeScript code (it means that static class fields and other TypeScript features are available) successfully has been built with Webpack:

export default class ConfigRepresentative {
  constructor() {
    console.log('ok');
  }
}

Fails (same if to remove private and static ):

export default class ConfigRepresentative {

  private static ownInstanceHasBeenCreated: boolean = false;

  constructor() {
    console.log('ok');
  }
}

Error:

ERROR in ./TypeScriptSource/index.ts 7:10
Module parse failed: Unexpected token (7:10)
You may need an appropriate loader to handle this file type.
| export default class ConfigRepresentative {
| 
>   private static ownInstanceHasBeenCreated: boolean = false;
| 
|   constructor() {

webpack.config.js

module.exports = {

  entry: './TypeScriptSource/index.ts',
  output: {
    filename: 'index.js',
    path: __dirname,
    libraryTarget: 'umd'
  },

  target: 'node',
  mode: 'production',
  watch: true,

  module: {
    rules: [
      {
        test: /\.ts?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js']
  }
};

For saving your time on reproducing this problem, I attached the souse files. error.zip

Answer 1

It is because the project was inside node_modules folder. The setting exclude: /node_modules/ cancels the rule {test: /\\.ts?$/, use: 'ts-loader'} , but without class property code is pure JavaScript.

(I know that it is bad practice - to develop something inside node_modules , however I don't know the other solution for developing dependencies. In this case, single ConfigRepresentative is useless if it does not used by other project).