Create react native app and yarn not running after installing npm modules - reactjs

I'm trying to implement react-navigation into an app made using create-react-native-app. The problem is after installing the npm module (or any other) nothing works. I get build error like undefined is not an object (evaluating 'ReactPropTypes.string').
Googled and followed issues on github and still haven't found a solution. Could some one help me out please?
package.json
{
"name": "TestApp",
"version": "0.1.0",
"private": true,
"devDependencies": {
"jest-expo": "~1.0.1",
"react-native-scripts": "0.0.31",
"react-test-renderer": "16.0.0-alpha.6"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js --watch"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"expo": "^17.0.0",
"react": "^16.0.0-alpha.6",
"react-native": "^0.45.0",
"react-navigation": "^1.0.0-beta.11"
}
}
yarn v0.24.5
npm v3.10.10
Mac OSX Sierra 10.12.5

It looks like a version mis-match between react and react-native. Installing react-native#"0.45.1" with react#"16.0.0-alpha.12" fixed this for me.

Related

React Native Expo install error. ReferenceError: process is not defined at Module.RNiq

I am trying to install a react native application using expo. I have tried all the updating packages and more from previous answers without any success.
It is however failing and giving me this error on the web interface: An unexpected error has occurred.
And on the console, it shows me this error message:
ReferenceError: process is not defined
at Module.RNiq (index-1b0e10d3020a016605d2.js:1:237007)
at l (webpack-e067438c4cf4ef2ef178.js:1:563)
at index-1b0e10d3020a016605d2.js:1:457536
at main-41e61ebd24edb78847da.js:1:19485
at main-41e61ebd24edb78847da.js:1:19653
ue # main-41e61ebd24edb78847da.js:1
My package.json is
{
"name": "my-app",
"version": "1.0.0",
"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": "~45.0.0",
"expo-status-bar": "~1.3.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-native": "0.68.2",
"react-native-web": "0.17.7"
},
"devDependencies": {
"#babel/core": "^7.12.9"
},
"private": true
}
error image
I was using expo-cli version 5.4.10 but on rolling back to expo-cli version 5.4.9 it worked. Find the various npm expo versions here

getting error : Found bindings for the following environments: - Linux 64-bit with Node.js 9.x in my ubuntu system

when i try to start my project in react, i am getting this error , i am using Ubuntu system
Found bindings for the following environments: - Linux 64-bit with Node.js 9.x
I am using node -v : 10.13.0 and npm -v : 6.11.2, here i have also attached my package.json file, can anyone please help me how to resolve this issue ?
{
"name": "gatsby-starter-hello-world",
"private": true,
"description": "A simplified bare-bones starter for Gatsby",
"version": "0.1.0",
"license": "0BSD",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
},
"dependencies": {
"classnames": "^2.2.6",
"gatsby": "^2.24.48",
"gatsby-background-image": "^1.1.2",
"gatsby-plugin-routes": "^1.0.0",
"gatsby-plugin-sass": "^2.3.12",
"gatsby-plugin-sharp": "^2.6.28",
"gatsby-source-filesystem": "^2.3.25",
"gatsby-transformer-sharp": "^2.5.13",
"node-sass": "^4.14.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-router-dom": "^5.0.1"
},
"devDependencies": {
"prettier": "2.0.5"
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-hello-world"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
}
}
You just need to use:
npm rebuild node-sass
I would suggest adding a .nvmrc file in the root of your project to avoid this error happen. This is a simple file that fixes the Node version for your project in order to avoid a mismatch between versions and forcing the project to run under a specific version. You just need to add a .nvmrc file with this content:
v10.13.0
Try removing your node_modules and reinstalling. You might also want to check that you don't have something link NVM or and old Node 9 version in your path, that node-sass is picking up while intalling

what could I do to fix my expo for React Native?

So, I deleted and reinstalled everything possible for React Native. I began to get an error for expo. In the terminal a reoccurring error was .json is missing. I don’t know how to fix this. I’m new to React and using a Mac. I was in the middle of a tutorial when it all stopped working. Thank you in advance!
Please create package.json file in your project root folder and past below code and update according to your requirement like project name or description:
{
"name": "expo-template-tabs",
"description": "The Tab Navigation project template includes several example screens.",
"version": "0.0.2",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject",
"test": "node ./node_modules/jest/bin/jest.js --watchAll"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"#expo/samples": "2.1.1",
"expo": "^31.0.5",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-31.0.0.tar.gz",
"react-navigation": "^3.0.1"
},
"devDependencies": {
"babel-preset-expo": "^5.0.0",
"jest-expo": "^31.0.0"
}
}
Then run below command:
- npm install
I hope it would help you out.

