Error installing the styled-components package in React Native - javascript

Has anyone faced this problem? I installed the styled-components package for working on a mobile application (React Native), but when I import it in VS Code, the line is highlighted with an error saying "Failed to find declaration file for module 'styled-components/native'. path has an implicit any type". Although this code works and everything can be seen on the phone.
node_modules has everything
in the package.the json of the project itself added resolution { "styled-components": "^5"
tried installing #types/styled-components and #types/styled-components/native
I tried the installation with --save and without it. It didn't help. But when installing separately styled-components/naitve, an error appears: npm ERR! code 128, npm ERR! An unknown git error occurred, npm ERR! command git --no-replace-objects ls-remote ssh://git#github.com/styled-components/native.git, npm ERR! git#github.com: Permission denied (publickey)., npm ERR! fatal: Could not read from remote repository, npm ERR! Please make sure you have the correct access rights, npm ERR! and the repository exists.
enter image description here

Related

MapBox SDK for React Native Installation shows Error

I created a React Native project with Expo using expo init MapTry. I am currently trying to install MapBox library into it. For some reason I get an error at the first step after trying to install it. I followed this guide of installation: https://github.com/rnmapbox/maps#Installation but for some reason I am getting an error message when I try to run npm install rnmapbox/maps#main --save from the terminal. The error says the following:
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm ERR! code ENOENT
npm ERR! syscall spawn git
npm ERR! path git
npm ERR! errno -4058
npm ERR! enoent An unknown git error occurred
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
I also tried to search for it in the official NPM site and found this one: https://www.npmjs.com/package/#rnmapbox/maps . After running the following code: npm i #rnmapbox/maps which was written there, I get the same error message as written above. What should I do? How can I use MapBox library in React Native?
try to run this command in your terminal
with NPM
npm install #rnmapbox/maps --save
with YARN
yarn add #rnmapbox/maps

Unable to Install and configure the MDX transformer plugin (and dependencies) in gatsby site

Goal: Trying to create a simple blog using Gatsby
Outcomes:
Expected Outcome: Things should go as defined in the tutorial guide
Actual Outcome: Getting Dependency tree error in step(s) & Also a warning message like 34 vulnerabilities (11 moderate, 23 high) whenever installing something using npm in this project
Approach: I am following the guide available here, & in Task install MDX transform plugin, getting the below error
Questions:
How do i resolve this particular dependency tree issue & Also in general how do i approach this kind(dependency tree issue) of errors in npm?
The warnings related to the vulnerable packages - How critical are those & How should it be handled ?
Command-used: npm install gatsby-plugin-mdx #mdx-js/mdx#v1 #mdx-js/react#v1
Output/Console Error:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: my-gatsby-site#1.0.0
npm ERR! Found: react#18.2.0
npm ERR! node_modules/react
npm ERR! react#"^18.1.0" from the root project
npm ERR! peer react#"^16.9.0 || ^17.0.0 || ^18.0.0" from gatsby-plugin-mdx#3.18.0
npm ERR! node_modules/gatsby-plugin-mdx
npm ERR! gatsby-plugin-mdx#"*" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^16.13.1 || ^17.0.0" from #mdx-js/react#1.6.22
npm ERR! node_modules/#mdx-js/react
npm ERR! #mdx-js/react#"v1" from the root project
npm ERR! peer #mdx-js/react#"^1.0.0" from gatsby-plugin-mdx#3.18.0
npm ERR! node_modules/gatsby-plugin-mdx
npm ERR! gatsby-plugin-mdx#"*" 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 <home-folder>/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! <home-folder>/.npm/_logs/2022-07-06T15_46_56_149Z-debug-0.log
Updates:
Update 1:
After trying one of the suggestion given by the fellow stack-overflow site member, a new error is thrown! So ignoring the dependency tree issue with skip legacy tree is not working, Hence any more suggestion from any gatsby users!?
gatsby develop
ERROR #11901 COMPILATION
Failed to compile Gatsby files (Error):
Could not resolve module "#parcel/namer-default" from
"<home-folder>/codeSpace/siteByGatsby/sv3/my-gatsby-site/node\_modules/#gatsbyjs/parcel-namer-relative-to-cwd/lib/index.js".
not finished compile gatsby files - 0.778s
Not that "you should" normally do what i am about to suggest, but you can run:
npm install gatsby-plugin-mdx #mdx-js/mdx#v1 #mdx-js/react#v1 --legacy-peer-deps
Basically what this will do is tell npm that you wish to install peer dependencies, the reason this happens is because you are using React#18.2 in your project, but the packages you are trying to install are using a lower version of React. Thus, NPM is throwing you this error.
The reason why "you shouldn't" normally do this, is imagine theres a dependancy within a package that is flagged as vunerable, but you currently have a 'fixed' version of this installed. You would then be installing the peer dependency that could have a vulenarbility.
You can run the above code and be 'alright', its not a big deal that it is wanting to install lesser version of React.
But what you should also think about, is do you really need React#18.2, or could you use a downgraded version because, how likely are you to use any of the features that might be in the latest version release.
This is also a reason why a lot of developers don't just go and install the newest version of React when they are building projects, because you have to rely on packages that are maintained by either solo developers, or by a community of lovely people who are willing to help maintain a package to bring it up to speed with Reacts latest releases.
These are pretty much the main three things you can do:
You either install the legacy dependencies
You knock React down a version peg that is inline with the version required in the dependency tree for the packages you are looking to use
You find another package, or you take a look on their Github incase they have released a version, but not yet published this release to NPMjs yet
Hope this helps :)
Sidenote:
When migrating this project to a hosting provider, you will also need to tell them that you have packages that you have force installed with --legacy-peer-deps by either creating an environment variable for the site on the hosting providers platform, or with .npmrc file with the following:
legacy-peer-deps=true

