Develop Reference

Javascript not importing npm package installed from git

I have a package in my dependencies in package.json of npm. I have included the package from github in following way-
"dependencies": {
"#aeternity/aepp-components": "git+https://git#github.com/aeternity/aepp-components.git#feature/v3",`
}
When I run npm install, everything installs, and I can see the module in node_modules folder. However when I try to import, and run, npm gives an error saying
dependancy not found
To install it, you can run: npm install --save aepp-components
What am i doing wrong here?
Edit: Snippet I used to import:
import AeButton from 'aepp-components'

You need to do
import { AeButton } from '#aeternity/aepp-components'
see that how AeButton is imported using destructuring. And #aeternity specifies the default root source for the files and helps you map your file imports to it. Use that and it will work. You can also have a look at here in the doc

When you have #something/package-name, this is the name of the entire package, you have to import using this full name. Now, why?
This is called a scoped package, and #something is the scope of that package. You can check more about scoped packages here.
Some packages exports items/components/whatever inside an object, which requires you to use the destructuring method. You can only be sure how it is imported if you look at the docs, otherwise you would need to deep into the codebase.

How to include 3rd party library that uses older import approach to Angular4.x?

What is the proper workflow to include the library to angular 4.0 and use it inside a component?
My steps:
yarn add mathjs
Then there should be a way to injects js libraries in one of the build lifecycles so the angular4 component can use it. JHipster utilizes Webpack and Yarn.
Then I tried to add to Component (docs):
import { mathjs } from "./mathjs";
and
var math = require('mathjs');
Those were not working. What am I missing?
UPDATE:
It seems like mathjs uses older approach suggesting var math = require('mathjs'). Maybe it is similar to JQuery question in some way...
UPDATE2

This is a great question and I'm glad you ask because I wish I had what I'm about to write the first time I encountered this little problem. This is a typescript/javascript and webpack issue before it is an angular issue. I definitely am planning a writeup on my blog soon as possible.
Your Scenario:
You run
npm install mathjs
Now you try to use math.js from a component:
Find math.js dist js file (node_modules/mathjs/dist/math.js) and reference like this
import {mathjs} from "../../node_modules/mathjs/dist/math";
But you get error message saying "set --allowJS". You do that like this:
Set --allowJS in config (tsconfig.json)
{ "compilerOptions": {
"allowJs": true, ...
Now you get:
ERROR in ../node_modules/mathjs/dist/math.js (12209,13): Unreachable
code detected.
Looking in the math.js source, you see that it is an old school module but there is no root wrapper function (one function to bring them all and in the darkness bind them..) (more on that later).
Solution: install a typings file for the target lib (#types/mathjs)
First, check to see if you can get #typings files for your module here
https://microsoft.github.io/TypeSearch/
Grab mathjs typings file from npm (https://www.npmjs.com/package/#types/mathjs) and Run npm install to add the typings .d.ts files to the target lib's node_modules directory
npm install --save #types/mathjs
Add your type ref correctly
import * as mjs from "mathjs"
Use it like this:
console.log("e was: " + mjs.e);
I have the complete solution for the math.js lib on my github here
https://github.com/res63661/importOldJSDemoWithTypings/
More:
For examples look no further than your own angular project. CLI creates node_modules folder each time you run npm install after creating a new project with ng new . Dig down into here and note the d.ts files for many of the .js files.
When messing with typings or defining your own (.d.ts files) be sure to restart your server between builds as the typings don't seem to update currently on the fly
Further reading:
http://www.typescriptlang.org/docs/handbook/declaration-files/consumption.html
https://angular.io/guide/typescript-configuration#typescript-typings
https://microsoft.github.io/TypeSearch/
Lastly:
If you are in a pinch and this is not working for you, I did have success creating a custom wrapper for a different (much smaller) module by wrapping it in a master export type
export var moduleNamer = (function(){
//module implementation
}());
then dumping the .js file local to my component and then referencing it as follows:
//reference like this from your component:
import {moduleNamer} from "./source"; //from source.js
--rich

I did this way and it worked for angular9.
First install npm package mathjs.
npm install mathjs
Then import in your component or directive.
import { round } from 'mathjs'
You may test with this.
console.log(round(math.pi, 3) )

Try to include the script into index.html:
<script src="./assets/math.js" type="text/javascript"></script>
Then add this into your component file:
declare const math;
You can then use math in your component:
ngOnInit(): void {
console.log(math.sqrt(-4););
}

How to set babel on create-react-app Project?

I'm doing React.js project that created by create-react-app. I use axios to connect with server, so I have to use babel-polyfill to support IE11. create-react-app doesn't have webpack.config.js file to modify 'entry', so I can't set babel.
Also I tried to insert import 'babel-polyfill'; and require('babel-polyfill'); on javascript file that using axios. But it didn't work.
How can I solve this problem?

create-react-app includes only a few polyfills to reduce the code size (ES6 polyfills are large).
If you want to add babel-polyfill without modifying webpack configs, you need to import it at the entry-point to your application, before anything else is called
// on top of your index.js
import 'babel-polyfill'

How does import statement look for a module from installed node modules in reactJS?

I just want to know one thing,
Consider i have defined a dependency in package.json file like "some-library": "1.0.0"
and installed it using npm install. which will include all dependencies to node_modules folder.
then am importing a Component from that dependency using
import SomeLibrary from 'some-library;
when we do this where this import statement start looking for the component which we are importing ?
can some one explain in a better way. i have googled alot but didn't find any relevant answer. Thanks in advance.

At it's core, the import statement uses the same module resolution method as require().
So for installed modules it goes like this: By calling require(X), it gets a list of all the 'node_modules' directories present in the parent directories. Then, it tries to load the X module from each of those directories (either as a single file, or a directory.)
https://nodejs.org/api/modules.html#modules_all_together

Babel errors when using npm package in React Native application

I am building a React Native application.
I have tried using the following as an npm package in my application: https://github.com/MagicTheGathering/mtg-sdk-javascript/
I try to import the package into one of my files using: import { card } from 'mtgsdk'; and many other variations of import statements but none have worked.
I get the error:
TransformError: /myproject/node_modules/mtgsdk/lib/index.js: Couldn't find preset "es2015" relative to directory /myproject/node_modules_mtgsdk
What is the right way to import this package into my project? What knowledge is it that I lack about imports in javascript?

Your babel doesn't know what exactly plugins you're going to use.
So you should add .babelrc file to the root of your project with next configuration:
{
presets: ["es2015"]
}
Oh, and dont forget about
npm install babel-preset-es2015 --save-dev
I hope it'll help