我正在尝试使用yarn工作区设置一个带有react和react本地应用程序的monoreo。
我的问题是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兼容
这是根包.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原生应用程序的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
我创建了一个回购，可以复制我在这里的问题。
如果有人能帮我工作，我会非常感激！
我已经想通了。我需要将mobx-react添加到根package.json文件的nohoist中(请参阅下面的片段)。我不得不调整原生配置lite位(我使用了react原生monorepo助手)。该应用程序现在可以在所有平台上正常工作。
修复方法是在根package.json:中添加以下nohoist
"nohoist": [
"**/react-native",
"**/react-native/**",
"**/mobx-react/**",
"**/mobx-react"
]
请参阅此回购。它现在包含工作代码。