React project WebsocketServer.js SyntaxError on heartbeatInterval

user_3368818 0
Viewed 1353

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?

reactjs
2 Answers

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.

user_33688180

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

user_23377230
Related