How to solve chromium and certificate error while doing npm i - reactjs

I have cloned the project from github and trying to run the react project in VS code.
I ran npm i and also tried npm i --force.
This is the log
npm WARN deprecated core-js#2.6.12: core-js#<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
npm ERR! code 1
npm ERR! path C:\Users\55393\Desktop\Rapidx_Documentation\website\node_modules\puppeteer
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node install.js
npm ERR! ERROR: Failed to download Chromium r722234! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD" env variable to skip download.
npm ERR! Error: self signed certificate in certificate chain
npm ERR! at TLSSocket.onConnectSecure (_tls_wrap.js:1497:34)
npm ERR! at TLSSocket.emit (events.js:315:20)
How to solve this?
I have attached package.json below
{
"scripts": {
"examples": "docusaurus-examples",
"start": "docusaurus start",
"build": "docusaurus build",
"serve": "docusaurus serve",
"publish-gh-pages": "docusaurus-publish",
"write-translations": "docusaurus-write-translations",
"version": "docusaurus-version",
"rename-version": "docusaurus-rename-version",
"swizzle": "docusaurus swizzle",
"deploy": "docusaurus deploy",
"docusaurus": "docusaurus"
},
"engines": {
"node": "v17.6.0"
},
"dependencies": {
"#azure/msal-browser": "^2.28.0",
"#azure/msal-react": "^1.4.4",
"#docusaurus/core": "^2.0.0-rc.1",
"#docusaurus/plugin-client-redirects": "^2.1.0",
"#docusaurus/plugin-content-docs": "^2.0.0-rc.1",
"#docusaurus/preset-classic": "^2.0.0-rc.1",
"#fortawesome/react-fontawesome": "^0.1.18",
"#mui/material": "^5.10.3",
"axios": "^0.27.2",
"bootstrap": "^5.1.3",
"chart.js": "^3.8.0",
"clsx": "^1.1.1",
"docker": "^1.0.0",
"docusaurus": "^1.14.7",
"docusaurus-lunr-search": "^2.1.15",
"docusaurus-pdf": "^1.2.0",
"docusaurus2-dotenv": "^1.4.0",
"env-cmd": "^10.1.0",
"jquery": "^3.6.0",
"moment": "^2.29.4",
"react": "^17.0.2",
"react-bootstrap": "^2.4.0",
"react-chartjs-2": "^4.3.1",
"react-dom": "^17.0.2",
"react-icons": "^4.4.0",
"react-markdown-editor-lite": "^1.3.2",
"react-paginate": "^8.1.3",
"react-player": "^2.10.1",
"react-scripts": "^5.0.1"
},
"devDependencies": {
"dotenv": "^16.0.2"
}
}

Related

npm ERR! could not resolve dependency

