reactjs - 无法在 monorepo 中配置 mobx（使用 yarn 工作区）

问题描述

我正在尝试使用纱线工作区设置一个带有反应和反应本机应用程序的 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，可以复制我在这里遇到的问题。

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

标签： reactjsreact-nativemobxmonorepoyarn-workspaces

reactjs - 无法在 monorepo 中配置 mobx（使用 yarn 工作区）

问题描述

解决方案

推荐阅读