Syntax error with npm start, package.json, and webpack

Question

I'm trying to simply start my program on localhost, but npm start gives me following error (I assume its not translating ES6 for some reason):

    ERROR in ./src/App.js
Module build failed: SyntaxError: Unexpected token (13:20)

  11 | 
  12 | export class App extends Component {
> 13 |   componentDidMount = () => {
     |                     ^
  14 |     this.props.actions.fetchArticles()
  15 |   }
  16 |   render() {

I can assume there's a problem in my package.json file.

Ive tried installing every npm I can think of. Is this a common issue?

./package.json

{
  "name": "minimal-react",
  "version": "1.0.0",
  "description": "Minimal React.js starter kit for experiments.",
  "main": "./src/index.js",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/BatenkovT/Minimal-React.git"
  },
  "keywords": [
    "react",
    "webpack",
    "starter-kit"
  ],
  "author": "BatenkovT",
  "license": "ISC",
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.3",
    "babel-plugin-transform-es2015-spread": "^6.22.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.4",
    "style-loader": "^0.18.2",
    "webpack": "^3.3.0",
    "webpack-dev-server": "^2.5.1"
  },
  "bugs": {
    "url": "https://github.com/BatenkovT/Minimal-React/issues"
  },
  "homepage": "https://github.com/BatenkovT/Minimal-React#readme",
  "directories": {
    "doc": "docs"
  }
}

score 0 · Answer 1 · answered Feb 26 '18 at 17:51

0

your method declaration is wrong.

Change:

export class App extends Component {
  componentDidMount = () => {               
    this.props.actions.fetchArticles()
  }
  // rest of your component

to

export class App extends Component {
  componentDidMount {               
    this.props.actions.fetchArticles()
  }
  // rest of your component

answered Feb 26 '18 at 17:51

messerbill

5,499
1
27
38

Although, you can define componentDidMount without arrow function, but that not an error really – Shubham Khatri Feb 26 '18 at 17:55
@ShubhamKhatri the error will disappear using this implementation. You will also not lose any wanted behaviour (i.e. `this` will point to the class) – messerbill Feb 26 '18 at 17:57
The error will disappear, I agree, but that not an incorrect syntax. The error disappears because lifecyle method are binded by default, but say instead of componentDidMount you have your custom function , can you not write `handleChange = (e) => {}`, This is transform class properties syntax. Check the duplicate question on why the OP receives this error – Shubham Khatri Feb 26 '18 at 18:00
Also BTW, you syntax seems to be wrong `componentDidMount {` as componentDidMount is a function and not an object – Shubham Khatri Feb 26 '18 at 18:00
no, the syntax is correct. I use it like this every day. Also on custom functions i use this syntax. Why'd you say that this is not a too good way? I don't get it :o – messerbill Feb 26 '18 at 18:02
at work i do it exactly like this (but i also add `public / private` keywords to my methods) - like `public myMethod(myParam: string): void { ....` – messerbill Feb 26 '18 at 18:03

Sajib Khan · Answer 2 · 2018-02-26T17:59:11.330

0

Change componentDidMount method declaration to:

export class App extends Component {
  componentDidMount () {
    this.props.actions.fetchArticles()
   }

   render() {

edited Feb 26 '18 at 17:59

answered Feb 26 '18 at 17:53

Sajib Khan

22,878
9
63
73

Syntax error with npm start, package.json, and webpack

2 Answers2