Having trouble running a React application from GitHub on VS Code

Sorry for the beginner question. I recently downloaded a React application from GitHub. However, when I attempt to run it locally on VS Code, I encounter some dependency errors. Here are the dependencies listed in the JSON file:

"dependencies": {
"@chakra-ui/react": "^1.8.5",
"@emotion/react": "^11",
"@emotion/styled": "^11",
"@hookform/resolvers": "^2.8.8",
"algoliasearch": "^4.12.1",
"axios": "^0.26.0",
"framer-motion": "^6",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-hook-form": "^7.27.1",
"react-icons": "^4.3.1",
"react-images-uploading": "^3.1.3",
"react-instantsearch-dom": "^6.22.0",
"react-query": "^3.34.16",
"react-router-dom": "^6.2.1",
"react-table": "^7.7.0",
"recharts": "^2.1.9",
"sass": "^1.49.9",
"yup": "^0.32.11",
"zustand": "^3.7.0"

}

Error:

npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b6d7d2dbdfd89bd0d7">[email protected]</a>
npm ERR! Found: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="daa8bfbbb9ae9aebedf4eaf4e8">[email protected]</a>
npm ERR! node_modules/react
npm ERR!   react@"^17.0.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0" from <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="daa8bfbbb9aef7b3b7bb">[email protected]</a>
npm ERR! node_modules/react-images-uploading
npm ERR!   react-images-uploading@"^3.1.3" 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.
npm ERR! 
npm ERR! See C:\Users\12392\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\12392\AppData\Local\npm-cache\_logs\2022-03-09T00_59_26_007Z-debug-0.log

Running node v16.14.0 Any assistance with this issue would be greatly appreciated.

node.jsreactjsnpm

Answer №1

To resolve the issue, try running npm install --force or npm install --legacy-peer-deps

By doing this, you will address the error by bypassing the peer dependencies and concentrating on the primary dependencies.

Personally, I have found success with this solution whenever encountering a similar error.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error message: "An issue occurred: Unable to access undefined properties (specifically, borderRadius) in MUI react."

I recently created a navigation bar with an integrated search bar component. The styling for my search component was done using MUI styled from @emotion/styled in MUI library, where I applied a borderRadius: theme.shape.borderRadius. However, I encountere ...

javascriptcssreactjsmaterial-ui

Determine in JavaScript if one date occurs exactly one week after another date

Currently, I am tackling a date comparison task for our application. The main objective is to compare the Start Date inputted by the user with the Operator/Region Effective Date, which signifies when a new list of product prices becomes valid. Our aim is t ...

javascriptreactjstypescript

Error encountered while trying to install npm for a web project

While attempting to install npm modules, I am encountering the following issue: PS C:\Users\maxzag\Desktop\svoi> npm install npm ERR! Cannot read property '0' of undefined npm ERR! A complete log of this run can be found ...

node.jsnpm

Efficient version control and change tracking system for Mongoose database operations

I am exploring ways to automatically generate a record (Update) in MongoDB using Mongoose/Node.js/Express whenever changes are made to a document. Being new to Node.js, I am seeking advice on the most effective approach for achieving this. The envisioned ...

node.jsexpressmongoose

Materialize UI: Grid Display of Lengthy Text Wrapping

On the Material-UI documentation page, specifically in the section about Grid: white-space: nowrap;, there is an example of text wrapped in a CodeSandbox. In this example, I replaced const message ="" with a long text without spaces: const message ="Asup ...

reactjsgridmaterial-ui

Why is my custom 404 page failing to load after building my Next.js application?

I recently set up a custom 404 page for my Next.js app and wanted to test it locally before deploying to the server. To do this, I used the "serve" package to host the project on my local machine. However, when I tried navigating to a non-existent page, th ...

javascriptreactjstypescriptnext.jsfrontend

NextJS component fails to re-render after being updated

I've been diving into the world of useEffect, useState, and rerendering, but I'm struggling to grasp the core issue at hand. While the data update itself is functioning properly, I find myself needing to manually refresh the page in order to see ...

