We Keep Coding

How to import and use npm package in Ember.js?

I am new to EmberJS and I want to import and use the crypto-js in my EmberJS app, I used ember install crypto-js to install the package, then add those lines in ember-cli-build.js to add them to ember build to use SHA256 function:
app.import('node_modules/crypto-js/core.js');
app.import('node_modules/crypto-js/crypto-js.js');
app.import('node_modules/crypto-js/sha256.js');
And I can see that in browser, assets/node_modules has the crypto-js folder with above 3 files. However I still got Could not import module 'crypto-js' error. How to solve it? Thanks!

There is no need for app.import.
As long as you have ember-auto-import installed, or you are using embroider (which defers to webpack), you can follow the documentation: https://www.npmjs.com/package/crypto-js
import sha256 from 'crypto-js/sha256';
import hmacSHA512 from 'crypto-js/hmac-sha512';
import Base64 from 'crypto-js/enc-base64';

Thanks for all the answers. It is an old project and after I installed ember-auto-import and webpack i got many build errors. I dont want to waste time on fixing them, but finally i got it worked:
app.import('node_modules/crypto-js/crypto-js.js',{
using:[
{transformation: 'amd', as: 'CryptoJS'}
]
});
Then I can import it and use in other .js files, like this:
import CryptoJS from 'CryptoJS';

Create a file called crypto-js.js in the shims folder and add this code
import 'crypto-js/core';
import 'crypto-js/sha256';
export default window.CryptoJS;
In your ember-cli-build.js file, add this linne:
app.import('vendor/shims/crypto-js.js', { using: [{ transformation: 'cjs', as: 'crypto-js' }] });
in your component, controller or model, you can import the library and use the SHA256 function like this
import crypto from 'crypto-js';
const hash = crypto.SHA256("Message to hash");
console.log(hash.toString());

Import a single export seems to import the whole js file. How can I import just the exported object?

Exporting from one file index.js like this: export const categoriesObj = new Object(); and trying to import from another index.js file like this: import { categoriesObj } from "../app/index.js";, but I get an Uncaught ReferenceError: (variable from the other file) is not defined because instead of just importing the categoriesObj, I think is importing the whole file.
Currently I'm using webpack and babel. Both index.js files have separate bundle files. The folder structure looks like this:
dist
bundle1.js
bundle2.js
src
app
index.js
history
index.js
What I have tried is:
Add "type": "module" in package.json file.
Added babel-loader. Thought it was some problem with ES6 modules.
renamed ../app/index.js to index.mjs.
What I'm trying to do is to import an object which is generated in another file so I can use it on this other file.
Hope this makes sense. I've been stuck in this for days. Thanks for reading!

How does webpack pick a relative path inside node_modules ? does it reference package.json at all?

When i do npm install react-slick, i get the following in my node_modules folder:
Now in my react application in a src/index.js file, when i do the following:
import Slider from "react-slick";
How does webpack know where to pick slider from ? will it at all look for some clue or definition inside node_modules/react-slick/package.json at all ?
Edit :- so here is the package.json file for webpack, when i import Slider from 'react-slick' , does it resolve to dist or lib ? and which file does it pick then and why ?

Well, the simple walkthrough of it will be as below:
Simple Walkthrough
If you carefully look at the node_modules/react-slick/package.json there is a property named main. Something like this:
{
"name": "react-slick",
"main": "index.js"
}
It will tell the Webpack which file is the entry file of the whole package (It's usually referred to index.js). All the necessary exports for the package lies in this file, so Webpack will only look for those exports and will import what you looking for. In this particular case, there should be a default export for the Slider that you using right now. So the index.js is probably something like this:
// index.js
var slider = require('./lib/slider'); // Usually all the main modules are lies under lib folder.
// other imports ...
module.exports = slider;
Difference between lib and dist
Usually, the dist folder is for shipping a UMD that a user can use if they aren't using package management. The lib folder is what package.json, main property points to, and users that install your package using npm will consume that directly. The only use of the lib as opposed to src is to transform your source using babel and Webpack to be more generally compatible since most build processes don't run babel transforms on packages in node_modules.

Webpack uses aliases to target node_modules using a shorthand.
Example #1:
import 'xyz'
/abc/node_modules/xyz/index.js
Example #2:
import 'xyz/file.js'
/abc/node_modules/xyz/file.js
Once it targets the correct folder in node_modules, it follows the rules written in the package itself (manifest, package.json)
You can also define your own aliases as such:
webpack.config.js
const path = require('path');
module.exports = {
//...
resolve: {
alias: {
xyz$: path.resolve(__dirname, 'path/to/file.js')
}
}
};
And then can be used as import xyz from $xyz

How to read app.json programmatically from node module

I'm writing a module that I'll be using npm to install in the future. I need to be able to read app.json to get configuration information. I would like to reference app.json using an absolute path, but:
import app from 'AppName/app.json'
doesn't work because my module won't know the name of the app in the future. How can I accomplish this? Thanks in advance.

You should reference it using a relative path.
Using import won't work, unless you are using ES6, as you are not exporting anything in the app.json so you will have to use require instead. If the file that is requiring it is located in node_modules/your_module_name/ something like this should find the app.json
const app = require('../../app.json')
or if using ES6
import app from '../../app.json'

You can reference using a relative path.
For example:
import app from '../app.json'
or
import app from './app.json'

ES6 imports using module names without path

I would like to be able to import my modules using just name without path.
For example, say I want to use:
import ViewportChecker from 'viewport-checker';
instead of
import ViewportChecker from '../ViewportChecker';
But I want to keep the file where it is and not create a new npm module of it. Would it be possible to define it as module for exmaple in package.json?

You can use webpack's alias feature : https://webpack.js.org/configuration/resolve/#resolve-alias

You can put a default file with naming convention of index.js which contains all the exports.
like:
-App
--home
---index.js // <--it will hold all the exports from otherClass.js and anotherClass.js
---otherClass.js
---anotherClass.js
Now you have to import just folder name and it will automatically search for index.js file to get the particular exported item.
It might look like this:
import Home from './home';