Невозможно настроить mobx в 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'

В нативном приложении (act-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 так что он совместим с реагирующим

Вот корневой пакет.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": {}
}

Вот 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 для приложения "native-native":

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

Я создал репозиторий, с помощью которого можно повторить возникшую у меня проблему.

Если кто-нибудь сможет помочь мне заставить его работать, я буду безумно благодарен!

Источник

1 ответ

Я понял это. Мне нужно было добавить mobx-react в nohoist корня package.json файл (см. фрагмент ниже). Мне пришлось настроить бит облегченной конфигурации (я использовал https://github.com/flisboac/react-native-monorepo-helper). Приложение теперь работает на всех платформах, как и должно.

Исправление было добавить следующий nohoist в корень package.json:

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

Смотрите этот репо. Теперь он содержит рабочий код.

Источник
Другие вопросы по тегам