react-dom could not be found within the project

[shivanshrajpoot]

Intended outcome

App Should Compile

Actual outcome

error: Error: Unable to resolve module react-dom from node_modules/mobx-react/dist/mobxreact.esm.js: react-dom could not be found within the project.

How to reproduce the issue

1. Create an app using latest version of react-native
2. Follow instructions to setup mobx from official docs.

Versions

package.json

{
"name": "appName",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
},
"dependencies": {
"@react-native-community/masked-view": "^0.1.6",
"@react-navigation/native": "^5.0.8",
"@react-navigation/stack": "^5.1.0",
"appcenter": "3.0.0",
"appcenter-analytics": "3.0.0",
"appcenter-crashes": "3.0.0",
"mobx": "^5.15.4",
"mobx-react": "^6.2.0",
"react": "16.11.0",
"react-native": "0.62.1",
"react-native-animatable": "^1.3.3",
"react-native-app-auth": "^5.1.0",
"react-native-code-push": "^6.2.0",
"react-native-gesture-handler": "^1.6.0",
"react-native-google-signin": "^2.1.1",
"react-native-magnus": "^1.0.32",
"react-native-modal": "^11.5.6",
"react-native-reanimated": "^1.7.0",
"react-native-safe-area-context": "^0.7.3",
"react-native-screens": "^2.2.0",
"react-native-vector-icons": "^6.6.0",
"yup": "^0.28.1"
},
"devDependencies": {
"@babel/core": "^7.6.2",
"@babel/plugin-proposal-decorators": "^7.8.3",
"@babel/runtime": "^7.6.2",
"@react-native-community/eslint-config": "^1.0.0",
"@types/jest": "^24.0.24",
"@types/react-native": "^0.62.0",
"@types/react-test-renderer": "16.9.2",
"@typescript-eslint/eslint-plugin": "^2.25.0",
"@typescript-eslint/parser": "^2.25.0",
"babel-jest": "^24.9.0",
"babel-plugin-module-resolver": "^4.0.0",
"eslint": "^6.5.1",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.58.0",
"prettier": "^2.0.2",
"react-dom": "^16.13.1",
"react-test-renderer": "16.11.0",
"typescript": "^3.8.3"
},
"jest": {
"preset": "react-native",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
]
}
}

[RanderGabriel]

I'm facing the same issue

[evelant]

Also here after upgrading my react-native project to 0.62

[shivanshrajpoot]

I temporarily resolved it by using react-dom as dev dependency, but obviously it's not the right way.

npm i --save-dev react-dom

[evelant]

I downgraded to

"mobx-react": "=6.1.7",

and its OK now

[RanderGabriel]

I'm facing it using react-native version 0.61.1. I realized that is stopped working on the last week. We didn't change any dependency related to mobx-react but our CI builds stopped working. We are using

"mobx-react": "^6.1.1",

When we clean the build cache (deleting /node_modules) in a development machine the problem appears.

[danielkcz]

I apologize for the issues, small oversight from yesterday's release. Please upgrade to 6.2.1 and mind following instructions in https://github.com/mobxjs/mobx-react#observer-batching

[evelant]

@FredyC Upgrading to 6.2.1 and adding observer batching seems to have fixed the react-dom issue, but may have introduced another.

Since upgrading I now sometimes have crashes with

TypeError: Object.defineProperty() called on non-object
   at defineProperty (native)
    at setHiddenProp (mobx-react)

Removing the import for observer batching stops this from happening. I can't reproduce it reliably. This is on react-native 0.62.1, mobx-react 6.2.1, mobx 5.15.4, mobx-state-tree 3.15.0

[danielkcz]

@AndrewMorsillo Please open a new issue and try to reproduce with React as I cannot imagine how React Native could be problematic in that sense.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs or questions.