I have tried various solutions in order to simply update or install packages - remove node_modules plus the packages-lock, cache clean - but I always get something like the following:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: #awesome-cordova-plugins/file#5.46.0
npm ERR! Found: #awesome-cordova-plugins/core#6.2.0
npm ERR! node_modules/#awesome-cordova-plugins/core
npm ERR! #awesome-cordova-plugins/core#"^6.2.0" from the root project
npm ERR! peer #awesome-cordova-plugins/core#"^6.0.1" from #awesome-cordova-plugins/file-opener#6.3.0
npm ERR! node_modules/#awesome-cordova-plugins/file-opener
npm ERR! #awesome-cordova-plugins/file-opener#"^6.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer #awesome-cordova-plugins/core#"^5.1.0" from #awesome-cordova-plugins/file#5.46.0
npm ERR! node_modules/#awesome-cordova-plugins/file
npm ERR! #awesome-cordova-plugins/file#"^5.44.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: #awesome-cordova-plugins/core#5.46.0
npm ERR! node_modules/#awesome-cordova-plugins/core
npm ERR! peer #awesome-cordova-plugins/core#"^5.1.0" from #awesome-cordova-plugins/file#5.46.0
npm ERR! node_modules/#awesome-cordova-plugins/file
npm ERR! #awesome-cordova-plugins/file#"^5.44.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
My package.json file includes:
"dependencies": {
"#awesome-cordova-plugins/core": "^6.3.0",
"#awesome-cordova-plugins/file": "^6.3.0",
"#awesome-cordova-plugins/file-opener": "^6.3.0",
"#awesome-cordova-plugins/in-app-purchase-2": "^6.3.0",
"#capacitor-community/file-opener": "^1.0.4",
"#capacitor/android": "^4.6.3",
"#capacitor/core": "^4.6.3",
"#capacitor/ios": "^4.6.3",
"#emotion/react": "^11.10.5",
"#emotion/styled": "^11.10.5",
"#fortawesome/fontawesome-pro": "^6.3.0",
"#fortawesome/fontawesome-svg-core": "^6.3.0",
"#fortawesome/free-solid-svg-icons": "^6.3.0",
"#fortawesome/pro-solid-svg-icons": "^6.3.0",
"#fortawesome/react-fontawesome": "^0.2.0",
"#fortawesome/sharp-solid-svg-icons": "^6.3.0",
"#ionic-native/core": "^5.36.0",
"#ionic-native/in-app-purchase-2": "^5.36.0",
"#ionic-native/purchases": "^5.36.0",
"#ionic/react": "^6.5.2",
"#material-ui/core": "^4.12.3",
"#material-ui/data-grid": "^4.0.0-alpha.37",
"#material-ui/icons": "^4.11.3",
"#material-ui/lab": "^4.0.0-alpha.60",
"#material-ui/pickers": "^3.3.10",
"#mui/icons-material": "^5.11.0",
"#mui/lab": "^5.0.0-alpha.119",
"#mui/material": "^5.11.8",
"#mui/x-date-pickers": "^5.0.17",
"#stripe/firestore-stripe-payments": "^0.0.6",
"#stripe/react-stripe-js": "^1.16.4",
"#stripe/stripe-js": "^1.46.0",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^14.4.3",
"axios": "^1.3.2",
"cordova-annotated-plugin-android": "^1.0.4",
"cordova-plugin-file": "^7.0.0",
"cordova-plugin-file-opener2": "^4.0.0",
"cordova-plugin-purchase": "^13.3.0",
"date-fns": "^2.29.3",
"dotenv": "^16.0.3",
"file-saver": "^2.0.5",
"firebase": "^9.17.1",
"firebase-admin": "^11.5.0",
"firebase-functions": "^4.2.1",
"firestore-export-import": "^1.3.5",
"html-to-image": "^1.11.11",
"html2canvas": "^1.4.1",
"js-file-download": "^0.4.12",
"jspdf": "^2.5.1",
"jspdf-autotable": "^3.5.28",
"material-table": "^2.0.3",
"material-ui-search-bar": "^1.0.0",
"npm-check-updates": "^16.6.5",
"react": "^18.2.0",
"react-beautiful-dnd": "^13.1.1",
"react-bulleted-textarea": "^1.1.2",
"react-confirm-box": "^1.2.0",
"react-csv": "^2.2.2",
"react-dnd": "^16.0.1",
"react-dom": "^18.2.0",
"react-html2pdf": "^1.0.1",
"react-linkify": "^1.0.0-alpha",
"react-number-format": "^5.1.3",
"react-router-dom": "^6.8.1",
"react-scripts": "5.0.1",
"react-select": "^5.7.0",
"react-select-material-ui": "^9.2.0",
"react-slick": "^0.29.0",
"react-swipeable-views": "^0.14.0",
"react-table": "^7.8.0",
"react-tabs": "^6.0.0",
"slick-carousel": "^1.8.1",
"stripe": "^11.9.1",
"styled-components": "^5.3.6",
"web-vitals": "^3.1.1"
}
If I run npm config set legacy-peer-deps true then it wont compile because a range of other issues pop up.
I don't really understand what the problem is as I haven't had an issue before up to this point - but I am really wanting to keep the packages up to date.
Can someone assist or point me in the right direction?
You can ignore installing peer dependencies by using:
npm install --legacy-peer-deps
Conflicts are checked between each module listed in package.json.
It seems that the problem occurred while upgrading the version of react from 17 to 18.
It might be a good idea to go back before the initial upgrade position and check the guidelines for each module.
This is a one of sample, I think the following guide might be helpful.
Migrating to v5: getting started
Maybe the version related to cordova is corrupted by npm command.
It is not recommended unless you are expecting the exact version to be defined after this command works. But sometimes it helps.
This will help you : npm: When to use --force and --legacy-peer-deps
Be sure to back up package-lock.json before deleting it.
There are many problems that cannot be solved by deleting this file.
Some developers explain that this file is a file that keeps the history of all modules installed by the npm install command.
It would be nice to revisit the documentation from this point of view.
package-lock.json : A manifestation of the manifest

In react native #react-navigation/native-stack error occured

