issue while adding react-dropzone to react-16.13.1 project - javascript

I want to add https://www.npmjs.com/package/react-dropzone to a React project written in TypeScript. And I am using the Yarn package manager.
So I hit the command yarn add #types/react-dropzone, which actually installs another deprecated package https://www.npmjs.com/package/#types/react-dropzone.
Currently in my package.json ->
"#types/react-dropzone": "^5.1.0"
I found something is wrong when I saw it working in Firefox but not in Chrome.
How can I install the actual package(https://www.npmjs.com/package/react-dropzone)?

As npm site says, you dont need #types/react-dropzone because the original package now contains everything needed.

Related

Trouble installing with d3-context-menu with bower using VS code

I am trying to install the d3-context-menu for my vue js and d3.js web app. For reference here is the github here I don't have bower installed so I installed it using
npm install -g bower
Then I ran the command
bower install d3-context-menu
However I get the error message
bower ESUDO Cannot be run with sudo
Additional error details:
Since bower is a user command, there is no need to execute it with superuser permissions.
If you're having permission errors when using bower without sudo, please spend a few minutes learning more about how your system should work and make any necessary repairs.
http://www.joyent.com/blog/installing-node-and-npm
https://gist.github.com/isaacs/579814
You can however run a command with sudo using "--allow-root" option
I looked this up online and I cannot find a fix. Would this be because of me using d3v6 or that the context menu github is outdated?
Or is their a better alternative to create a context menu using d3.js?
I am very new to this so any help is greatly appreciated. Thank you
You can use this package in two other ways.
Some examples are described in the README file, here and here, where the author uses the package including the script tag directly in HTML.
<link rel="stylesheet" href="d3-context-menu.css" />
<script src="d3-context-menu.js"></script>
A second way is to install the package using npm. This package is published in the npm registry: https://www.npmjs.com/package/d3-context-menu.
So, theoretically, all you need is:
npm i d3-context-menu
I haven't tested the second way, but the canonical form can be tested directly in the online environment where the examples are, the Plunker platform and it works.

No matching version found for #babel/plugin-transform-object-super#^7.8.3. with Vue.js

When I am trying to create a vue project using the vue-cli it is giving me the following error message.
ETARGET
No matching version found for #babel/plugin-transform-object-super#^7.8.3.
In most cases you or one of your dependencies are requesting a package version that doesn't exist.
It was specified as a dependency of '#babel/preset-env'
A complete log of this run can be found in: /home/avinash/.npm/_logs/2020-01-13T23_53_01_890Z-debug.log
my node version is v12.14.1
npm version is v6.13.4
I was facing this issue a while ago and this is what worked for me:
Are you perhaps using your company laptop where your npm registry is not set by default to: https://registry.npmjs.org/ ?
If yes, you may go to your .npmrc file, comment out your current registry, and set registry = https://registry.npmjs.org/
Run your vue-cli command, and then restore the .npmrc to original settings :)
Not sure if you have a similar issue but this is what worked for me.

Building new release of ngx-charts

I'm attempting to add a personally desired feature for ngx-charts. I got it to work using the standard src directory but, I wanted to build a release version potentially.
Here are the steps to reproduce the issue:
npm i https://github.com/swimlane/ngx-charts/tarball/master --save (this grabs the entire project instead of just the release)
Go into your node_modules/#swimlane/ngx-charts folder and delete the release directory
Rebuild the directory by running npm i && npm run package
Notice how index.d.ts is unable to find any modules even though they're there.
I have noticed that the /common/base-chart.component.d.ts file is never created for some reason causing this problem. But, I cannot for the life of my figure out why. I've tried multiple webpack versions 2-4 but, every attempt results in the same thing.
I believe I am doing something wrong which is why I did not open an issue. I would appreciate any insight into this problem. Thank you for reading!
I would recommend cloning the repository locally rather than installing it from npm:
git clone git#github.com:swimlane/ngx-charts.git
Then install dependencies:
cd ngx-charts
npm install
After that make your changes to the src (you can run the demo app to test while developing with "npm run start")
Then to package:
npm run package
This will build the project and update the release folder

IntelliJ Idea React-native not working properly

I have recently installed intellij idea on my PC and started react-native application. I installed all libraries required for react native and react js. Also installed node js module and all plugins for this ide. Still i am getting error below like this in import statement.
When i move to that line that shows me error like.
-> Install TypeScript definition for better type information.
But my typeScript definition are also as per required.
Also I have changed my JS to ReactJSX.
I have attached image over here for reference.
You should try to create a new project using following commands
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
If you still facing error then try to use vscode editor and select react language. If you still face issue let me know

Customizing bower packages

I am using several open source js libraries in my project. I recently moved to use bower for all the front-end dependencies. I liked how I can just provide a github url instead of a proper package name.
I have customized few libraries. So to manage them using bower, I created a single private repository called myLibs in an organization account on Github.
I am creating branches for each customized library. For example, customized angular-bootstrap library will be in angular-bootstrap branch and customized angular-material library will be in angular-material branch.
Now I am creating tags for each release in each library. The naming convention that I am using is branch-name/x.y.z For example, I have angular-bootstrap/1.0.0 and angular-material/1.1.1 tags.
This was good till I had to install these libraries using bower. To install the custom libraries I called the following command (It's a dummy url, don't try it)
bower install --save-exact library-patch=https://github.com/test_org/myLibs.git#branch-name/1.0.0
The library gets installed and I can see it in bower_components too, but in my bower.json the dependency entry turns up like this -
"library-patch":"https://github.com/test_org/myLibs.git#undefined"
This is not what I wanted. I wanted to have the proper tag name to be saved. I don't want to manually make changes in the bower.json file every time I want to add a custom library.
My first thought was that the naming convention of the tags will be a problem. So I changed it to branch-name-x.y.z from branch-name/x.y.z which allowed me to have the exact version in the bower.json to install it properly, but when trying to install the libraries using the terminal, instead of using bower.json, I am getting the#undefined` tag in the end of the dependencies.
Here's the log I am getting while installing the library from terminal.
bower install --save-exact library-patch=https://github.com/test_org/myLibs.git#branch-name-1.0.0
bower not-cached https://github.com/test_org/myLibs.git#branch-name-1.0.0
bower resolve https://github.com/test_org/myLibs.git#branch-name-1.0.0
bower download https://github.com/test_org/myLibs/archive/branch-name-1.0.0.tar.gz
bower retry Download of https://github.com/test_org/myLibs/archive/branch-name-1.0.0.tar.gz failed with EHTTP, trying with git..
bower checkout library-patch#branch-name-1.0.0
bower resolved https://github.com/test_org/myLibs.git#branch-name-1.0.0
bower install library-patch#branch-name-1.0.0
library-patch#branch-name-1.0.0 bower_components/library-patch
└── angular#1.4.8
Why am I getting undefined in the release/tag name? Am I making any mistake while naming the tags? Is there any way I can install those custom libs from terminal and save the exact tag in bower.json?
The solution for the problem was to use --save instead of --save-exact. I have no explanation for the same right now, but I'll update the answer as soon as I can.
As far as I can tell, it's because the package was getting installed from github directly, instead of from bower registry.

Categories

Resources