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());

Is there a way to use the screenfull javascript library within the Nextjs framework?

I've been trying to use Dynamic Importing in Nextjs in order to use the screenfull library but it hasn't worked.
import dynamic from "next/dynamic"
import screenfull from 'screenfull';
const Screenfull = dynamic(()=>{return import("screenfull")},{})

You're using dynamic imports incorrectly. The idea is that you can import part of a JS module inside of another piece of JS code, so you don't have to preload or load the entire library. An example might be doing a dynamic import after an async call.
Next has some other great examples of how to use this functionality in your application.

you can create file in #utils folder with below code:
import screenfull from 'screenfull';
export default screenfull
then in your component do something like so:
import dynamic from 'next/dynamic';
const screenful = dynamic(() => import('../#utils/screenfull'))

The first question that comes to mind is what's the error you're getting?
There's no reason you shouldn't be able to import any library you've installed locally!
Did you actually install that package by running npm install screenfull on your terminal?

React Typescript - What's the difference between import #types/react and import react

I am a beginner with react (even tho I did some ReactJs already) and I am today trying to create a simple app using TypeScript (instead of pure Javascript).
However, when running npm start, I found an issue that I understand, but I can't understand why it is an issue.
Let say we have this code (main.tsx):
import * as React from 'react';
Can you explain to me clearly what is the difference with
import * as React from '#types/react';
In my package.json I have "#types/react": "^16.9.2" and I don't have react, so the issue is quite logic that the package couldn't be found. But then what's the difference between these two imports?
Also, I can't even import #types/react, I can only install it
Thanks !

The ones with #types prefix are type declaration packages, more info here.

How to import vue plugins installed with npm

I am sorry upfront for the pretty noobie question, but I don't know how to import plugins installed with npm. I would like to use this plugin for Vue, I have installed it with npm, in my project, and would like to import it to my main app.js file so that I can use it in Vue.
I have tried with using the path to the file in dist folder:
import MaskedInput from 'node-modules/vue-masked-input/dist/MaskedInput.js'
Vue.use(MaskedInput);
But, that obviously didn't work, what is the right way to do this?

Following the link this is actually a component, so what you could do in your component is:
import MaskedInput from 'vue-masked-input'
export default {
components: {
MaskedInput
}
}
What usually helps is by clicking through to the actual github page, and look for either an example in the README or in the actual code. In this case:
https://github.com/niksmr/vue-masked-input/blob/master/src/App.vue
There it shows you how you can use it 'in real life'

How to import an entire npm library into React Native, not just 1 file?

I've been trying to import the sjcl library, which has many files, but I'm only able to import 1 file from it.
From command line:
npm install sjcl --save
react-native link
In a RN JS file:
import sjcl from 'sjcl';
Looks like this doesn't import everything in the sjcl node package, it only imports file sjcl.js from node_modules/sjcl/. I also need sha1.js from node_modules/sjcl/core/sha1.js. I've tried various ways of importing it, but nothing works.
How can I import an entire npm library into a React Native project?

I had the same problem trying to load the ECC module, here is how I worked around it (I installed sjcl using npm). Create a file LocalExports.js in which put this
import sjcl from 'sjcl';
export {default as sjcl} from 'sjcl';
window.sjcl = sjcl;
then import like this in any other file
import {sjcl} from './LocalExports';
import 'sjcl/core/bn';
import 'sjcl/core/ecc';
*edit - I just found this link, which is the official way to do this
https://github.com/bitwiseshiftleft/sjcl/wiki/Getting-Started