Object(...) is not a function when using decorate

Question

I am trying to make observable property by using decorate from mobx-react however, I get error:

Uncaught TypeError: Object(...) is not a function
    at Object../src/vrp-ui/Button.js (Button.js:32)
    at __webpack_require__ (bootstrap 8330eff5292135af9e26:19)
    at Object../src/map/StudentsMap.js (logo.svg:1)
    at __webpack_require__ (bootstrap 8330eff5292135af9e26:19)
    at Object../src/App.js (App.css?9a66:26)
    at __webpack_require__ (bootstrap 8330eff5292135af9e26:19)
    at Object../src/index.js (index.css?f255:26)
    at __webpack_require__ (bootstrap 8330eff5292135af9e26:19)
    at Object.0 (Button.js:32)
    at __webpack_require__ (bootstrap 8330eff5292135af9e26:19)

Here is my implementation:

import React, { Component } from 'react'
import {Button} from 'semantic-ui-react'
import axios from 'axios'

import { decorate, observable } from "mobx"

class componentName extends Component {

    //@observable vrp_solution = {};

    constructor () {
        super()
        this.state = {
          solution: []
        }
        this.handleClick = this.handleClick.bind(this)
      }

      handleClick () {
        axios.post('http://localhost:8000/vrp/')
          .then(response => {
            vrp_solution= "!";
            console.log(response)})
      }


  render() {
    return (
      <Button onClick={this.handleClick}>
        Calculate Best Routes!
      </Button>
    )
  }
}

export default decorate(componentName,{vrp_solution: observable });


#Error is here: 

export default decorate(componentName,{vrp_solution: observable });

if I remove the decorate the error goes away.. any idea?

score 1 · Accepted Answer · answered May 24 '18 at 10:10

1

decorate and observable are from mobx not mobx-react, try,

import { decorate, observable } from "mobx"

also your Button should be

<Button>
   Calculate Best Routes!
</Button>

answered May 24 '18 at 10:10

supra28

1,646
10
17

fixing the import did it :) but why not `mobx-react` ?? – simo May 24 '18 at 10:23
those are mobx api's not mobx-reacts mobx-react only has bindings specific to reacts to be used only on react components for example to make a react component observer you will have to import observer from mobx-react. – supra28 May 24 '18 at 10:26
can you please check my update above, if I try to set the value of `vrp_solution` I get error: Uncaught (in promise) ReferenceError: vrp_solution is not defined – simo May 24 '18 at 10:28
Instead of //@observable vrp_solution = {}; Write vrp_solution = {}; – supra28 May 24 '18 at 10:34
I think you should move these properties to a seperate class, decorate is not meant to decorate the whole component. you should use a separate class to make observable properties and then inject it to your react component, check the react mobx docs – supra28 May 24 '18 at 10:38
if I I add `vrp_solution = {};` I still get: `vrp_solution is not defined` – simo May 24 '18 at 10:43

Object(...) is not a function when using decorate

1 Answers1