Create-react-app dependency version issues - reactjs

I am trying to create a basic react app using the command:
npx create-react-app my-app
At work we use JFrog Artifactory to manage our npm packages. When trying to use the above command, I get the following error:
npm ERR! 403 403 Forbidden - GET https://artifactory.XYZ.domain:443/artifactory/api/npm/npm-main/ansi-regex/-/ansi-regex-4.1.0.tgz
npm ERR! 403 In most cases, you or one of your dependencies are requesting
npm ERR! 403 a package version that is forbidden by your security policy.
npm ERR! 403
npm ERR! 403 It was specified as a dependency of 'wrap-ansi'
Sure enough, when I look in Artifactory I can see that v4.0.1 is blocked due to a security vulnerability. What are my options here please? Is it possible to somehow force create-react-to instead use a later version without the vulnerability (looks like v5.0.1 is fine)?
Thanks for your help

you can do
npm config set registry <path/to/artifactory>
///create your react project:- npm create-react-app myapp
//then revert to older config if you want to by
npm config delete registry
let me know if it works

Related

Error creating react app using create-react-app my-app

C: \Users›create-react-app my-app
Creating a new React app
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template
npm ERR! code E403
mpm ERR! 403 403 Forbidden- GET https://registry.npmjs.org/open/-/open-8.4.0.t
npm ERE: 46B In most cases, you or one of your dependencies are requesting
mpm ERR! 403 a package version that is forbidden by your security policy, or
npm ERR! 403 on a server you do not have access to.
npm ERR! A complete log of this run can be found in:
Aborting installation.
pm install
--no-audit
--save
--save-exact
--loglevel error react react-dom re
Deleting generated file...
Deleting my-app/ from C: \Users
Done.
package, json
if you are trying to create a new react-app first of all make sure your node version is 14 or above then use
npx create-react-app your-app-name
for more details please visit documentation

(error) AWS as backend installing amplify libraries