npm ERR! code E401 npm ERR! Incorrect or missing password

My Node version is 10.15.0 and NPM version is 6.8.4
On running npm install after upgrading
npm to 14.16.0 and npm to 7.6.2
Getting this error -
npm ERR! code E401
npm ERR! Incorrect or missing password.
npm ERR! If you were trying to login, change your password, create an
npm ERR! authentication token or enable two-factor authentication then
npm ERR! that means you likely typed your password in incorrectly.
npm ERR! Please try again, or recover your password at:
npm ERR! https://www.npmjs.com/forgot
npm ERR!
npm ERR! If you were doing some other operation then your saved credentials are
npm ERR! probably out of date. To correct this please try logging in again with:
npm ERR! npm login
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/xyz/.npm/_logs/2021-04-15T18_55_07_993Z-debug.log
Try Deleting the package-lock.json file before running the command "npm install" after upgrading the node versions, if you have not done that.
If that will not work try removing the .npmrc file in $HOME directory as mentioned in this post.
NPM ERR Code E401: Unable to authenticate, need: Bearer authorization
Note - Deleting package-lock.json can have its own issues as mentioned in this posts, so go with this solution unless you find any better solution.
Deleting `package-lock.json` to Resolve Conflicts quickly
In the directory C/Users/your-windows-username/
delete the following files:
.cache
.package
.package-lock
.npmrc
After that, go to your project and run the following command in your terminal
npm i
I had the same error with the company registry configured in .npmrc
registry=https:<company-registry-url>
Node version : 19.1.0
NPM version : 8.19.3
Solution:
Execute npm login
$ npm login
npm notice Log in on https:<registry-url>
Username: xxxx
Password:
Email: (this IS public) (xxxx)
Logged in as xxx on https:<registry-url>.
After this .npmrc got updated with
//<registry-url>/:_authToken=xxxxx
Your password in .npmrc must be base64 encoded. Easy to screw up just copy-pasting the password, need to base64 encode that.
I have been getting the same error recently on various projects after running npm run dev:
npm ERR! code E401
npm ERR! Incorrect or missing password.
What fixed it for me was to delete my package-lock.json file (and any yarn.lock files, which might create conflicts with npm) and the node_modules directory. Then I updated my npm packages with npm update. (CAUTION: Before updating any npm packages, you should probably create a new Git branch and run npm update in that new branch. If you run into bigger problems after the updates, then you can revert back to your previous branch.)
After my packages were updated, then running my npm startup script (e.g. npm run dev) worked again without errors.
NOTE: You can run npm outdated to see which of your npm packages could use an update.
Had the same issue with Node 16.x.x.
I have done everything from this topic and those topics which were mentioned here and nothing helped me!
The only thing that helped me to login was that I have deleted Node 16.x.x and installed Node 14.8.1 from here - https://nodejs.org/en/download/releases/
It can be happening because of a bug on npm. This was happening to me with npm v7. Switched to v6 and it worked.
More context: https://github.com/npm/cli/pull/2153
Reinstall the lastest node.js. That fixed my issue.

