Question

我正在尝试设置一个带有反应的Monorepo并使用yarn工作区来响应本机应用。

我的问题是mobx（和react-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
确保使用mobx@4.x，使其与react-native兼容

这是根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"
  }
}

这是react-native应用程序的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。现在，它包含工作代码。

无法在Monorepo中配置Mobx（使用纱线工作区）

1 个答案: