I'm trying to build a very simple react-native app to test react-navigation. It works fine until I install react-navigation and load the following code.
import { StackNavigator } from 'react-navigation';
Upon running, it gives me the message "unable to resolve module
'react/lib/ReactComponentWithPureRenderMixin' from 'Users/me/Desktop/Code/flexbox/node_modules/react-navigation/src/views/Header.js'..." despite the file actually existing at that location when I navigate to it manually. I've tried the clearing watchman, deleting / reinstalling the modules, and resetting the packager cache many times. Any thoughts? My package.json below.
{
"name": "flexbox",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.0.0-alpha.6",
"react-native": "0.43.3",
"react-navigation": "^1.0.0-beta.7"
},
"devDependencies": {
"babel-jest": "19.0.0",
"babel-preset-react-native": "1.9.1",
"jest": "19.0.2",
"react-test-renderer": "16.0.0-alpha.6"
},
"jest": {
"preset": "react-native"
}
}
You need to change your dependency to this
{
"react": "16.0.0-alpha.6",
"react-native": "0.43.3",
"react-navigation": "git+https://github.com/react-community/react-navigation.git#7edd9a7"
}
As discussed in this ticket: https://github.com/react-community/react-navigation/issues/923
Related
I have been browsing the web to find an answer to my problem. I made a fresh react app, and if I make changes to app.js file - nothing happens. I have to run the 'npm start' command to see any changes in App.js and index.js files ( index.html updates changes after refresh ).
Anyways, I tried a few things such as adding a start script to package.json
FAST_REFRESH=fast npm start
as well as making a .env file with
FAST_REFRESH=fast
and even installing custom npm/webpack react refresh packages, or making a new project in a different directory. But it refuses to comply!
I'm on Windows.
I'm looking for any other ideas on how to fix this problem.
EDIT:
Package.json
{
"name": "practice-project",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "FAST_REFRESH=false vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"#types/react": "^18.0.17",
"#types/react-dom": "^18.0.6",
"#vitejs/plugin-react": "^2.1.0",
"typescript": "^4.6.4",
"vite": "^3.1.0"
}
}
Package-lock.json
"name": "practice-project",
"version": "0.0.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "practice-project",
"version": "0.0.0",
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"#types/react": "^18.0.17",
"#types/react-dom": "^18.0.6",
"#vitejs/plugin-react": "^2.1.0",
"typescript": "^4.6.4",
"vite": "^3.1.0"
}
},
EDIT2:
Ok, I got it to work on my WSL/Ubuntu. No idea why it didn't want to work on windows though.
I'm trying to setup a component testing strategy for a new react repo that we are working on here.
Based on Cypress documentation there are no useful details about how to configure component testing using a custom dev server like this.
import { defineConfig } from 'cypress'
export default defineConfig({
component: {
devServer(cypressConfig) {
// return dev server instance or a promise that resolves to
// a dev server instance here
},
},
})
My package.json looks like this one:
"source": "src/index.ts",
"exports": {
"require": "./dist/index.cjs",
"default": "./dist/index.modern.js"
},
"main": "./dist/index.cjs",
"module": "./dist/index.module.js",
"unpkg": "./dist/index.umd.js",
"typings": "dist/index",
"scripts": {
"build": "microbundle",
"dev": "microbundle watch",
"pretty": "prettier --config .prettierrc 'src/**/*.(ts|tsx)' --write",
"test": "jest",
"ci:start-example": "cd example; npm start",
"cy:open": "npx cypress open"
},
"dependencies": {
"react-style-object-to-css": "^1.1.2"
},
"peerDependencies": {
"react": "16 - 18",
"react-dom": "16 - 18"
},
"devDependencies": {
"#testing-library/cypress": "^8.0.3",
"#types/jest": "^28.1.6",
"#types/react": "^18.0.15",
"#types/react-dom": "^18.0.6",
"#typescript-eslint/eslint-plugin": "^5.31.0",
"#typescript-eslint/parser": "^5.31.0",
"cypress": "^10.3.1",
"eslint": "^8.20.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.2.1",
"jest": "^28.1.3",
"microbundle": "^0.15.0",
"prettier": "^2.7.1",
"ts-jest": "^28.0.7",
"typescript": "^4.7.4"
},
"files": [
"dist"
]
}
Is there someone facing the same issue with custom dev servers?
I'm not too familiar with microbundle and setting this up comparing with webpack or vite. Would appreciate any help please!
I am trying to setup a monorepo with react and react native app using a yarn workspaces.
My problem is with mobx (and react-mobx) library. When I use it in the shared package it does not work.
Here is the simple component in the shared library. It should just render a button and number and increment the number when the text is clicked:
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)
In browser (react) app I get the following error:
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'
In native app (react-native) I get the following runtime error:
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
I think the problem is with packages and linking them. There are couple of things I've tried to fix this issue, none of them worked:
Add mobx and mobx-react into workspaces.nohoist
Move all dependencies of the shared library into peerDependencies
Make sure to use mobx#4.x so it is compatible with react-native
Here is the root 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"
}
}
Here is the package.json of the shared package:
{
"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": {}
}
Here is the package.json of the webapp:
{
"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"
}
}
And here is the package.json of the react-native app:
{
"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"
}
}
I am using the latest yarn version to date: 1.13.0
I've created a repo with which it is possible to replicate the issue I have here.
If anyone will be able to help me get it working I will be insanely grateful!
I've figured it out. I needed to add mobx-react into nohoist of the root package.json file (see the snippet bellow). I had to tweak the native configuration lite bit (I've used react-native-monorepo-helper). The app now works on all platforms as it should.
The fix was to add following nohoist into the root package.json:
"nohoist": [
"**/react-native",
"**/react-native/**",
"**/mobx-react/**",
"**/mobx-react"
]
See this repo. It now contains working code.
I'm new to React Native. I used the React Native Firebase starter kit and followed all the steps, but as soon as I want to start, it gets stuck at this screen:
Has anyone experienced this or know how to fix this?
UPDATE: When I run npm run iOS I get the following error:
Content of Package.json
{
"name": "ReactNativeStarter",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-install": "2.1.0",
"babel-jest": "^23.4.0",
"babel-preset-react-native-stage-0": "^1.0.1",
"fs-extra": "^6.0.1",
"jest": "^23.4.0",
"react-test-renderer": "^16.4.1",
"replace-in-file": "^3.4.0"
},
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"rename": "node ./bin/rename.js",
"start": "react-native start",
"test": "jest"
},
"jest": {
"preset": "react-native"
},
"dependencies": {
"fbjs": "^0.8.17",
"react": "^16.3.2",
"react-native": "^0.56.0",
"react-native-firebase": "^4.3.6"
}
}
Content of .babelrc
{
"presets": [
"babel-preset-react-native-stage-0/decorator-support"
],
"env": {
"development": {
"plugins": [
"transform-react-jsx-source"
]
}
}
}
Looks like Babel needs to be upgraded.
When upgrading to 0.56, make sure to bump your babel-preset-react-native package.json dependency to ^5.0.1 or newer.
However, you are using babel-preset-react-native-stage-0 which does not seem to support React Native 0.56.0. See https://github.com/skevy/babel-preset-react-native-stage-0/issues/8
My advice would be to try using babel-preset-react-native until a fix for babel-preset-react-native-stage-0 is released.
I am new to react/react-native/babel world. I am trying to make async/await work.
package.json
{
"name": "App",
"version": "0.0.5",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.0.0-alpha.6",
"react-native": "0.44.0",
"react-native-fs": "^2.3.3"
},
"devDependencies": {
"babel-jest": "20.0.3",
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-preset-react-native": "1.9.2",
"babel-preset-stage-3": "^6.24.1",
"jest": "20.0.3",
"react-test-renderer": "16.0.0-alpha.6"
},
"jest": {
"preset": "react-native"
}
}
.babelrc
{
"presets": ["react-native", "babel-preset-stage-3"],
"plugins": ["transform-async-to-generator"]
}
I tried different ways and at some point it seemed to work on the emulator, though it never worked on a real device. And now it doesn't work on either. I get:
babelHelpers.asyncToGenerator is not a function
I checked out everything including github ticket related to this problem and stackoverflow question (my question is not a duplicate as it's been awhile and I use different react-native version). None of it worked for me.
My question
So what would be a proper and most up-to-date way to enable async/await on React Native app?
install babel-preset-react-native-stage-0 and remove your babel-stage-3 preset
Then you need to build / start your react app with --reset-cache option, and you should be good to go