I was trying to input 'npm install #react-navigation/native-stack' In my vscode's terminal to install #react-navigation/native-stack but during installing, error occured.
The following is error message.
npm ERR! code 128
npm ERR! An unknown git error occurred
npm ERR! command git --no-replace-objects ls-remote ssh://git#github.com/react-navigation/native-stack.git
npm ERR! ERROR: Repository not found.
npm ERR! fatal: Could not read from remote repository.
npm ERR!
npm ERR! Please make sure you have the correct access rights
npm ERR! and the repository exists.
npm ERR! A complete log of this run can be found in:
npm ERR! path(my log files path)
my package.json file
{
"name": "userinterface",
"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"
},
"dependencies": {
"#react-navigation/native": "^6.0.13",
"expo": "~46.0.9",
"expo-status-bar": "~1.4.0",
"react": "18.0.0",
"react-native": "0.69.5",
"react-native-screens": "~3.15.0",
"react-native-safe-area-context": "4.3.1",
"undefined": "react-navigation/native-stack"
},
"devDependencies": {
"#babel/core": "^7.12.9"
},
"private": true
}
I'm newbie for react-native and programming. so I don't know what to upload here. if you need more information to solve this problem, I will upload that.
It could be a compatibility issue. Try running
npm install npm#latest -g
and check again
I think there was a mistake in your package.json. It should be a package name following it's version. In this case it's should be
"dependencies": {
"#react-navigation/native": "^6.0.13",
"expo": "~46.0.9",
"expo-status-bar": "~1.4.0",
"react": "18.0.0",
"react-native": "0.69.5",
"react-native-screens": "~3.15.0",
"react-native-safe-area-context": "4.3.1",
"react-navigation/native-stack": "^6.9.0"
},

How to resolve npm dependency with react-card-flip?