In react project scss file display empty code space

I am new on React. I have installed jqwidgets and node-sass packages.
I run: npm install --save node-sass
In JS component file:
import './style.scss';
in style.scss:
.welcome{
background-color: firebrick;
}
Then I open developer tools on browser style.scss I see:
module.exports = __webpack_public_path__ + "static/media/style.7388d000.scss";
//////////////////
// WEBPACK FOOTER
// ./src/components/Welcome/style.scss
// module id = ./src/components/Welcome/style.scss
// module chunks = 0
Why sass style code is not displaying?
packages.json:
{
"_from": "https://github.com/jqwidgets/my-app2/tarball/master",
"_id": "my-app2#1.0.0",
"_inBundle": false,
"_integrity": "sha512-TzCrV6rvvYS5En18r6qrM2T7Rz24DQomJCLmQ2j/V08534YPijH5CjTAKJcDI8vNHM+HgyNS3YFxDVd0mHWSqg==",
"_location": "/my-app2/my-app2",
"_phantomChildren": {},
"_requested": {
"type": "remote",
"raw": "my-app2#https://github.com/jqwidgets/my-app2/tarball/master",
"name": "my-app2",
"escapedName": "my-app2",
"rawSpec": "https://github.com/jqwidgets/my-app2/tarball/master",
"saveSpec": "https://github.com/jqwidgets/my-app2/tarball/master",
"fetchSpec": "https://github.com/jqwidgets/my-app2/tarball/master"
},
"_requiredBy": [],
"_resolved": "https://github.com/jqwidgets/my-app2/tarball/master",
"_shasum": "7d2a1b35e0af075c74da15c045aaddabd7a70e35",
"_spec": "my-app2#https://github.com/jqwidgets/my-app2/tarball/master",
"_where": "C:\\Users\\Evoiu\\AppData\\Roaming\\npm\\node_modules\\my-app2",
"bundleDependencies": false,
"dependencies": {
"axios": "^0.18.0",
"react": "16.4.1",
"react-dom": "16.4.1",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-router-redux": "^4.0.8",
"react-scripts": "1.1.4"
},
"deprecated": false,
"description": "Please refer to its documentation: - [Getting Started](https://github.com/jqwidgets/my-app2/blob/master/README.md#getting-started) - [jQWidgets React Documentation](http://www.jqwidgets.com/reactjs-components-documentation/)",
"name": "my-app2",
"private": true,
"scripts": {
"build": "react-scripts build",
"eject": "react-scripts eject",
"start": "react-scripts start",
"test": "react-scripts test --env=jsdom"
},
"version": "1.0.0",
"devDependencies": {
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0"
}
}
I spend so much hour, Idont know where is problem... :(
If I create new project with only node-sass, then its working. Deam it why its not working with jqwidgets.
https://www.jqwidgets.com/reactjs-components-documentation/documentation/create-jqwidgets-react-app/index.htm
have you install jqwidgets-react-app with this?
I haven't tested it myself.

React Native app error when running with Relay

I have successfully generated create-react-native-app however, when I install relay along with graphql, I am getting error:
> react-native-scripts start
10:50:27 AM: Starting packager...
***ERROR STARTING PACKAGER***
Warning: Problem validating app.json: Unable to perform cache refresh for /home/vagrant/.cache/expo/schema-27.0.0.json: Error: certificate is not yet valid.
Error: Invalid sdkVersion. Valid options are 10.0.0, 11.0.0, 12.0.0, 13.0.0, 14.0.0, 15.0.0, 16.0.0, 17.0.0, 18.0.0, 19.0.0, 20.0.0, 21.0.0, 22.0.0, 23.0.0, 24.0.0, 25.0.0, 7.0.0, 8.0.0, 9.0.0
This is my package.json:
{
"name": "blah",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-plugin-relay": "^1.6.2",
"graphql": "^14.0.2",
"jest-expo": "~27.0.0",
"react-native-scripts": "1.14.0",
"react-test-renderer": "16.3.1",
"relay-compiler": "^1.6.2"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "jest",
"relay": "relay-compiler --src ./ --schema ./db/schema.json"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"expo": "^27.0.1",
"react": "16.3.1",
"react-dom": "^16.5.0",
"react-native": "~0.55.2",
"react-relay": "^1.6.2"
}
}
UPDATED
My app.json has:
{
"expo": {
"sdkVersion": "27.0.0"
}
}

Resources