I have this problem, I want to run or build a project in React, it is in version 16.4.2, but when I want to do what is done at the beginning, that is, npm install, I already have errors that I don't really know how to solve, if I Can you please come up with something, I would appreciate it.
Thank you so much.
package.json
{
"name": "project",
"version": "0.1.0",
"private": true,
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.34",
"@fortawesome/free-regular-svg-icons": "^5.15.2",
"@fortawesome/free-solid-svg-icons": "^5.15.2",
"@fortawesome/react-fontawesome": "^0.1.14",
"@popperjs/core": "^2.6.0",
"@react-pdf/renderer": "^1.6.13",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/bootstrap": "^5.0.5",
"axios": "^0.21.1",
"bootstrap": "^4.6.0",
"mime-types": "^2.1.28",
"moment": "^2.29.1",
"node-sass": "^4.14.1",
"react": "^16.4.2",
"react-bootstrap": "^1.4.3",
"react-csv": "^2.0.3",
"react-data-table-component": "^7.0.0-alpha-5",
"react-datepicker": "^3.4.1",
"react-dom": "^17.0.1",
"react-export-excel": "^0.5.3",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"react-select": "^4.0.2",
"react-switch": "^6.0.0",
"react-test-renderer": "^16.14.0",
"redux-devtools-extension": "^2.13.8",
"styled-components": "^5.2.1",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@types/enzyme": "^3.10.8",
"@types/enzyme-adapter-react-16": "^1.0.6",
"@types/jest": "^26.0.23",
"@types/node": "^15.0.1",
"@types/react": "^16.14.2",
"@types/react-csv": "^1.1.1",
"@types/react-datepicker": "^3.1.3",
"@types/react-dom": "^17.0.3",
"@types/react-redux": "^7.1.16",
"@types/react-router-dom": "^5.1.7",
"@types/react-select": "^4.0.12",
"@types/react-test-renderer": "^17.0.1",
"@types/redux-mock-store": "^1.0.2",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"jest-enzyme": "^7.1.2",
"redux-mock-store": "^1.5.4",
"sass": "^1.32.6",
"sass-loader": "^10.1.1",
"typescript": "^4.2.4"
},
"description": "This project was bootstrapped with [Create React App].",
"main": "index.js",
"author": "",
"license": "ISC"
}
index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, compose } from 'redux';
import { Provider } from 'react-redux'
import './index.scss';
import App from './App';
import reducer from './store/index';
import reportWebVitals from './reportWebVitals';
declare global {
interface Window {
__REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose;
}
}
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, composeEnhancers())
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
App.tsx
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.scss';
import Routers from './routers/';
function App() {
return (
<div className="container-fluid">
<Routers/>
</div>
);
}
export default App;
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: project@0.1.0
npm ERR! Found: react@16.14.0
npm ERR! node_modules/react
npm ERR! react@"^16.4.2" from the root project
npm ERR! peer react@"*" from @testing-library/react@11.2.4
npm ERR! node_modules/@testing-library/react
npm ERR! @testing-library/react@"^11.1.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"17.0.1" from react-dom@17.0.1
npm ERR! node_modules/react-dom
npm ERR! react-dom@"^17.0.1" from the root project
npm ERR! peer react-dom@"*" from @testing-library/react@11.2.4
npm ERR! node_modules/@testing-library/react
npm ERR! @testing-library/react@"^11.1.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.
npm ERR!
npm ERR! See C:\Users\NB-RMORALES\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\NB-RMORALES\AppData\Local\npm-cache\_logs\2023-02-23T22_44_28_352Z-debug-0.log
I've tried to install each of the dependencies manually but it's one after the other, so you can't do it like that.
I tried this, npm install --legacy-peer-deps, but it didn't work either.
I don't know why the same thing always happens to npm, when there is a need to modify a project that has been going on for some time, and you want to make new modifications to that project, the libraries always have problems. :/....... why?
Thank you so much.
The most relevant lines of that stacktrace are here:
npm ERR! While resolving: project@0.1.0
npm ERR! Found: react@16.14.0
npm ERR! node_modules/react
npm ERR! react@"^16.4.2" from the root project
...
npm ERR! Could not resolve dependency:
npm ERR! peer react@"17.0.1" from react-dom@17.0.1
npm ERR! node_modules/react-dom
In your package.json you have conflicting dependencies:
"react": "^16.4.2",
"react-dom": "^17.0.1",
Your react and react-dom versions should match.
These may not be the only two, but you can continue to look for other dependency conflicts by fixing these two first and running npm install again to see if any more errors appear.