title: Unable to configure mobx in monorepo (using yarn workspaces)
body: <p>I am trying to setup a monorepo with react and react native app using a yarn workspaces.</p>
  
  <p>My problem is with mobx (and react-mobx) library. When I use it in the shared package it does not work.</p>
  
  <p>Here is the simple component in the shared library. It should just render a button and number and increment the number when the text is clicked: </p>
  
  <pre><code>import React, {Fragment} from 'react'
  import {action, decorate, computed, observable} from 'mobx'
  import {observer} from 'mobx-react'
  
  class Store {
      _number = 0
  
      increment = () =&gt; {
          this._number++
      }
  
      get number() {
          return String(this._number)
      }
  }
  
  // All of those are defined
  console.log('TEST', {action, decorate, computed, observable, observer})
  
  decorate(Store, {
      _number: observable,
      increment: action,
      number: computed,
  })
  
  class TestComponent extends React.Component {
      static defaultProps = {
          clickableComponent: 'button',
          numberElement: 'div',
      }
  
      store = new Store()
  
      render() {
          const {clickableComponent: ClickableComponent, numberElement: NumberElement} = this.props
          const {number, increment} = this.store
  
          return &lt;Fragment&gt;
              &lt;ClickableComponent onClick={increment}&gt;Incremenet&lt;/ClickableComponent&gt;
              &lt;NumberElement&gt;{number}&lt;/NumberElement&gt;
          &lt;/Fragment&gt;
      }
  }
  
  export default observer(TestComponent)
  
  </code></pre>
  
  <p>In browser (react) app I get the following error: </p>
  
  <pre><code>Failed to compile
  
  PATH_TO_PROJECT]/monorepo-rn/node_modules/mobx-react/index.module.js
  Module not found: Can't resolve 'react-dom' in '[PATH_TO_PROJECT]/monorepo-rn/node_modules/mobx-react'
  </code></pre>
  
  <p>In native app (react-native) I get the following runtime error: </p>
  
  <pre><code>error: bundling failed: Error: Unable to resolve module `react-native` from `PATH_TO_PROJECT]/monorepo-rn/node_modules/mobx-react/native.js`: Module `react-native` does not exist in the Haste module map
  </code></pre>
  
  <p>I think the problem is with packages and linking them. There are couple of things I've tried to fix this issue, none of them worked: </p>
  
  <ul>
  <li>Add <code>mobx</code> and <code>mobx-react</code> into <code>workspaces.nohoist</code>  </li>
  <li>Move all dependencies of the shared library into <code>peerDependencies</code></li>
  <li>Make sure to use <code>mobx@4.x</code> so it is compatible with react-native</li>
  </ul>
  
  <p>Here is the root package.json: </p>
  
  <pre><code>{
    "name": "monorepo-rn",
    "private": true,
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT",
    "workspaces": {
      "packages": [
        "packages/**"
      ],
      "nohoist": [
        "**/react-native",
        "**/react-native/**"
      ]
    },
    "scripts": {
      "run:web": "yarn workspace web start",
      "run:native:ios": "yarn workspace nativeapp react-native run-ios",
      "run:native:android": "yarn workspace nativeapp react-native run-android"
    }
  }
  </code></pre>
  
  <p>Here is the package.json of the shared package: </p>
  
  <pre><code>{
    "name": "test-component",
    "version": "1.0.0",
    "main": "src/index.js",
    "license": "MIT",
    "scripts": {
      "build": "babel src --out-dir lib"
    },
    "peerDependencies": {
      "mobx": "^4.x",
      "mobx-react": "^5.x",
      "react": "^16.x",
      "react-dom": "^16.x"
    },
    "devDependencies": {
      "@babel/cli": "^7.2.3",
      "@babel/core": "^7.2.2",
      "@babel/plugin-proposal-class-properties": "^7.3.0",
      "@babel/preset-env": "^7.3.1",
      "@babel/preset-react": "^7.0.0",
      "mobx": "^4.9.2",
      "mobx-react": "^5.4.3",
      "react": "^16.7.0",
      "react-dom": "^16.7.0"
    },
    "dependencies": {}
  }
  
  </code></pre>
  
  <p>Here is the package.json of the webapp:</p>
  
  <pre><code>{
    "name": "web",
    "version": "0.1.0",
    "dependencies": {
      "mobx": "^4.9.2",
      "mobx-react": "^5.4.3",
      "react": "^16.7.0",
      "react-dom": "^16.7.0",
      "react-scripts": "2.1.3",
      "test-component": "1.0.0"
    },
    "scripts": {
      "start": "SKIP_PREFLIGHT_CHECK=true react-app-rewired start",
      "build": "SKIP_PREFLIGHT_CHECK=true react-app-rewired build",
      "test": "react-app-rewired test",
      "eject": "react-scripts eject"
    },
    "eslintConfig": {
      "extends": "react-app"
    },
    "browserslist": [
      "&gt;0.2%",
      "not dead",
      "not ie &lt;= 11",
      "not op_mini all"
    ],
    "devDependencies": {
      "react-app-rewire-babel-loader": "^0.1.1",
      "react-app-rewired": "^2.0.3"
    }
  }
  
  </code></pre>
  
  <p>And here is the package.json of the react-native app:</p>
  
  <pre><code>{
    "name": "nativeapp",
    "version": "0.0.1",
    "private": true,
    "scripts": {
      "start": "node node_modules/react-native/local-cli/cli.js start",
      "test": "jest"
    },
    "dependencies": {
      "test-component": "1.0.0",
      "mobx": "^4.9.2",
      "mobx-react": "^5.4.3",
      "react": "16.6.3",
      "react-native": "0.58.3"
    },
    "devDependencies": {
      "babel-core": "^7.0.0-bridge.0",
      "babel-jest": "24.0.0",
      "jest": "24.0.0",
      "metro-react-native-babel-preset": "0.51.1",
      "react-test-renderer": "16.6.3"
    },
    "jest": {
      "preset": "react-native"
    }
  }
  </code></pre>
  
  <p>I am using the latest yarn version to date: 1.13.0</p>
  
  <p>I've created a repo with which it is possible to replicate the issue I have <a href="https://github.com/kaladivo/react-monorepo-mobx-issue" rel="nofollow noreferrer">here</a>. </p>
  
  <p>If anyone will be able to help me get it working I will be insanely grateful! </p>