React requiring a peer React-Dom - reactjs

I am quite new in React and front end dev.
I am following a tutorial from udemy that require to install react-simple-sidenav module in order to get a NavBar.
However when I try to install it no way to make it work. I get the following error message after running the command npm install react-simple-sidenav
And the navBar doest not work event if it is copy past from the tuto
npm WARN react-simple-sidenav#0.1.6 requires a peer of react-dom#^15.0.0 but none is installed. You must install peer depe
ndencies yourself.
Could you help me ?

You need to install react-dom from NPM library, in your command line type the following:
npm i -s react-dom

Related

Module not found: Can't resolve '#aws-amplify/core'

Trying to create a React App using amplify authentication, stuck with this error
Module not found: Can't resolve '#aws-amplify/core' in '..\node_modules#aws-amplify\api\lib-esm'
I have been referring to these two links:
https://dev.to/dabit3/the-complete-guide-to-user-authentication-with-the-amplify-framework-2inh
https://docs.amplify.aws/lib/auth/getting-started/q/platform/js
What have I already tried:
deleting node_modules and reinstalling the project
trying to explicitly install #aws-amplify/core using npm (This throws a separate error)
Any help is appreciated :)
I ran into this issue working with AWS Datastore which also depends on #amplify/core. Here's how I resolved it:
npm i #aws-amplify/core --save --legacy-peer-deps
React component:
import Amplify from "#aws-amplify/core
The legacy peer deps flag was required in my case as the install React version was greater than the version required for amplify/core. You may also need to amplify init or amplify pull first if you've not already done so.
The perfect solution is as mentioned above. I found this after a lot of research. Need to install #aws-amplify/core. But along with that in my react app, I have to install some more packages for cognito to work properly.
npm i #aws-amplify/core --save --legacy-peer-deps
npm i #aws-amplify/storage --save --legacy-peer-deps
npm i #aws-amplify/interactions --save --legacy-peer-deps
npm i #aws-amplify/auth --save --legacy-peer-deps
npm i #aws-amplify/api --save --legacy-peer-deps
npm i #aws-amplify/analytics --save --legacy-peer-deps
npm i #aws-amplify/xr --save --legacy-peer-deps
Do npm install aws-amplify#latest sometimes this problem happens cuz the version i think.
After stop the project and run it again.
I was facing the same errors after upgrading #aws-amplify/ui-react from 1.x to 4.x
I have tried the below steps and errors got resolved after that.
Removed node_modules and package-lock.json files.
npm install

npm WARN #typescript-eslint/eslint-plugin#1.6.0 requires a peer of typescript#*