Any idea how to resolve this error? I get it when trying npm install:
npm ERR! Found: react#16.14.0
npm ERR! node_modules/react
npm ERR! react#"^16.14.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^17.0.1" from react-card-flip#1.1.0
npm ERR! node_modules/react-card-flip
npm ERR! react-card-flip#"^1.0.11" from the root project
The package.json has: "react-card-flip": "^1.0.11",
I removed the node_modules directory and the package-lock.json file.
I'm not sure where the reference to 1.1.0 is coming from. I DID try to install it earlier when trying to upgrade React 17, but ran into limitations with blueprintjs/core 3.39.0 requiring React 16.14.0.
Thanks for any ideas or help you can provide.
Full content of the package.json below in case that helps.
package.json content:
{
"files": [
"./LICENSE.md"
],
"name": "myproject",
"version": "0.1.0",
"private": true,
"dependencies": {
"#blueprintjs/core": "^3.39.0",
"#ckeditor/ckeditor5-build-classic": "^12.2.0",
"#ckeditor/ckeditor5-react": "^1.1.3",
"apexcharts": "^3.19.3",
"axios": "^0.21.1",
"bootstrap": "^3.4.1",
"cleave.js": "^1.5.2",
"country-state-city": "^1.0.0",
"fomantic-ui": "^2.8.7",
"moment": "^2.24.0",
"plaid": "^8.1.6",
"react": "^16.14.0",
"react-apexcharts": "^1.3.7",
"react-bootstrap": "^1.4.3",
"react-burger-menu": "^2.6.11",
"react-card-flip": "^1.0.11",
"react-dom": "^16.8.6",
"react-dropzone": "^10.1.4",
"react-google-login": "^5.1.21",
"react-grid-system": "^4.4.5",
"react-intl-universal": "^2.4.1",
"react-redux": "^6.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "^3.4.4",
"react-scroll": "^1.7.14",
"react-select": "^2.4.4",
"react-share": "^3.0.0",
"react-signature-canvas": "^1.0.3",
"react-slick": "^0.24.0",
"react-star-ratings": "^2.3.0",
"react-stripe-elements": "^3.0.0",
"reactjs-popup": "^1.3.2",
"reactstrap": "^8.0.0",
"reaptcha": "^1.4.2",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"semantic-ui-react": "^0.86.0",
"socket.io-client": "^2.3.0",
"sweetalert2": "^10.14.0",
"sweetalert2-react": "^0.8.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
TL;DR Use npm install --legacy-peer-deps
I am able to replicate the error with npm#7 but not npm#6.
Version 7 introduced some stricter peer dependency checking. If you just want your installation command to succeed (which is what most people who encounter this error want, rather than figuring out what the dependency issue is), you can use npm install --legacy-peer-deps.
The source of the issue is that your version of react-card-flip requires react#17 but many of your other dependencies require react#16. Old npm worked around that. New npm let's you know there's a problem. You can live without react-card-flip, or update all your other dependencies (no guarantees they've all been updated to support react#17 though), or try to find an older version of react-card-flip that maybe supported react#16, although running a bunch of older versions of dependencies is not something I would recommend.
The solution was to update the package.json file and change the react-card-flip entry.
From:
"react-card-flip": "^1.0.11",
To:
"react-card-flip": "~1.0.11",
The carat (^) tells npm to install 1.0.11 or newer version of react-card-flip. It was trying to install the newer version 1.1.0, which relies on React version 17.0.1. The tilde (~) tells npm to install the newest minor release version. The latest minor version of react-card-flip is 1.0.11 and it requires React 16.14.0, matching what I have installed - resolving the problem.
Another work around solution is to run npm install with the parameter --legacy-peer-deps.
Use npm i react-card-flip --force
This will work for you as we can install this forcefully. And worked for me as well. I was facing the same issue while trying to install react-card-flip.

redux-trunk library not installing in react native

When I install redux-thunk it shows an error and you can see attached image for more info -
npm ERR! Error: EPERM: operation not permitted, rename 'C:\Users\siddharth.vyas\Desktop\react-native_Proj\AwesomeProject\node_modules.staging\redux-thunk-069b38d0' -> 'C:\Users\siddharth.vyas\Desktop\react-native_Proj\AwesomeProject\node_modules\redux-thunk'
And I have also try to install "redux-thunk" with the administrator but shows the same error.
Pakage.json -
"dependencies": {
"axios": "^0.19.0",
"react": "16.8.3",
"react-native": "0.59.9",
"react-native-loading-spinner-overlay": "^1.0.1",
"react-redux": "^7.1.0",
"redux": "^4.0.1",
"redux-axios-middleware": "^4.0.0"
},
"devDependencies": {
"#babel/core": "7.4.5",
"#babel/runtime": "7.4.5",
"babel-jest": "24.8.0",
"jest": "24.8.0",
"metro-react-native-babel-preset": "0.54.1",
"react-test-renderer": "16.8.3"
},
try removing node_modules and do npm install. If it doesn't work, delete node_modules, add "redux-thunk": "^2.3.0" to your dependencies, then run npm install -i
I have faced similar issues in windows. this looks more of a permission issue.
Try running the cmd window in run as administrator mode. this should mostly give permission to npm to execute the script.
if that does not work, then the option would be to delete the folder redux-thunk from node_modules directory and try reinstalling the redux-thunk module again

How to host a reactJS application

I am assuming I should be able to deploy my reactJS to an S3 instance on AWS but I do not know how to do this. I found publish-react-app on github and I am trying to follow those steps. When I execute npm run build I get this error stream:
c:\jrs\PM_01\React>npm run build
npm ERR! missing script: build
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\jonat\AppData\Roaming\npm-cache\_logs\2018-09-05T18_57_19_811Z-debug.log
c:\jrs\PM_01\React>npm run build
> sample-app#1.0.0 build c:\jrs\PM_01\React
> react-scripts build
'react-scripts' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! sample-app#1.0.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the sample-app#1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\jonat\AppData\Roaming\npm-cache\_logs\2018-09-05T19_06_24_048Z-debug.log
I have no idea what I need to put into the scrips section of my package.json file. This is what my package.json file looks like:
{
"name": "sample-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^1.0.0",
"style-loader": "^0.21.0",
"webpack": "^2.6.1",
"webpack-dev-server": "^2.4.5"
},
"dependencies": {
"cors": "^2.8.4",
"ebay-node-api": "^2.2.1",
"moment": "^2.20.1",
"moment-timezone": "^0.5.14",
"publish-react-app": "^1.0.1",
"react": "^15.6.2",
"react-barcode": "^1.3.4",
"react-dom": "^15.6.2",
"react-moment": "^0.7.0",
"react-redux": "^5.0.5",
"react-router-dom": "^4.1.1",
"redux": "^3.7.0",
"reselect": "^3.0.1",
"simple-flexbox": "^1.2.0"
},
"babel": {
"presets": [
[
"es2015",
{
"modules": false
}
],
"stage-2",
"react"
]
}
}
I created a free tier S3 on AWS and created a user and a bucket but I really dont know what else to do in order to get my application deployed.
Thanks.
Your package.json is missing the key build. Generally with tools such as create-react-app it comes with a build script to prepare assets for production. As for hosting, Heroku is pretty easy to get up and running quickly.

Resources