2

我正在尝试使用纱线工作区设置一个带有反应和反应本机应用程序的 monorepo。

我的问题是 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'

在本机应用程序（react-native）中，我收到以下运行时错误：

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

这是 webapp 的 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

我创建了一个 repo，可以复制我在这里遇到的问题。

如果有人能够帮助我让它工作，我将非常感激！

4

1 回答 1

2

我已经想通了。我需要添加mobx-react到nohoist根package.json文件中（见下面的片段）。我不得不调整原生配置 lite 位（我使用过react-native-monorepo-helper）。该应用程序现在可以在所有平台上正常运行。

解决方法是将以下 nohoist 添加到根目录中package.json：

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

看到这个回购。它现在包含工作代码。

于 2019-02-04T11:31:00.000 回答