I am new to React and, starting with building an app, I came up with a problem while installing dependencies. I wanted to include packages like material-ui/core, material-ui/icons, react-reveal, react-scroll and react-slick.
While installing with this command:
npm install #material-ui/core #material-ui/icons react-reveal react-scroll react-slick
It showed that they've been installed, and when I started coding it didn't compile it.
That's when I came up with this error:
npm WARN #typescript-eslint/eslint-plugin#1.6.0 requires a peer of typescript#* but none is installed. You must install peer dependencies yourself.
npm WARN #typescript-eslint/parser#1.6.0 requires a peer of typescript#* but none is installed. You must install peer dependencies yourself.
npm WARN #typescript-eslint/typescript-estree#1.6.0 requires a peer of typescript#* but none is installed. You must install peer dependencies yourself.
npm WARN ts-pnp#1.1.2 requires a peer of typescript#* but none is installed. You must install peer dependencies yourself.
npm WARN tsutils#3.14.0 requires a peer of typescript#>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev but none is installed. You must install peer dependencies yourself.
What am I missing?
try this:
Delete 'package-lock.json' file
In the Terminal go to the folder with your project and type 'npm install --save typescript'
Then type 'npm install'
It helped me.
You can also resolve this issue by just installing typescript (it's clearly written in the debug output)
$ npm install typescript
You may also use other package-managers in favor of npm like pnpm or yarn.
Update:
You can also use an npm package that does this for you. Helpful when there are many peer dependencies.
The package is npm-install-peers. If you want slightly more control over these, you may want to check out install-peerdeps
Also, please do a further read on this StackOverflow answer.
While trying to reproduce the same error, on a Windows 10 machine with Node and npm installed, created an app with
npx create-react-app APP_NAME
If I run
npm start
the application will run just fine if I go to http://localhost:3000/
In order to fix the problem you're getting, I'd just install Typescript
npm install typescript
and that should suffice.
I will list every little bit of gory detail, just in case for some people it is helpful:
Remove package-lock.json (rm package-lock.json) if necessary
yarn add #material-ui/core #material-ui/icons react-reveal react-scroll react-slick
Read messages to make sure the dependencies were added. If you see any, then yarn add them as well.
Change into your node_modules directory (cd node_modules) then list to make sure all your packages and dependencies were installed (ls)
Check your App.js to make sure your import has the correct path (whether you really should have a ../ or not)
Go to the browser tab that is running localhost:3000
Refresh the page (For Chrome, it's the upper left clockwise arrow to the left of where you enter the URL)
add this in package.json:
"peerDependenciesMeta": {
"typescript": {
"optional": true
}
}

React App | Downloading modules not working

I made a homepage with several links in it. A tutorial was explaining how to link to another page in your website.
One of the first steps was to download a dependency called
sudo npm install --save react-router
After typing in the terminal sudo npm install --save react-router
It is resulting in a error-message I don't understand.
npm WARN react-static-container#1.0.1 requires a peer of react#^0.13.0 || ^0.14.0 || ^15.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-router#5.0.0 requires a peer of react#>=15 but none is installed. You must install peer dependencies yourself.
npm WARN create-react-context#0.2.3 requires a peer of react#^0.14.0 || ^15.0.0 || ^16.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN frank#1.0.0 No repository field.
I read in the error-message that I have to install peer dependencies myself. It's standing there 3 times. But where to start?
Can you tell my step by step how to manage this error? Reading across React websites it's not clear for me how to solve this issue.
EDIT:
The website works fine.
But now I would like to add a Router (dependency module) to change pages.
I only run into the above error messages by downloading this dependency.
Try doing npm install --save react before trying to install react-router.
Well in v4, react-router exports core components and functions. While react-router-dom exports DOM related components like Link, BrowserRouter, NavLink etc. So it will re-export all of react-router exports. so just install react-router-dom.
npm i react-router-dom

React Native dependencies

I want to start programming in React-native and have few problems:
-Whenever I run
npm install -g react-native
get this:
PS C:\Users\Name> npm install -g react-native
C:\Users\Name\AppData\Roaming\npm\react-native ->
C:\Users\Name\AppData\Roaming\npm\node_modules\react-native\local-
cli\wrong-react-native.js
npm WARN react-native#0.57.3 requires a peer of react#16.6.0-alpha.8af6728
but none is installed. You must install peer dependencies yourself.
npm WARN #babel/plugin-check-constants#7.0.0-beta.38 requires a peer of
#babel/core#7.0.0-beta.38 but none is installed. You must install peer
dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#1.2.4
(node_modules\react-native\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for
fsevents#1.2.4: wanted {"os":"darwin","arch":"any"} (current:
{"os":"win32","arch":"x64"})
+ react-native#0.57.3
added 39 packages from 55 contributors, removed 20 packages and updated 82
packages in 32.884s
However, if I manually install these packages, they still don't register as installed and I am getting the same error messages.
-The second problem I come across is, with expo (I think).
I have followed the instructions of the react native manual on facebook's github, but whenever I try to install native-base package, always get the message unable to resolve module native-base.
I tried to follow the steps that should lead me to solving the problem of clearing watchman and deleting node_modules but nothing helped.
I also couldn't implement react-native-swiper because of the same problem.
Whenever I install them, get the dependencies Warnings but when I install the dependencies the warnings don't go away.
It seems that the packages don't get installed if I issue the command. I thought that could be the problem but haven't been able to find a resolution to that.
react-native should not be installed as global. It should be installed in your project directory.
I think that instead of react-native you meant to install react-native-cli
which gives you cli options for building React-Native apps such as react-native init to start a project etc.
By using the react-native-cli module, using the native-base module becomes much easier as after doing npm i -S native-base you have to just run react-native link as written in the documentation.
Try delete your node_modules folder and re-install
npm i
You can also try clean npm cache.
Edit - better way will be install create-react-native-app, that should works outside the box.
https://github.com/react-community/create-react-native-app
Try to install it with this command npm install -g react-native-cli or with the sudo sudo npm install -g react-native-cli. Make sure you have installed the npm and node in your device

react-qr-reader installation issue with REACT

I'm trying to install react-qr-reader from https://github.com/JodusNodus/react-qr-reader. I installed REACT and REACT dom just fine but after I added the react-qr-reader package I get this:
root#server [~]# npm install --save react-qr-reader
npm WARN react-qr-reader#2.0.1 requires a peer of react#^15.0.2 but none is installed. You must install peer dependencies yourself.
npm WARN react-qr-reader#2.0.1 requires a peer of react-dom#^15.0.2 but none is installed. You must install peer dependencies yourself.
npm WARN root#1.0.0 No description
npm WARN root#1.0.0 No repository field.
How can I identity the missing peer?
When I try and load the js script I get an "Uncaught SyntaxError: Unexpected identifier" at that line: "import React, { Component } from 'react'". So I'm assuming PEAR is not even properly installed.
First you need to install react and react-dome
npm i react react-dom
Then try install react-qr-reader with sudo command
sudo npm i react-qr-reader --save
npm i react-qr-reader --force
use This its definitely Work For You

Resources