React project WebsocketServer.js SyntaxError on heartbeatInterval - reactjs

Question

I created a React project that uses webpack-dev-server and my package.json is:
{
"name": "testproject",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode production",
"dev": "webpack --mode development",
"format": "prettier --write \"src/**/*.{js,jsx}\"",
"lint": "eslint **/*.{js,jsx} --quiet",
"start": "webpack-dev-server --mode development --open"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.15.8",
"#babel/preset-env": "^7.15.8",
"#babel/preset-react": "^7.14.5",
"babel-loader": "^8.2.2",
"css-loader": "^6.4.0",
"eslint": "^8.0.1",
"eslint-config-prettier": "^8.3.0",
"html-loader": "^2.1.2",
"html-webpack-plugin": "^5.4.0",
"mini-css-extract-plugin": "^2.4.2",
"prettier": "^2.4.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"webpack": "^5.58.2",
"webpack-cli": "^4.9.0",
"webpack-dev-server": "^4.3.1"
}
}
When I run npm run start, I'm getting this error:
[webpack-cli] C:\dev\testproject\node_modules\webpack-dev-server\lib\servers\WebsocketServer.js:10
static heartbeatInterval = 1000;
SyntaxError: Unexpected token =
at new Script (vm.js:79:7)
at NativeCompileCache._moduleCompile (C:\dev\testproject\node_modules\v8-compile-cache\v8-compile-cache.js:240:18)
at Module._compile (C:\dev\testproject\node_modules\v8-compile-cache\v8-compile-cache.js:184:36)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
at Module.load (internal/modules/cjs/loader.js:598:32)
at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
at Function.Module._load (internal/modules/cjs/loader.js:529:3)
at Module.require (internal/modules/cjs/loader.js:636:17)
at require (C:\dev\testproject\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
at Server.getServerTransport (C:\dev\testproject\node_modules\webpack-dev-server\lib\Server.js:1009:28)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! testproject#1.0.0 start: `webpack-dev-server --mode development --open`
What could be the cause of this?

Answer 1

It turns out upgrading my node version (in my case, from 10.13.0 to 16.11.1) resolved this.
I tried this based on advice found here and it worked.

Answer 2

Your babel transpiling is not set up properly you need to add appropriates plugins in your babel config.
Basically this error means that below statement is not supported, and thats because babel is not transpiling your code to a supported ES version.
static heartbeatInterval = 1000;
you may have to use this plugin: https://babeljs.io/docs/en/babel-plugin-proposal-class-properties