I want to use standalone React Native Debugger. I installed it by following this instruction. Run command $ brew update && brew cask install react-native-debugger.
Then I launch it along with my app running on emulator. I see this:
As you can see it says :
DevTools v4 is incompatible with this version of React
Either upgrade React or install React DevTools v3:
npm install -d react-devtools#^3
So, I did run the above command & restart the debugger, but still see the same message.
Then I tried to install the latest React by command :
npm install react#latest react-dom#latest prop-types#latest
Then, I restart the debugger but still see that message. I get confused, how to get rid of that message?
Here is my package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"expo": "~37.0.3",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
"react-native-web": "~0.11.7"
},
"devDependencies": {
"babel-preset-expo": "~8.1.0",
"#babel/core": "^7.8.6"
},
"private": true
}
I was having the same problem, but using React Native Expo, just fixed it using previous React Native Debugger version (v10). It should work with your React Native Version.
Here's the link to download from the official repository: https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz
Related
How I can install next.js with React 17? When I type:
npx create-next-app --ts, npx installed Next with React 18, but I can't use React 18, because Stripe not working at the moment with R18 (https://www.npmjs.com/package/stripe).
You'd need to use an older version of Next JS.
The latest one I can see with React 17 is 12.1.2, so you can start your project with the following:
npx create-next-app#12.1.2
You can check the release change logs for Next JS here:
https://github.com/vercel/next.js/releases
If you've already created the project:
remove new versions:
npm uninstall next react react-dom #types/react #types/react-dom
install old versions:
npm install next#12.1.2 react#17.0.2 react-dom#17.0.2
npm install -D #types/react#17.0.2 #types/react-dom#17.0.2
I found an alternative approach , first create a new nextjs typescript project using npx create-next-app#latest --ts
. And then copied the versions of all the dependencies and devDependencies to package.json . after replacing the version delete node_modules folder and package-lock.json file . after that run this command npm install .
Here is a sample package.json. I got this after create new nextjs project.
{
"name": "demo",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "12.2.4",
"react": "17.0.2",
"react-dom": "17.0.2"
},
"devDependencies": {
"#types/node": "18.7.1",
"#types/react": "18.0.17",
"#types/react-dom": "18.0.6",
"eslint": "8.21.0",
"eslint-config-next": "12.2.4",
"typescript": "4.7.4"
}
}
My react native app will not launch. Between the time it launched and didn't launch, I made no major changes, only reloading the app.
I keep getting this error:
"React Native version mismatch"
Image of the version mismatch :
I have tried looking at posts of similar nature, however none of those solutions have helped.
Occasionally, as I was installing and uninstall various versions of react native to try to fix the app, I came across this error:
"RCTView generated view config for validAttributes does not match native, missingL accessibilityTraits"
Image of second error :
What I have tried:
updating all packages that I am using for my project
uninstalling and reinstalling react-native
restarting terminal and computer
Here is my packages.json file:
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"1.3.0": "^1.3.0",
"axios": "^0.19.0",
"expo": "^34.0.4",
"expo-web-browser": "^6.0.0",
"react": "^16.10.1",
"react-dom": "^16.8.6",
"react-native": "^0.61.1",
"react-native-elements": "^1.2.3",
"react-native-gesture-handler": "^1.4.1",
"react-native-popover-view": "^2.0.5",
"react-native-reanimated": "^1.3.0",
"react-navigation": "^4.0.10",
"react-navigation-stack": "^1.9.3",
"react-navigation-tabs": "^2.5.5"
},
"devDependencies": {
"babel-preset-expo": "^6.0.0"
},
"private": true
}
I am using WebStorm as my IDE and testing on an iPhone 7 (physical). I have tried launching the app on other devices, it did not work.
try running this command in your project directory
watchman watch-del-all && rm -rf $TMPDIR/react-native-packager-cache-* && rm -rf $TMPDIR/metro-bundler-cache-* && rm -rf node_modules/ && npm cache clean && npm install && npm start -- --reset-cache
In your app.json, check expo.sdkVersion has the correct version.
your version is miss matching in your package.json file,
to overcome this problem use the following commands:-
if you are working with npm globally, then use:-
npm i -g npm-check-updates
then,
ncu -u && npm install
ncu -u shows you which version has updated to which version,
screenshot of output of ncu -u
For a specific root folder/project use can use:-
npx npm-check-updates -u && npm i
then,
ncu -u && npm install
I'm trying to migrate react-scripts from my current version (1.1.4) to the latest 3.0.1 for obvious reasons, but I'm having a hell of a time.
Here's my current, build successful package.json
{
"name": "name",
"version": "0.1.0",
"homepage": ".",
"private": true,
"dependencies": {
"ajv": "^6.9.1",
"axios": "^0.18.0",
"axios-debug": "0.0.4",
"date-fns": "^1.30.1",
"formik": "1.2.0",
"history": "4.7.2",
"moment": "2.22.2",
"localforage": "1.7.3",
"prettier": "1.14.2",
"react": "^16.8.1",
"react-bootstrap": "0.32.4",
"react-checkbox-group": "4.0.1",
"react-datetime": "2.15.0",
"react-dom": "^16.3.2",
"react-render-debugger": "1.0.2",
"react-router-dom": "4.3.1",
"react-scripts": "1.1.4",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.87.1",
"styled-components": "^4.2.0",
"react-router-hash-link": "1.2.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
So I'm using npm so running npm install --save --save-exact react-scripts#3.0.1 installs the new react-scripts version, everything is updated correctly. I updated a few other packages that were needed as deps. No security vulnerabilities, everything was clean and installed correctly.
I'm using maven as a build system to build my app, once it tries to execute npm run build it fails on react-scripts build
The debug log is super unhelpful. The only error displayed is /node_modules/.bin/react-scripts: Permission denied
I've tried changing the permissions using chmod +x /node_modules/.bin/react-scripts but no luck.
I've tried deleting node_modules several times and reinstalling the modules using npm ci. Just about any issue I've found on github I've tried.
I'm not sure what else could be wrong.
Using node v11.9.0 and npm 6.5.0
Do I need to update in smaller version increments? I'm really at a loss
EDIT:
Something is wrong with npm in my case. Manually updating the package versions in package.json seems to work for now... I need to figure out why npm is broken for me
So I am looking at my package.json file - and nothing looks particularly crazy:
{
"name": "application_name",
"version": "0.1.0",
"private": true,
"dependencies": {
"bootstrap-toggle": "^2.2.2",
"classnames": "^2.2.6",
"html-react-parser": "^0.4.6",
"jquery": "^3.3.1",
"react": "^16.4.1",
"react-bootstrap-toggle": "^2.3.1",
"react-cookie": "^3.0.4",
"react-dom": "^16.5.2",
"react-load-script": "0.0.6",
"react-router-dom": "^4.3.1",
"react-scripts": "1.1.4",
"react-timer-mixin": "^0.13.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build && robocopy .\\build ..\\www /MIR",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
I've tried npm install, npm install --production and npm install --express
No matter what npm command I write, I get the following:
added 1425 packages from 862 contributors and audited 14585 packages in 15.876s
It ultimately is 202M - this can't be right, that's a HUGE number of modules
This is for a React project I am working on.
I only made this question because none of the other answers seemed to work for my situation.
Is there a solution to this problem? I am intending on compiling this into a mobile app and 202M is a huge footprint for what is a pretty simple app.
202Mb is almost completely occupied with development dependencies, react-scripts.
react-scripts is a bundle consisting Webpack and other tools that are necessary to run the project. It is provided by Create React App, which is just an executable that creates boilerplate project with react-scripts:
This package includes scripts and configuration used by Create React
App.
node_modules size is adequate for complex configuration that CRA sets up. It doesn't affect the size of compiled application.
My package.json file is as below
{
"name": "dev",
"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-beta.5",
"react-native": "0.49.3"
},
"devDependencies": {
"babel-jest": "21.2.0",
"babel-preset-react-native": "4.0.0",
"jest": "21.2.1",
"react-test-renderer": "16.0.0-beta.5"
},
"jest": {
"preset": "react-native"
}
}
When I run npm start it gets stuck on Loading dependency graph, done. How can I fix this?
npm start only works for expo projects, if you've created your project using react-native init
You should run your project using either react-native run-ios or react-native run-android
If you're sure you're using expo for your project I would suggest to remove the node_modules folder and running npm install again.
If you built your app using react-native init or if it is an app that has been "ejected" from Expo, then this behavior is normal. Once you have npm started, open another terminal window and run either react-native run-ios or react-native run-android. That should launch the appropriate app for you.
The Getting Started Guide can walk you through the various ways of starting a react native app. You should follow the tab labeled "Building Projects with Native Code."