Mobx: Release 3.1.1 breaks project with mobx-react

[LeonardoGentile]

Hello,
I have two exact projects, A and B, B is git-cloned from A.
On B I made an npm install and the only _observable_ (...sorry for the joke) difference between the two projects is that A uses mobx 3.1.0 while B uses mobx 3.1.1. Both projects are using [email protected].

When I run my webpack dev server for B the server starts but I get quite some errors in the chrome console and the application won't start:

Uncaught TypeError: Cannot read property 'Atom' of undefined
    at NavAccount.makePropertyObservableReference (index.js:307)
    at NavAccount.componentWillMount (index.js:328)
    at ReactCompositeComponent.js:348
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:347)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)

and

Uncaught TypeError: Cannot read property '__reactInternalInstance$0fim4fnlog8neublw254n53ik9' of null
    at Object.getClosestInstanceFromNode (ReactDOMComponentTree.js:106)
    at findParent (ReactEventListener.js:38)
    at handleTopLevelImpl (ReactEventListener.js:67)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:140)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
    at Object.batchedUpdates (ReactUpdates.js:97)
    at dispatchEvent (ReactEventListener.js:147)

Where my NavAccount component is something like this:

import React from 'react';
import { observer, inject } from 'mobx-react';
import classNames from 'classnames';
import { withRoute } from 'react-router5';

import styles from './NavAccount.sass';

@inject("userStore")
@observer
class NavAccount extends React.Component {
    // things here
}


export default withRoute(NavAccount);

Reverting to [email protected] fixes the problem

[jeffijoe]

Same here.

[mweststrate]

Unpublished 3.1.1 for now, will investigate

[mweststrate]

Either upgrading mobx to 3.1.2 _or_ mobx-react to 4.1.1 (or doing both :)), should fix this issue. If someone can confirm that would be great!

[jeffijoe]

@mweststrate fix confirmed, upgraded both 😄

[mweststrate]

Root cause of the issue is that mobx-react was accidentally using the default export of mobx, although mobx doesn't have (isn't supposed to have) a default export. So it is actually unclear to me why it worked before. Somehow I guess either babel/webpack/typescript have slightly changed how they export the code and do no longer "fix" the usage of default imports?

Fix in mobx-react: https://github.com/mobxjs/mobx-react/commit/8573bf0d88430f4e766c6f838484ef4694736b76#diff-08f3e9ab539253c87ea111cc61c69e29L1

Workaround in mobx for un-upgraded mobx-react versions: https://github.com/mobxjs/mobx/commit/96c150d52d58b5353eb3748a7a7bb09faa95bac5

[matthewrobb]

@mweststrate something has changed because I have had a couple issues with imports that used to work fine coming in as the module namespace object instead of the default import separately from issues with mobx.

[LeonardoGentile]

@mweststrate I upgraded both and the error went away 👍

[LeonardoGentile]

Is due to this fix that webstorm complains "Cannot Resolve Symbol" anytime I import anything from mobx?

I'm not sure this happened before