无法配置monorepo mobx（使用纱工作区）

Question

我想设置一个monorepo反应并用纱线工作区反应的本机应用。

我的问题是与mobx（和反应-mobx）库。当我在共享的包中使用它，它不工作。

这里是在共享库中的简单部件。它应该只是呈现一个按钮，数量和递增数量单击文本时：

import React, {Fragment} from 'react'
import {action, decorate, computed, observable} from 'mobx'
import {observer} from 'mobx-react'

class Store {
    _number = 0

    increment = () => {
        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 <Fragment>
            <ClickableComponent onClick={increment}>Incremenet</ClickableComponent>
            <NumberElement>{number}</NumberElement>
        </Fragment>
    }
}

export default observer(TestComponent)

在浏览器（反应）应用程序，我得到以下错误：

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'

在本机应用程序（反应母语）我得到以下运行时错误：

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

我认为这个问题是使用包和联系起来。有几件事情我一直试图解决这个问题，他们没有工作：

• 添加mobx和mobx-react到workspaces.nohoist
• 移动共享库的所有依赖到peerDependencies
• 确保使用[email protected]因此它与反应原生兼容

这是根的package.json：

{
  "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"
  }
}

这里是共享封装的的package.json：

{
  "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": {}
}

这里是Web应用程序的的package.json：

{
  "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": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "react-app-rewire-babel-loader": "^0.1.1",
    "react-app-rewired": "^2.0.3"
  }
}

这里是反应原生应用程序的的package.json：

{
  "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"
  }
}

我使用的是最新版本的纱迄今：1.13.0

我创建了一个回购与它可以复制我有here问题。

如果任何人都可以帮助我得到它的工作我会疯狂不胜感激！

Answer 1

我已经想通了。我需要添加mobx-react到根nohoist文件package.json（看到的片段波纹管）。我不得不调整本机配置精简版位（我用react-native-monorepo-helper）。该应用程序现在可以在所有平台上，因为它应该。

此修复程序是添加以下nohoist到根package.json：

"nohoist": [
      "**/react-native",
      "**/react-native/**",
      "**/mobx-react/**",
      "**/mobx-react"
    ]

见this repo。现在，它包含运行的代码。