super() is only allowed in a derived constructor

[JasinYip]

trafficstars

General Information

• [ ] Bug
• [ ] Improvement
• [ ] Feature
• [x] Other

Description I'm trying to use @component decorator and it shows this error.

Version: webpack 4.20.2
Time: 57ms
Built at: 09/27/2018 2:44:37 PM
     Asset       Size  Chunks             Chunk Names
 bundle.js    1.1 MiB    main  [emitted]  main
index.html  440 bytes          [emitted]
Entrypoint main = bundle.js
[./src/Components/TodoList.js] 2.14 KiB {main} [built] [failed] [1 error]
    + 45 hidden modules

ERROR in ./src/Components/TodoList.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/jasinyip/prj/hi/react-todolist/my-app/src/Components/TodoList.js: super() is only allowed in a derived constructor
   4 | @component
   5 | class Counter {
   6 |   constructor () {
>  7 |     super()
     |     ^
   8 |     this.state = {
   9 |       val: 2
  10 |     }
    at File.buildCodeFrameError (/Users/jasinyip/prj/hi/react-todolist/my-app/node_modules/@babel/core/lib/transformation/file/file.js:261:12)
    at NodePath.buildCodeFrameError (/Users/jasinyip/prj/hi/react-todolist/my-app/node_modules/@babel/traverse/lib/path/index.js:157:21)
    at Object.Super (/Users/jasinyip/prj/hi/react-todolist/my-app/node_modules/@babel/plugin-transform-classes/lib/transformClass.js:81:18)
    at NodePath._call (/Users/jasinyip/prj/hi/react-todolist/my-app/node_modules/@babel/traverse/lib/path/context.js:53:20)
    at NodePath.call (/Users/jasinyip/prj/hi/react-todolist/my-app/node_modules/@babel/traverse/lib/path/context.js:40:17)
    at NodePath.visit (/Users/jasinyip/prj/hi/react-todolist/my-app/node_modules/@babel/traverse/lib/path/context.js:88:12)
    at TraversalContext.visitQueue (/Users/jasinyip/prj/hi/react-todolist/my-app/node_modules/@babel/traverse/lib/context.js:118:16)
    at TraversalContext.visitSingle (/Users/jasinyip/prj/hi/react-todolist/my-app/node_modules/@babel/traverse/lib/context.js:90:19)
    at TraversalContext.visit (/Users/jasinyip/prj/hi/react-todolist/my-app/node_modules/@babel/traverse/lib/context.js:146:19)
    at Function.traverse.node (/Users/jasinyip/prj/hi/react-todolist/my-app/node_modules/@babel/traverse/lib/index.js:94:17)
 @ ./src/App.js 21:0-45 47:33-41
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
       4 modules
ℹ ｢wdm｣: Failed to compile.

Steps to reproduce

import { autobind, component } from 'react-decoration'

@component
class Counter {
  constructor () {
    super()
    this.state = {
      val: 2
    }
  }

  render () {
    return (
      <div onClick={this.increment}>
        {this.state.val}
      </div>
    )
  }

  @autobind
  increment () {
    this.setState({ val: this.state.val + 1 })
  }
}

export default Counter

Versions

{
  "dependencies": {
    "react": "^16.5.2",
    "react-decoration": "^2.0.0",
    "react-dom": "^16.5.2",
    "react-scripts": "1.1.5"
  },
  "devDependencies": {
    "@babel/core": "^7.1.0",
    "@babel/plugin-proposal-decorators": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.2",
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.0",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.1",
    "webpack-dev-server": "^3.1.9"
  }
}

• react-decoration: 2.0.0

[mbasso]

Hi @JasinYip, I've reproduced this issue and it seems that there are some problems with the constructor. I have to do more tests and find a solution. I think that at the moment, in your case, you can do something like this:

import { autobind, component } from 'react-decoration'

@component
class Counter {
  constructor () {
    this.state = {
      val: 2
    }
  }

  // or without constructor:
  // state = {
  //     val: 2
  // }

  render () {
    return (
      <div onClick={this.increment}>
        {this.state.val}
      </div>
    )
  }

  @autobind
  increment () {
    this.setState({ val: this.state.val + 1 })
  }
}

export default Counter