why it is giving error when I run npm install? - reactjs

while running npm install getting below error:
package.json file is present but still it is giving error

It looks like you installed the current version of react, but the other package (react-particles) is not the current version, as it depends on an older version of react. These two conflicting versions of react are incompatible, so you should probably delete your node_modules and update all your packages to the current version.

Related

Depedency issues, cloned react project

I cloned a React/typescript package from GitHub, but cannot get it to work. When I do npm install, the compiler complains that my typescript version is too new:
WARNING: You are currently running a version of TypeScript which is not officially supported by #typescript-eslint/typescript-estree
Is there some way, I can use exactly the node and packages versions as listed in the package.json?
I've also tried npm install --legacy-pee-deps, but that wasn't fruitful either, still get the problem. Also, I tried setting npm config set save-exact true before installing packages.
Thanks!

Typescript version in VScode

I have a CRA app in VSCode.
My global TS version is:
My project TS version is (package.json):
VSCode uses the latest:
Now, when I try to add a 4.0 TS feature, the terminal shows a compilation error:
I tried to change the package.json TS version to latest and ran npm install but it didn't help.
My Questions are:
Why doesn't it compile?
Which TS version is used for PROBLEMS pane and which for terminal? I would expect the same error in both locations.
Thanks in advance!
When you run tsc -v in the terminal, you are calling a globally installed Typescript package which is showing you have version 4.8.4 installed.
You can verify this by running npm list -g --depth 0 which will list all the global packages you have installed, along with their versions.
However, when using npm scripts (e.g in CRA npm run build) the Typescript package inside your node_modules folder is called. Since this version of Typescript is 3.x the compilation will fail. By changing VSCode to use the workspace version, the same error will be shown.
Upgrading the version inside your package.json to the latest should fix this error. To be sure the correct version is being used, try using an npm script to list the version by including this vers script in your package.json
"scripts": {
"...": "your other scripts",
"vers": "tsc -v"
}
then run npm run vers in your terminal.
TLDR:
Q1.
The Typescript version used when running the CRA build script (3.x)
is targeted which will fail when using 4.x syntax.
Q2.
The problems pane in VSCode uses the VSCode Typescript version
(depends how up to date your VSCode is) unless manually switched to
use the workspace version (node_modules version).
The terminal will target your globally installed version.
NPM scripts will target the version inside your node_modules folder.

Simple NPM Question Re-updating local react project after other dev added new package

I just started working with vscode and npm/git. Someone on my team added a package and I did a pull to get his latest changes which put that package in my package.json file. When I ran the project I got errors for a module not being found. Obviously I need to install that package locally. Do I simply use npm install w/no arguments to get it? Or do I install it manually myself with npm install and version info? I ask because I don't know if npm install w/no args will create a new package.json or cause any issues.
What is the correct way to get a new package installed that someone added in the repo?
npm install can be run as many times as you like, and is what you should be doing here :)
npm install's purpose is to get your node_modules folder up-to-date with whatever is written in package.json
So, if your colleague has changed package.json (by installing something new and pushing the change to git), you can just run the command again to get up-to-date.
Provided you haven't directly fiddled with any files in node_modules (this folder should be left alone), it is always safe to run npm install as many times as you like, even if nothing has changed.

How to update react native

I am currently on version 0.45.1 which is pretty old. And I am trying to upgrade it so that other dependencies work as expected (they updated their libraries and they require 0.46.1 and above).
I am following this process:
delete node_module folder
change react-native version number in package.json
run yarn cache clean
run watchman watch-del-all
run yarn so that dependencies get downloaded and linked
restart packager
reload app
App compiles and runs fine for "react-native": "^0.45.1", but some dependencies don't behave right (and they require 0.46 and above).
Attempt to upgrade to 0.46.0:
I set react-native version number in package.json to "react-native": "^0.46.0", and I follow the above process. I get this error:
Unable to resolve module 'react-native/Libraries/Renderer/src/renderers/native/ReactNativePropRegistry' from '/Users/MyUser/Projects/MyProject/node_modules/native-base/Components/Widgets/Button.js': Module does not exist in the module map
Attempt to upgrade to 0.47.0:
I get same error as above.
Attempt to upgrade to 0.48.0 (newest RN version):
I get same error as above.
Any help?
This error indicates a version conflict. You need to change the version of the native base. Native base compatibility versions https://github.com/GeekyAnts/NativeBase#6-compatibility-versions

Jest fails with error: Cannot find module 'react/lib/ReactComponentTreeHook'

I have installed Jest v17.0.3 in my react project.
When I run jest locally it works fine, but on the build server it fails with:
Error: Cannot find module 'react/lib/ReactComponentTreeHook' from 'ReactDebugTool.js'
Both machines are running node version 6.9.1 and npm version 4.0.2.
use same version of react and react-dom. My problem fixed after using this command
npm install --save react#15.4.0 react-dom#15.4.0
this problem specially occurs on react 15.4.0 above.
Can you check which version of React you are using? Is it the same on both servers? I would try removing node_modules and reinstalling the dependencies. The reason I am suggesting this is that in React v15.4.0 you cannot import private apis and it seems that ReactDebugTools.js is trying to import from react/lib/....
From the blogpost about React v15.4.0 (Link):
However, there is a possibility that you imported private APIs from react/lib/*, or that a package you rely on might use them. We would like to remind you that this was never supported, and that your apps should not rely on internal APIs. The React internals will keep changing as we work to make React better.
Hope this helps!
In the latest versions of react we often see this error as we have loaded 2 versions of react:
To make sure you have just 1 version, run the following in your terminal:
npm ls react-dom
npm ls react
Both the react and react-dom versions need to be same.
If any one of these returns more than 1 version then that's not supported. You have to then correct it in your corresponding package.json
I had the same issue and i removed the node_modules and ran npm install and it fixed the problem.

Resources