I am new to backend. Just starting to make a To-Do app in react and was just setting up amazon aws for backend. Using this site for reference ( https://docs.amplify.aws/start/getting-started/setup/q/integration/react#initialize-a-new-backend ).
And at the point Install Amplify libraries I got stuck while i type npm install aws-amplify #aws-amplify/ui-react in root directory it shows me error everytime.[error pic][1] I am trying for a long but did not find any solution. Pls help me in this issue !!
[1]: https://i.stack.imgur.com/hrSeJ.png Here is the error i'm getting in command prompt👇
npm ERR! Unexpected end of JSON input while parsing near '...:"^1.0.0-beta.2","#aw'
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Aakash~1Bansal\AppData\Roaming\npm-cache\_logs\2021-04-09T11_41_43_000Z-debug.log
F:\Learning- tanay pratap\AWS\react-amplified>npm install aws-amplify #aws-amplify/ui-react
npm ERR! Unexpected end of JSON input while parsing near '...:"^1.0.0-beta.2","#aw'
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Aakash~1Bansal\AppData\Roaming\npm-cache\_logs\2021-04-09T11_45_14_875Z-debug.log
F:\Learning- tanay pratap\AWS\react-amplified>
I was having the same issue. 1st make sure your PC is connected to internet connection. Run:
npm uninstall -g #aws-amplify/cli
npm install -g #aws-amplify/cli
If possible don't minimize the window wait till everything is properly install.
This worked for me.
Still you are facing problems then reinstall node.js and then do this.
Thank you!

How develop node modules locally using npm link in react project

I want to add my custom build botframework-webchat in reactproject
I have tried adding using npm link.I get the following Error
Vostro-270s:~/React/Botframework webchat/chatbot$ npm link ./BotFramework-WebChat-3
npm ERR! code EINVALIDTYPE
npm ERR! typeerror Error: Argument #2: Expected array but got string
npm ERR! typeerror at EventEmitter.install (/usr/local/lib/node_modules/npm/lib/install.js:190:3)
npm ERR! typeerror at Object.commandCache.(anonymous function) (/usr/local/lib/node_modules/npm/lib/npm.js:156:13)
npm ERR! typeerror at /usr/local/lib/node_modules/npm/lib/link.js:93:24
npm ERR! typeerror at /usr/local/lib/node_modules/npm/node_modules/graceful-fs/polyfills.js:282:31
npm ERR! typeerror at FSReqWrap.oncomplete (fs.js:152:21)
npm ERR! typeerror This is an error with npm itself. Please report this error at:
npm ERR! typeerror <https://npm.community>
npm ERR! A complete log of this run can be found in:
npm ERR! /home/.npm/_logs/2019-07-16T11_35_13_546Z-debug.log
I have My BotFramework-WebChat-3 and My React app in a folder.
I'm tring to integrate Microsoft Botframework in my react app.
https://github.com/microsoft/BotFramework-WebChat
* Hard: In your React website, incorporate a custom build of the Web Chat component *
The simplest approach is to clone (or fork) this repo, alter it, build it, then reference your local build in your project's package.json as follows:
dependencies: {
...
'botframework-webchat': 'file:/path/to/your/repo'
...
}
Running npm install will copy your local repo to node_modules, and import/require references to 'botframework-webchat' will resolve correctly.
You may also wish to go so far as to publish your repo as its own full-fledged, versioned npm package using npm version and npm publish, either privately or publicly.
Different projects have different build strategies, yours may vary considerably from the above. If you come up with a different integration approach that you feel would have broad application, please consider filing a pull request for this README.
try run npm link /path/to/your/repo and don't forget to remove node_modules from your custom repo

React Navigation npm install ERR fresh Expo Init #react-navigation/native#3.1.4

React Native Expo Users!
I am running into error on expo init with react-navigation (both blank & with tabs):
npm ERR! 404 '#react-navigation/native#3.1.4' is not in the npm registry.
I have been developing with React Native using Expo for several months now and have great success learning and solving errors along the way!
I took a holiday, came back to start a new project, and hit a wall with react-navigation#^3.0.0 - I have tried many solutions and nonwork.
I am using expo and npm to start a new project, both tabs and blank template have the react-navigation npm install issue:
expo init
? Choose a template: expo-template-tabs
? Choose which workflow to use: managed
âś” Please enter a few initial configuration values.
Read more: https://docs.expo.io/versions/latest/workflow/configuration · 100% completed
? Yarn v1.13.0 found. Use Yarn to install dependencies? No
[08:18:30] Extracting project files...
[08:18:31] Customizing project...
[08:18:31] Initialized a git repository.
[08:18:31] Installing dependencies...
npm WARN deprecated kleur#2.0.2: Please upgrade to kleur#3 or migrate to 'ansi-colors' if you prefer the old syntax. Visit <https://github.com/lukeed/kleur/releases/tag/v3.0.0\> for migration path(s).
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/#react-navigation%2fnative - Not Found
npm ERR! 404
npm ERR! 404 '#react-navigation/native#3.1.4' is not in the npm registry.
npm ERR! 404 Your package name is not valid, because
npm ERR! 404 1. name can only contain URL-friendly characters
npm ERR! 404 It was specified as a dependency of 'react-navigation'
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/ddcjosiahl/.npm/_logs/2019-02-08T13_18_47_333Z-debug.log
[08:18:47] Process exited with non-zero code: 1
[08:18:47] Set EXPO_DEBUG=true in your env to view the stack trace.
I am trying options with no luck:
Cleared NPM cache
Tried Yarn
Install expo cli again
npm install --save react-navigation ... react-native, native, etc
npm install --save react-navigation
npm ERR! code E404
npm ERR! 404 Not Found: #react-navigation/native#3.1.4
Note: I have spent all day yesterday trying to get new projects to work. I did manage to get passed it by installing different versions of react-native, and cannot replicate...which then caused a mismatch of versions and app wouldn't load:*
****RNGestureHandlerButton:****
enter image description here
Why is react-navigation#^3.0.0 needing native#3.1.4 and how to solve?
Thanks!
Solved by editing root .npmrc file confirming I had:
registry=https://registry.npmjs.org/
My issue was related to having "_auth=".
Both npm and yarn now work with react-navigation and 404's I was getting.
Thanks #Munishkin & #Atin Singh
I had the same issue while upgrading from expo v31 to v32. Tried all what you have done with no luck. Finally, installing from github with npm install https://github.com/react-navigation/react-navigation-native solved the issue for me. I then installed react-navigation package separately and then all other required modules for my project.
I don't have the clear idea to what your exact problem is. So, I am assuming that you're not able to use React-navigation with expo.
Try using yarn for the whole process instead of npm.
Use yarn when expo asks to make a new project and then to install react-navigation use-
yarn add react-navigation
I used navigation yesterday and it worked perfectly for me.
This is weird, 'cause I just tried and it fetches react-navigation with all dependencies nicely. Actually if you load https://registry.npmjs.org/#react-navigation%2fnative url directly in your browser you should see the corresponding JSON schema. If it gives you 404 you might want to troubleshoot your DNS resolvers.

npm scoped packages and private registry

Our company has set up a private npm registry for our packages. We are trying to set up an angular2 application and all angular packages that are included (from the angular2 tutorial page) are scoped. The issue is while npm is set to our private registry, an npm install gives us this error message:
npm ERR! Linux 4.4.8-boot2docker
npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "install"
npm ERR! node v4.3.0
npm ERR! npm v2.14.12
npm ERR! code E404
npm ERR! 404 no such package available : #angular/core
npm ERR! 404
npm ERR! 404 '#angular/core' 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 It was specified as a dependency of 'search-ui'
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! Please include the following file with any support request:
npm ERR! /tmp/npm-debug.log
If I set it to the default npm registry, angular2 pulls fine but obviously fails when trying to download the private package.
I haven't determined whether this is an overall angular2 thing (some permissions in the package manager) or just all scoped packages (not sure what other scoped packages exist). I have, however, tried all kinds of things to get the full set of packages to install to no avail (such as using a git repo instead of a package version which works in only specific cases which is not acceptable). And this error comes when I try to deploy this into either a Docker container or run locally (mostly concerned about the container case).
Has anyone else ever run into this problem? As well I apologize if this a bit vague so feel free to post a comment if more information is needed.
As NPM says in the documentation, all private packages are scoped, and scopes can be associated to custom registries.
So, if your private package is #myPrivateScope/aPrivatePackage, your problem could be solved by adding the following line to the .npmrc file on the root of your project:
#myPrivateScope:registry=http://my.private.registry.com
Where the url after the equals sign is the address to your private registry.
You can find other ways to do this association and more information about it on https://docs.npmjs.com/misc/scope#associating-a-scope-with-a-registry

Resources