React Installation problem npx-create-react-app not working properly

This is the error that Im facing every-time i do npx create-react-app app-name.
At first It was all good everything was working perfectly but all of a sudden it's been a few days since Im facing this error and i cant seem to solve it.
hassan_xiddiqui#Kratos:~/React$ npx create-react-app starter_1
Need to install the following packages:
create-react-app
Ok to proceed? (y) y
Creating a new React app in /home/hassan_xiddiqui/React/starter_1.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
npm ERR! code ECONNRESET
npm ERR! errno ECONNRESET
npm ERR! network Invalid response body while trying to fetch https://registry.npmjs.org/eslint-plugin-jsx-a11y: aborted
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network &apos;proxy&apos; config is set properly. See: &apos;npm help config&apos;
npm ERR! A complete log of this run can be found in:
npm ERR! /home/hassan_xiddiqui/.npm/_logs/2021-04-03T12_14_14_243Z-debug.log
Aborting installation.
npm install --save --save-exact --loglevel error react react-dom react-scripts cra-template has failed.
Deleting generated file... package.json
Deleting starter_1/ from /home/hassan_xiddiqui/React
Done.
The error is very clear in the message you're receiving:
This is a problem related to network connectivity.
In most cases you are behind a proxy or have bad network settings.
If you are behind a proxy, please make sure that the
'proxy' config is set properly. See: 'npm help config'
If you're using a VPS, disable it. Try checking your DNS settings, maybe change them to Google's.
Also, try to install anything from NPM to confirm this is an issue with your connection. npm install -g create-react-app. If this (or any other package) succeeds, it may be other issue.
Consider as well it could be an issue with npx on your machine. Try installing it using create-react-app directly instead by first installing it globally (like I showed above)
It's more of an network error you can check the config or try to flush your dns or something. Maybe try some other network if possible
Try to install npm again using: npm install
Also check what node version you're using: node --v
Then, run the command again: npx create-react-app app_name

NPM broken and reporting this error: npm ERR! 404

I am running npm update -g and I get
npm ERR! code E404
npm ERR! 404 Not found : default-html-example
npm ERR! 404
npm ERR! 404 'default-html-example' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/me/.npm/_logs/2018-10-25T22_24_12_353Z-debug.log
So, I get this after any command now, for example in any project, when I run ./node_modules/.bin/eslin . I get the linter results, but at the end of the verbose there is always this error.
--- UPDATE ---
Upon further investigation, I have found this.
Something called /usr/local/lib/node_modules/default-html-example
This is something I have worked on as an example as part of one of my first tutorials. Not sure about how on earth it ended up there.
When I checked it, it turns out it is a symlink to a tutorial: default-html-example -> /Users/me/learning/lynda_com_JavaScript_Essential_Training/MY_Ex_Files_JavaScript_EssT/Exercise_Files/default
This is still a mystery, how it ended up there?
Finding and removing that rogue folder /usr/local/lib/node_modules/default-html-example solved the issue.
However, I am still not sure how that folder ended up in that location. It was one of my first tutorial project folders.

Categories

Resources