Why is this.myObservable undefined in a getter?

[borekb]

I've got a simple CartStore that looks like this:

import { decorate, observable, computed } from "mobx";

export class CartStore {
  items = [
    { name: "Product 1", price: 10 },
    { name: "Product 2", price: 40 }
  ];
  get total() {
    return this.items.reduce((total, item) => total + item.price, 0);
  }
}

decorate(CartStore, {
  items: observable,
  total: computed
});

In plain JS example in this CodeSandbox, everything works fine, however, in our Next.js + TypeScript project, it fails with Cannot read property 'reduce' of undefined in the getter.

This is the full stacktrace during SSR:

TypeError: Cannot read property 'reduce' of undefined
    at CartStore.get total (webpack-internal:///./stores/CartStore.ts:18:23)
    at ComputedValue.computeValue (/Users/borekb/demo/packages/node_modules/mobx/lib/mobx.js:1259:43)
    at ComputedValue.get (/Users/borekb/demo/packages/node_modules/mobx/lib/mobx.js:1190:35)
    at ObservableObjectAdministration.read (/Users/borekb/demo/packages/node_modules/mobx/lib/mobx.js:3958:37)
    at CartStore.get (/Users/borekb/demo/packages/node_modules/mobx/lib/mobx.js:4220:68)
    at CartStore.get (/Users/borekb/demo/packages/node_modules/mobx/lib/mobx.js:313:28)
    at HomePage (webpack-internal:///./pages/index.tsx:19:12)
    at processChild (/Users/borekb/demo/packages/node_modules/react-dom/cjs/react-dom-server.node.development.js:3043:14)
    at resolve (/Users/borekb/demo/packages/node_modules/react-dom/cjs/react-dom-server.node.development.js:2960:5)
    at ReactDOMServerRenderer.render (/Users/borekb/demo/packages/node_modules/react-dom/cjs/react-dom-server.node.development.js:3435:22)

Putting console.log(this) to the getter shows this:

CartStore { items: [Getter/Setter] }

Perhaps the array is transformed to some kind of wrapper? I thought that this was a behavior of MobX a long time ago, is it possible that Next.js transpiles to some very old version of JS or something?

Versions used:

{
  "dependencies": {
    "mobx": "5.15.4",
    "mobx-react": "6.1.8",
    "react": "16.13.1",
    "react-dom": "16.13.1"
  }
}

[borekb]

When I remove total: computed from the bottom of the store, the app doesn't crash (but of course is not reactive).

[borekb]

Also, converting the store to decorators fixed the issue 😕.

In the Next.js project, it meant adding this babel.config.js:

module.exports = api => {
  api.cache(true);
  return {
    presets: ['next/babel'],
    plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]],
  };
};

[mweststrate]

Did you enable the class-fields-proposal in babel, and set it to using loose mode? (strict mode will only be supported in v6 which is currently in beta)

…

On Sun, Sep 13, 2020 at 8:22 PM Borek Bernard ***@***.***> wrote: Also, converting the store to decorators fixed the issue 😕. In the Next.js project, it meant adding this babel.config.js: module.exports = api => { api.cache(true); return { presets: ['next/babel'], plugins: ***@***.***/plugin-proposal-decorators', { legacy: true }]], }; }; — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#2449 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBD3BHL5JU5B4TJETJLSFULWTANCNFSM4RK2NTEQ> .

[borekb]

Ah good tip! I used the default Next.js setup which I'm not too sure how exactly comes configured (but when they bootstrap your tsconfig.json, they put "target": "es5" there 😱).