Property was accessed through the prototype chain. Use 'decorate' instead

[LeonardoGentile]

Hello,
since MobX 4 I'm (sometimes) having the following issue.
I'm declaring a computed property and an autorun attached to a React component, like this:

@inject(routerStore)
class RouteNode extends Component {
  
  // .....  

  @computed get isIntersection() {
    return this.routerStore.intersectionNode === this.nodeName;
  }

  componentDidMount() {
    this.autorunDisposer = autorun(() => {
      if (this.isIntersection) {
        this.setState({
          route: this.routerStore.route
        });
      }
    });
  }

  componentWillUnmount() {
    this.autorunDisposer();
  }
  
  // ....
}

Sometimes I receive this in the console:

Encountered an uncaught exception that was thrown by a reaction or observer component, in: 'Reaction[Autorun@163] Error: [mobx] Property 'isIntersection' of '[object Object]' was accessed through the prototype chain. Use 'decorate' instead to declare the prop or access it statically through it's owner

So probably I should not declare @computed get isIntersection() on the component class but somehow use decorate?

The issue seems similar to #1427 but it's not exactly clear to me how I could solve it in this case 🤔

[urugator]

I can't replicate https://codesandbox.io/s/rl5z5xno9p
Can you set up a reproduction?
Do you extend from a custom Component or something like that?

[mweststrate]

HMR? Op do 19 apr. 2018 19:06 schreef urugator <[email protected]>:

…

I can't replicate https://codesandbox.io/s/rl5z5xno9p Can you set up a reproduction? Do you extend from a custom Component or something like that? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#1506 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABvGhGv6-ZRurl9rDSjRgWdk5DB_AQLGks5tqMQSgaJpZM4TcHzj> .

[LeonardoGentile]

Full implementation here

@mweststrate yes indeed this happen during HMR!

[AmazingTurtle]

I'm having the same errors with HMR.
Using [email protected], [email protected], [email protected].

Following babel plugins:

"plugins": [
  [
    "import",
     {
      "libraryName": "antd",
      "libraryDirectory": "lib",
      "style": "css"
    }
  ],
  "transform-runtime",
  "lodash",
  "transform-decorators-legacy",
  "extract-hoc/babel",
  "react-hot-loader/babel"
]

Following loaders for happypack were used:

[
    {
        loader: 'tslint-loader',
        options: {
            typeCheck: true,
            getCustomTransformers: () => ({
                before: [tsImportPluginFactory({
                    libraryName: 'antd',
                    libraryDirectory: 'es',
                    style: 'css',
                })]
            })
        },
        enforce: 'pre'
    },
    {
        loader: 'babel-loader'
    },
    {
        loader: 'ts-loader',
        options: {
            happyPackMode: true
        }
    }
]

These are my entrypoints

entry: [
    'webpack/hot/only-dev-server',
    'webpack-dev-server/client?http://localhost:3000',
    'react-hot-loader/patch',
    'url-search-params-polyfill',
    './src/index'
],

[mweststrate]

decorators and react hot loader has always been troublesome, and I gave up on it a few years ago :). That being said, if changing the above error to a warning fixes the problems, a PR for that will probably be accepted

[mweststrate]

Released as 4.3.0