Add - - force flag to a dependency in package.json for a Reactjs project-CodePudding

I'm trying to deploy my front-end reactjs to Netlify, but I'm getting an error while installing react-ribbon package

I had a similar error while installing it locally and I had to force install it which worked and the package is working app(locally)

Now what I need is to make Netlify do the same thing (force install react-ribbon) but I'm not sure on how to go around to doing this

Is there some kind of flag I can add to the dependency in package.json so Netlify will recognize that this requires a force install

Or is there another similar ribbon package I can find that works similar to react-ribbon I can use instead without needing the force flag.

I tried multiple different ribbon packages but they all give me the same error while installing.

CodePudding user response：

TL;DR: Specify environment variable NPM_CONFIG_LEGACY_PEER_DEPS = true in Netlify.

Long explanation:

First of all, you should understand what the error is about when you were installing react-ribbon.

That error is most likely something like this

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
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.10.2" from [email protected]

Basically, react-ribbons is expecting React 16, which I don't think you are using such an old version of React. So NPM believes react-ribbon is not compatible with your project, and prevents the installation.

Now by adding --force, which is self-explanatory enough, you are essentially asking NPM to install that regardless. And --legacy-peer-deps will more or less achieve the same thing and is less destructive.

And for the environment variable, this is simply one way of how NPM reads config. So if you set NPM_CONFIG_LEGACY_PEER_DEPS = true, NPM will automatically add the --legacy-peer-deps to the commands. https://docs.npmjs.com/cli/v8/using-npm/config#environment-variables

And if you HAVE to use --force, which I don't recommend, you can do NPM_CONFIG_FORCE = true instead.