Mobx-state-tree: Getting started sample gives: [MobX] Cannot obtain atom from undefined

[jtheisen]

_Bug report_

On the getting-started page of the current documentation as it shows on mobx-state-tree.js.org, the first sample with any output gives the error message in the subject line.

It also does this in my vanilla create-react-app on this first attempt to try mst.

[ptboyer]

@jtheisen What version of mobx are you using?

I only started seeing this error after upgrading to "mobx": "^6.0.0", whereas the documentation for MST only mentions support for mobx 5.

[jtheisen]

@ptboyer Indeed that works, thanks a lot!

The docs' samples are not locked to a major version.

[ptboyer]

@jtheisen Glad that helped! 😃

Not sure about the "docs' samples not being locked to a major version", but the supported major versions of MobX are stated in the Installation section: "However, for MobX version 4 or 5 can be used."

[makarov-roman]

any ideas what should we do to support mobx 6?

[ptboyer]

@makarov-roman Having a little look now:

• The error "Cannot obtain atom from ..." is defined here with error code 28.
• Error code 28 is only referenced here as part of getAtom.
• getAtom is currently imported by mobx-state-tree in:
  
  
  
  • /src/utils.ts here
  
  
  • /src/types/complex-types/model.ts here.
  
  

That's what I got so far.

[ptboyer]

getAtom "dies" if thing (first param) is undefined, as the error message suggests.

getAtom is used in invalidateComputed function from /src/utils.ts, which is called here as invalidateComputed(this, "snapshot"), so is this undefined at the time?

There is also a "FIXME" here:

getSnapshot(node: this["N"], applyPostProcess = true): this["S"] {
  ...
  this.forAllProps((name, type) => {
      // TODO: FIXME, make sure the observable ref is used!
      ;(getAtom(node.storedValue, name) as any).reportObserved()
      res[name] = this.getChildNode(node, name).snapshot
  })
  ...
}

... from which of getSnapshot the node.storedValue is set for a model (object-node) here which could be undefined?

[Romanior]

There is a WIP PR to support Mobx6 https://github.com/mobxjs/mobx-state-tree/pull/1569. the sandbox demo is on mobx 6

[ptboyer]

@Romanior Great! 😄

[elliothershberg]

Hi! I hit this issue also. Is there a package.json that could be used to getting the sandboxes in the tutorial working again? When I tried specifying a version of Mobx, I ran into issues with the other dependencies.

[elliothershberg]

Reinstalling using: yarn add [email protected] mobx-react mobx-state-tree worked for me to get the demo code to work 👍

[adamerose]

Reinstalling using: yarn add [email protected] mobx-react mobx-state-tree worked for me to get the demo code to work 👍

This led me to get this error: https://github.com/mobxjs/mobx-react-lite/issues/319

I had to do npm install mobx@5 mobx-react@6 mobx-state-tree

The mobx-state-tree docs should be updated to reflect this since the latest versions of mobx (6) and mobx-react (7) are not supported and broke all the demos.

[tejaspda]

I am still facing this issue any suggestion how to fix it from PR does it not available if I do npm install mobx-state-tree

[stfenjobs]

same error

[kuasha420]

@stfenjobs An RC is available for latest mobx/mobx-react(-lite). Try it with

yarn add mobx-state-tree@rc

[dpyeates]

mobx-state-tree@rc works for me, thanks.

[eunsukimme]

mobx(v6.0.1), mobx-react(v7.0.0), mobx-state-tree(v4.0.1-rc.1)
In codesandbox, above versions works for me.

[justin-hackin]

Thanks for your efforts to get Mobx6 supported! Wanted to get switched over to react-mobx-lite too so I tried installing the RC version but I encountered the following error (probably because I'm using hooks and provider to get state into my components). Not sure which package is responsible though...

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (:9080/home/cosmo/code/spacecraft-net-factory/node_modules/react/cjs/react.development.js:1465)
    at Object.useState (:9080/home/cosmo/code/spacecraft-net-factory/node_modules/react/cjs/react.development.js:1496)
    at Object.useForceUpdate (:9080/home/cosmo/code/spacecraft-net-factory/node_modules/mobx-react-lite/lib/utils/utils.js:22)
    at Object.useObserver (:9080/home/cosmo/code/spacecraft-net-factory/node_modules/mobx-react-lite/lib/useObserver.js:20)
    at :9080/home/cosmo/code/spacecraft-net-factory/node_modules/mobx-react-lite/lib/observer.js:26
    at renderWithHooks (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:14804)
    at updateFunctionComponent (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:17035)
    at updateSimpleMemoComponent (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:16973)
    at updateMemoComponent (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:16862)
    at beginWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:18683)

[kasim444]

If you update the mobx-state-tree package, the problem will probably be resolved. At least it was the solution for me.

yarn upgrade mobx-state-tree --latest