reactjsnext.js

Tips for utilizing UTC time in defining models with Prisma.js and in general in an Express.js project

Is there a way to Run the node.js project in UTC instead of the local timezone? and How can I specify UTC time when defining a model with prisma.js? model Profile { CreatedDate DateTime @default(now()) // but I need it in UTC ModifiedDate DateTi ...

node.jsexpressutcprisma

"Exploring the versatility of Material UI's dropdown feature with multiple columns in React JS

Is there a way to implement a Material UI dropdown box like the one in this image using only Material UI React JS (JavaScript)? What is the best approach to utilize the backend for displaying data from both the first and second columns? Requirements: Use ...

reactjsmaterial-ui

How can I implement a toggle button to display additional details for a specific row within a table created using React.js?

I'm currently working on a project using Next.js and have come across an unexpected issue. Upon reading a JSON file, I populate a table with the data retrieved from it. Each piece of information in the table has hidden details that should only be reve ...

javascriptreactjsnext.jstoggle

What is the best way to bring a local package into another npm package and verify its functionality using Typescript?

In a scenario where there are 3 npm projects utilizing Webpack and Typescript, the folder structure looks like this: ├── project1/ │ ├── tsconfig.json │ ├── package.json │ ├── src/ │ │ └── index.ts │ ...

htmltypescriptnpmwebpack

Issue encountered: Incompatibility between Mongoose Populate and Array.push()

After reading a different post addressing the same issue, I still couldn't figure out how to implement the solution into my own scenario. The discussion revolved around the topic of node js Array.push() not working using mongoose. In my Mongoose asyn ...

javascriptnode.jsarraysasynchronousmongoose

Can Next.js 13 support the usage of axios?

Despite trying to implement the SSG operation with the fetch option {cache: 'force-cache'}, I consistently received the same data even when the mock server's data changed. I found that using the fetch option {cache: 'no-store'} do ...

javascriptreactjsnext.jsaxiosfetch-api

Encountering issues while trying to npm install or execute the electron-quick-start application

Currently, I am running Node version 7.4.0 and NPM version 4.0.5 (Windows) as recommended on Electron's website. The issue I'm facing arises when running the npm install command within the cloned electron-quick-start directory. I've experim ...

node.jselectron

What is the best way to create a Dialog with a see-through body in Android?

Is there a way to hide the background dialog box without hiding the inner content? Simply setting opacity to 0 won't work because it will also hide the children nodes: <Dialog title="Dialog With Actions" actions={actions} modal={no} ...

reactjsmaterial-ui

Error in Node.js Socket.io: The disconnect event is being triggered before the connect event

When the client reconnects after a network drop, the disconnect event is triggered on the server. Client code: var url ='192.168.1.101', port = '80', socket = io.connect('http://' + url + ':' + port, { &apo ...

javascriptnode.jssocketsexpresssocket.io

Guide on compiling SCSS to CSS when running npm start

When running my application with npm start, I'm unable to compile scss files to css live. Is there a way to achieve live reload for sass to css similar to how ts are compiled to js by the tsc:w utility? Currently, I have to stop the build, then run gu ...

node.jsangularnpmsassgulp

Navigate to a different section on the same page using NextJs

I am currently working with NextJs and I have a question. How can I create a link in the header section that will smoothly scroll the user to the TestimonialsSection on the same page? <Link href={"#TestimonialsSection"}> & ...

reactjsnext.js

Using SignalR with ReactJS - managing a single hubConnection across various components

Recently delving into React, I've started incorporating SignalR into a web application. While SignalR functions well, my initial idea of utilizing a service or helper class to create a single hub connection for multiple components proved to be incomp ...

reactjssignalrsignalr.client

The server is failing to provide the requested data in JSON format

I am struggling with making a simple API call using Node.js as the backend and React in the frontend. My Node.js file is not returning data in JSON format, and I'm unsure of the reason behind this issue. I need assistance with two main things: Why is ...

javascriptnode.jsreactjsjson