Problem after executing of command npm install in the console

Question

I have project with React and in the console It show something with webpack. I decided to uninstall webpack and after that to delete package-lock.json and node_modules files. After that I install again npm with command nom install, but I become error:

 PS C:\Users\201217040\Documents\carRentalApp\frontend> npm install
    npm ERR! code ERESOLVE
    npm ERR! ERESOLVE unable to resolve dependency tree
    npm ERR!
    npm ERR! While resolving: frontend@0.1.0
    npm ERR! Found: react@18.2.0
    npm ERR! node_modules/react
    npm ERR!   react@"^18.2.0" from the root project
    npm ERR!
    npm ERR! Could not resolve dependency:
    npm ERR! peer react@"^16.8" from use-reducer-logger@1.0.2
    npm ERR! node_modules/use-reducer-logger
    npm ERR!   use-reducer-logger@"^1.0.2" 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\201217040\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\201217040\AppData\Local\npm-cache\_logs\2023-05-04T20_04_11_532Z-debug.log

How can I fix this error and continue with my code in React?

Did you give this question a look? https://stackoverflow.com/questions/64573177/unable-to-resolve-dependency-tree-error-when-installing-npm-packages — Gchammas23, May 04 '23 at 20:18
[This thread might help you understand what this error means and solve it by yourself](https://stackoverflow.com/questions/74901830/why-err-eresolve-unable-to-resolve-dependency-tree-is-thrown-and-how-to-resolve). — Youssouf Oumar, May 04 '23 at 20:59

score 0 · Answer 1 · answered May 04 '23 at 20:27

I'd recommend try the same cycle again. If problem persists, I'd manually try to resolve the conflict between the required version of React in your project (18.2.0) and the required version of React in the use-reducer-logger package (version ^16.8).

However, I'd recommend trying Redux devtools plugin on chrome (https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en) which is more sophisticated than use-reducer-logger

score 0 · Answer 2 · answered Jul 04 '23 at 08:27

This warning throws since npm v7. It means the package installed in your project is incompatible with the package that will be installed.

The use-reducer-logger@1.0.2 package has the blow peer dependencies:

$ npm view use-reducer-logger@1.0.2 peerDependencies
{ react: '^16.8' }

But in your project, the installed react is 18.2.0 which is incompatible. That's why you got the warning.

The safe solution is to downgrade the react package version to ^16.8.

$ npm i react@^16.8 -S

Usually, be careful to run the npm install <package> with --force, or --legacy-peer-deps option, it will cause potentially broken. Instead, we should fix the version compatibility issues between dependent packages.

However, you can use these two command options safely. If you confirm the runtime code is compatible in advance.

Let's see the source code of use-reducer-logger@1.0.2 package.

There is only one file srhfl.js, and its code:

import { useCallback } from "react";

const getCurrentTimeFormatted = () => {
  const currentTime = new Date();
  const hours = currentTime.getHours();
  const minutes = currentTime.getMinutes();
  const seconds = currentTime.getSeconds();
  const milliseconds = currentTime.getMilliseconds();
  return `${hours}:${minutes}:${seconds}.${milliseconds}`;
}

const logger = (reducer) => {
  const reducerWithLogger = useCallback((state, action) => {
    const next = reducer(state, action);
    console.group(`%cAction: %c${action.type} %cat ${getCurrentTimeFormatted()}`, "color: lightgreen; font-weight: bold;", "color: white; font-weight: bold;", "color: lightblue; font-weight: lighter;");
    console.log("%cPrevious State:", "color: #9E9E9E; font-weight: 700;", state);
    console.log("%cAction:", "color: #00A7F7; font-weight: 700;", action);
    console.log("%cNext State:", "color: #47B04B; font-weight: 700;", next);
    console.groupEnd();
    return next;
  }, [reducer]);

  return reducerWithLogger;
}

export default logger;

It just uses the useCallback hook from the react package. The behavior of useCallback has no change in React 18.x. That's why you can use --force and --legacy-peer-deps options.

P.S. The code is very simple and short. You can even copy the source code into the project to use instead of installing the package

Problem after executing of command npm install in the console

2 Answers2