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"
  }
}

Answer 1

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

Answer 2

Change componentDidMount method declaration to:

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

   render() {

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

2 个答案: