How to use create-react-app to install previous react.js versions? - javascript

I want to use one previous version of react (16.0.0) but couldn't find any way to install previous version by using "create react app".
One answer on this topic was posted in stackoverflow that says that I need to install the latest version by using "create react app" then I need to edit package.json file and specify my desired version (react & react-dom) and run npm install command.
But couldn't get my desired version. It's still the current version (17.0.2). Can anyone fix the issue please?

delete .lock file and then try installing packages

Related

Error: Unable to resolve module `#react-native-community/toolbar-android`

Weirdly, the react-native-vector-icons was working well but by using ^ ("^6.6.0") for its version in the package.json file on the new release this error happens.
It's weird because two days ago it works well but now starting of my project ran to this error:
error: Error: Unable to resolve module #react-native-community/toolbar-android from node_modules\react-native-vector-icons\lib\toolbar-android.js: #react-native-community/toolbar-android could not be found within the project.
After reading this issue and trying many solutions I reach to two solutions:
You can delete all node_modules folder and put the version of react-native-vector-icons to "6.6.0" instead of "^6.6.0" and then install all packages again. absolutely, it is better to delete all caches and builds and start everything again. (NOT Recommended)
You can install the #react-native-community/toolbar-android by using the below command:
yarn add #react-native-community/toolbar-android
Or
npm install --save #react-native-community/toolbar-android
Note: Both of these solutions are temporary and soonly this bug will be fixed and there is no need to install the toolbar-android package.
Prev Update
I update the package to the version "^7.0.0" on my project and still, the issue is remaining, so this solution is currently perseverance.
New Update
this issue is fixed on version "^7.1.0" and there is no need to install the #react-native-community/toolbar-android.
Update the library
react-native-vector-icons
to the latest version.
I had this problem too.
In my case, only works when I removed and added the package again with the latest version (7.0.0).
yarn remove react-native-vector-icons
yarn add react-native-vector-icons
Had this EXACT same error. All I had to do was install toolbar-android & voilà!
npm install --save #react-native-community/toolbar-android
Go the path \node_modules\native-base\node_modules\react-native-vector-icons\lib\toolbar-android.js
Replace import ToolbarAndroid from '#react-native-community/toolbar-android' to import {ToolbarAndroid} from './react-native';
I also got the same error after upgrading from version 6 to 7. The issue can be fixed simply by resetting the cache.
Please try npm start -- --reset-cache
do this:
rm -rf node_modules/
rm -rf package.lock.json
npm i
react-native start --reset-cache
from your project directory:)
Just Import it direct from react native it solves my problem
node_modules\react-native-vector-icons\lib\toolbar-android.js
import { ToolbarAndroid } from 'react-native';
Same issue, I solved it:
My environment:
RN: 0.61.5
Node: v12.18.3
OS: Windows 10 Pro
You can install react-native-vector-icons latest version (current 7.0.0).
And do not run auto-link (react-native link react-native-vector-icons)
Finally, running react-native start --reset-cache
Good luck.
First let's understand the standard convention used in package.json for packege's version.
So if you see ~1.0.2 it means to install version 1.0.2 or the latest patch version such as 1.0.4. If you see ^1.0.2 it means to install version 1.0.2 or the latest minor or patch version such as 1.1.0.
Now, coming to the issue.
The issue is caused because you are having a version of react-native-vector-icons which is giving you some trouble.
Check it's version by this command under your project directory:
npm list react-native-vector-icons --version \ is it 6.6.0 ??
No ?? . There is the problem. You need strictly 6.6.0 but you got something else.
Solution:
Delete node_modules directory under your project. Change the version of react-native-vector-icons in package.json to 6.6.0 (basically remove ^ to tell npm to get me exactly what I want. Nothing more, nothing less !)
Then do npm install !
The other alternative is to use expo's vector Icons. Something like this.
import { Ionicons } from "#expo/vector-icons".
Then render your Icon like this;
<Ionicons
name="ios-exit-outline"
color={colors.danger}
size={28}
style={{ marginRight: -15 }}
/>
Edit this file node_modules\react-native-vector-icons\lib\toolbar-android.js
remove 'import ToolbarAndroid from '#react-native-community/toolbar-android';'
edit return null
for this case you have not toolbar-android in your modules file and as friends saying you can fix it by this command
windows users:
npm install --save #react-native-community/toolbar-android
Mac users:
yarn add #react-native-community/toolbar-android
But IN GENERAL: I wanna tell you an experience for you guys whenever you encounter with this kind of errors that start with "Unable to resolve module" .
if you have a look to the error we have a problem with the module that system is telling us.
if you have not that module . you can install it with the commands
Windows users:
npm install --save THE MODULE(attention: THE MODULE IS THE NAME OF PACKAGES OR MODULES that u need to install)
and Mac users:
yarn add THE MODULE(attention: THE MODULE IS THE NAME OF PACKAGES OR MODULES that u need to install)
for example lets look at this error:
error Unable to resolve module `#react-native-community/slider` from `App.js`: #react-native-community/slider could not be found within the project.
as you can see error is telling us this module could not be found within our project.
so we need install it with this command:
for windows programmers:
npm install --save #react-native-community/slider
and for mac programmers:
yarn add #react-native-community/slider
that's all.
I hope you understand me clearly and do not have problem with unable to resolve module errors and my command be useful for you.
best regards
Mehrad Karampour (MEH)

How do I exclude a package from react native link?

I currently add a module using : npm i --save <package_name>
and once done, I use : react-native link instead of react-native link <package_name>, there by linking all possible react native libraries present in my package.json .
The problem arrives when one of the packages I am about to use requires me to NOT USE react-native link
package : react-community/react-native-maps; https://github.com/react-community/react-native-maps
Note mentioned in the library :
IMPORTANT!!
!! DO NOT USE !! react-native link
Link to the note
I want this so that whoever working on my project after me doesn't make the mistake of doing react-native link Please help.
For react-native-maps you shouldn't use react-native link as per their latest documentation. And there are no much workaround for this.
The temporary fix can be this:
After 'npm install', goto node_modules folder and open the following js file.
RootProject/node_modules/react-native/local-cli/link
In link.js file, linkDependency() method add the following code:
if (dependency.name === 'react-native-maps'){
log.info(linking loop break as the library is'${dependency.name}');
return
}
Now run, 'react-native link'. The react-native link command will link all libraries but not the maps.
PS: Actually, we shouldn't touch any of node_modules package, but for the maps library we don't have much options to solve the issue.
Any other answers are too welcome.

What is the step-by-step procedure for installing any npm module with Aurelia CLI?

I wanted to install jquery and found instructions here:
http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/contact-manager-tutorial/4
I then wanted to install "moment.js" and found instructions here ( I am not using typescript) :
How to import Moment-Timezone with Aurelia/Typescript
To install both of these with the Aurelia CLI the procedure is to install the respective npm module and then to manually modify aurelia.json in some way so the app recognizes it.
In the case of moments the instructions then say to place an import at the top of app.js , but this is not the case for JQuery.
First off , is there any way the changes to aurelia.json can be automated ( like a regular node.js package.json) so I don't need to manually do it and second, how do I know what modifications I am expected to make to aurelia.json ( or app.js or any other file) for the module I want to install?
With a basic node.js app its pretty simple , just npm install. With Aurelia its much more confusing.
Edit: There is also JSPM which I've read is used for front end libraries like the ones I mentioned above. However, the links with instructions for installation that I posted are not using JSPM.
Edit
I found some of the answers here:
http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/the-aurelia-cli/6
The CLI is still under development. I think the automatic adding of a package might some day be included in the CLI itself, for example with an install command.
The extra registration is required to register the package correctly for usage with RequireJS (http://requirejs.org/). And if the plugin exists of more than just 1 file, this registration is a bit more complex then just adding the name of the plugin.
There is an experimental CLI task here https://github.com/martonsagi/aurelia-cli-pacman that will do the automation for you.
Which can be installed by running:
npm install aurelia-cli-pacman -D
The above will install the package manager and register/ include itself in the tasks in your current project (be sure to run it with install, because npm won't run the post install script if you run it the i shorthand). Next, you can run the following command to install an extension:
npm i aurelia-interactjs -S
au pacman i aurelia-interactjs
The only downside for many might be that currently there aren't that many registry entries, but I think the author of the package would be very happy if you help him out by creating a pull to extend the registry. Would take you some time to figure out what would be the correct install/ import settings, but you will help out someone else and make them happy when they hit the same problem you experience :-).
JSPM has a same sort of issue around this, only is more matured/ the registry is bigger and/ or authors added specific information for JSPM installations to their package.json. For example: To install the above plugin with JSPM it will use the following highlighted section https://github.com/eriklieben/aurelia-interactjs/blob/master/package.json#L72,L86. The same is currently not possible with aurelia-cli, because the installation is done by NPM instead of through JSPM that redirects it to NPM.
If the author of the plugin didn't specify the JSPM section in the package.json, you would most likely and up with the same sort of issues. JSPM has a similar registry (https://github.com/jspm/registry/tree/master/package-overrides/npm) as aurelia-cli-pacman.

"Firebase is not a constructor" -- need to downgrade Firebase, how to do it?

I am currently learning React.js from this course on Udemy. I've reached Lecture 27 and I'm at a standstill. I keep getting the error "Firebase is not a constructor." Just from looking at other people's issues, I've figured out that I need to downgrade Firebase down to V. 2. The only question is, how do I go about doing this?
I went to my app.jsx file and changed Firebase down to "^2.4.2". I also reloaded my entire app. I still get the same error, "Firebase is not a constructor".
Can anyone give me any pointers here? I'd really like to get this app to work. What else do I need to change?
Uninstall the firebase by npm uninstall firebase then npm install --save firebase#2.3.2or #2.2.7 etc, hope i helped (Y)
Im also starting to learn Firebase. Saw this thread relative to your question. It
stated that Firebase team updated their web SDK.
I'm taking the same course and had the same problem. The command npm install --save firebase which Stephen (the guy teaching the course) referred to now automatically installs version 3.x of Firebase.
You can just go into the working directory of your project and specify the version of firebase you want to install. He was using v2.3.2 at the time he created the course, so just run the command npm install --save firebase#2.3.2 and that's what fixed it for me. It will overwrite the v3.x you had previously installed in your project.
I was learning from the Udemy video and had the same issue as yours. I changed Firebase down to ^2.4.2 deleted my node_modules and run npm install and it worked. Don't forget to delete your node_modules and npm install it again.

Using specific version of npm shrinkwrap

I am deploying my node.js app to Appfog but since their install script cannot parse npm-shrinkwrap.json the whole deploy process fails.
An example dependency in shrinkwrap.json today looks like this
"async": {
"version": "0.2.10",
"from": "async#0.2.10", <--- This line breaks install script at appfog
"resolved": "https://registry.npmjs.org/async/-/async-0.2.10.tgz"
},
I went through the whole shrinkwrap file and removed the "from" part from each dependency declaration and i managed to upload my application, and it works.
So my question is , how do i use an older version of npm shrinkwrap so i can get the version of shrinkwrap.json that i need?
Appfog support told me i need to use version 1.1.21 but i have not succeeded in installing it.
Please ask if some info is missing.
if you just want to use an older version of npm, you can install it via npm (i know that sounds strange, but its possible)
npm install npm#1.1.21
edit: so you try to install a version of npm which does not exist. just run
npm view npm
and take a look at the property version, to see which versions you could install via npm.
you will see that 1.1.21 does not exist in the registry, which means that you should try to install it via github (see answer by #sakai).
but then you see the next problem. you are using node#0.10.26, and npm 1.1.21 is probably not compatible with node#0.10.x.
so i for myself see basically 2 possible solutions:
Solution 1:
use n (or maybe nvm for switching node-versions back and forth. you could try to install a node#0.8.x version and try to install npm#1.1.21 there, and when done with shrinkwrapping switch back to your current node version.
Solution 2
you could setup some kind of grunt/gulp-task (i hope you use one of them) to run grunt/gulp shrinkwrap, which generates your shrinkwrap.json (via npm shrinkwrap) and when done cleans up your shrinkwrap.json
Try this:
npm install https://github.com/npm/npm/archive/v1.1.21.tar.gz
node ./node_modules/npm/bin/npm-cli.js shrinkwrap
Another—possibly simpler—solution is to just include node_modules into your repo.
Related: Should I check in node_modules to git when creating a node.js app on Heroku?

Categories