Node JS Module Not Working . Module Not Found - reactjs

I Am Trying To Use An npmjs module named systeminformation in the documentation it is given to use it as it is down below but it gives me an error module not found
the code from documentation:
const si = require('systeminformation');
si.cpu()
.then(data => console.log(data))
.catch(error => console.error(error));
My Code :
const si = require('systeminformation');
comp=()=>{
si.cpu()
.then(data => console.log(data))
.catch(error => console.error(error));
}
please help me with this I tried reinstalling the node module npm i systeminformation
The NpmJS Module -- https://www.npmjs.com/package/systeminformation

Install crypto:
Npm install -i crypto
This will install missing module to your local node modules

Tree remarks to your question:
As PDHide suggested to install crypto, should not really solve your problem. This is not a dependency of systeminformation, nor is it used anywhere in the code.
can you confirm, that installing systeminformation with npm I systeminformation does not show any error during the installation? This should be strange if there is an error.
be sure to use this package as a backend module within node.js. This module is not intended to be used in front end code (see documentation https://systeminformation.io/). Due to security reasons there is now way to get detailed system information from within a browser. I am pretty sure, that your error message comes while executing this code in a browser or am I wrong?
tl;dr: systeminformation package is supposed to be used as a node.js backend/server-side library and will definitely not work within a browser.
Hope that makes it clear.

Related

"Module not found" when adding MDX to NextJs project

I have a project that is working properly (as far as I can see), now I want to add a blog using MDX and have gone through the installation process but when I start the localhost I get an error message that says " Module not found".
Everything works perfectly when I remove the config for the MDX in next.config.js, o i am not sure what is going on here. Can anybody help? Thanks
Error: Cannot find module './undefined.json'
at C:\Users\XXXX\OneDrive\Desktop\Development\PROJECT_NAME\.next\server\pages\404.js:34:12
at async getStaticProps (webpack-internal:///./pages/404.js:96:22)
at async Object.renderToHTML (C:\Users\XXXX\OneDrive\Desktop\Development\PROJECT_NAME\node_modules\next\dist\server\render.js:465:20)
at async doRender (C:\Users\XXXX\OneDrive\Desktop\Development\PROJECT_NAME\node_modules\next\dist\server\base-server.js:879:38)
at async cacheEntry.responseCache.get.isManualRevalidate.isManualRevalidate (C:\Users\XXXX\OneDrive\Desktop\Development\PROJECT_NAME\node_modules\next\dist\server\base-server.js:979:28)
at async C:\Users\XXXX\OneDrive\Desktop\Development\PROJECT_NAME\node_modules\next\dist\server\response-cache.js:64:36 {
code: 'MODULE_NOT_FOUND'
}
PS C:\Users\XXXX\OneDrive\Desktop\Development\PROJECT_NAME>

Error: "Unable to resolve module `./InitialWindowSafeAreaInsets`

I'm developing a project in React Native. I've finished the coding and after this, I have to install some dependencies such as react-native-screens, react-native-vector-icons, etc.
It appears to me: "Unable to resolve module ./InitialWindowSafeAreaInsets from node_modules\\react-native-safe-area-context\\src\\index.tsx. Below there is what appear in the Metro Bundler of my localhost:
LOGGED IN AS
INFO
16:02
Starting Metro Bundler on port 19001.
INFO
16:02
Tunnel ready.
ERROR
16:03
Unable to resolve "./InitialWindowSafeAreaInsets" from "node_modules\react-native-safe-area-context\src\index.tsx"
ERROR
16:03
Building JavaScript bundle: error
I know that I could simply install react-native-safe-area-context, but due the fact I haven't found any issue about this neither here nor in GitHub, I've preferred to be conservative and share with you the issue, instead of install the package and it becomes a snowball.
Maybe the solution is really install react-native-safe-area-context package, but I prefer to share before, because maybe anyone is being the same issue and could help with further information.
Later, I installed the react-native-safe-area-context package, and it remains the same error. How could I solve this issue?
This problem occurs with the following combinations:
expo#3.13.1
react-native-safe-area-context#0.6.0
Expo asks for react-native-safe-area-context#0.6.0, but please ignore it.
Actually, you need #0.7.3.
(Expo send 'InitialWindowSafeAreaInsets', but #0.6.0 cannot receive it. #0.6.0 can only receive 'InitialSafeAreaInsets'. Who Moved My 'Window'?)
so, please try this way.
yarn add react-native-safe-area-context#0.7.3
For some people met the issue must to change resolver in metro config file to have
'ts' extension ...
module.exports = {
resolver: {
/* resolver options */
sourceExts: ['jsx','js','tsx', 'ts'] //add here
},
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
};

Can I use amqplib in the browser?

I am an AMQP/RabbitMQ newbie, and relative Node.js newbie. Can I use the amqplib NPM library client-side?
I'd like to be able to push messages direct to RabbitMQ from my Angular app. I have used Browserify to modularise a lot of my client-side code. I am now starting to experiment with RabbitMQ and would like to push messages direct from the browser to cloud-based queues over the amqp protocol.
I have installed amqplib via NPM and written/pasted the following module:
var amqp = require('amqplib/callback_api');
var push = function(){
console.log('This is the CORE queue.pusher push function being triggered');
var connString = 'amqp://username:pwd#blabla.rmq.cloudamqp.com/username';
amqp.connect(connString, function(err, conn) {
if (err){
console.log("core queue.pusher push error %s", err);
}else {
conn.createChannel(function (err, ch) {
var q = 'FatController';
var msg = 'Hello World!';
ch.assertQueue(q, {durable: false});
// Note: on Node 6 Buffer.from(msg) should be used
ch.sendToQueue(q, new Buffer(msg));
console.log(" [x] Sent %s", msg);
});
setTimeout(function () {
conn.close();
process.exit(0)
}, 500);
}
});
};
module.exports = {push:push};
When I try running this I get the following error:
bundle.js:32074 TypeError: QS.unescape is not a function
at openFrames (bundle.js:9551)
at connect (bundle.js:9629)
at Object.connect (bundle.js:7959)
at Object.push (bundle.js:7652)
at controller.pushQueueEntry (bundle.js:7805)
at fn (eval at compile (bundle.js:32907), <anonymous>:4:184)
at callback (bundle.js:44543)
at Scope.$eval (bundle.js:35710)
at Scope.$apply (bundle.js:35810)
at HTMLInputElement.<anonymous> (bundle.js:44548)
at defaultHandlerWrapper (bundle.js:21283)
at HTMLInputElement.eventHandler (bundle.js:21271)
Am I barking up the wrong tree here? Will amqplib only run in a 'proper' node environment?
As a secondary question, what is the best way to determine whether a particular NPM package will run in the browser environment? It seems to me that some NPM packages will run in the browser, and some won't - what is the best way to be confident about this?
Will amqplib only run in a 'proper' node environment?
Yes, I'm afraid so.
As a secondary question, what is the best way to determine whether a particular NPM package will run in the browser environment? It seems to me that some NPM packages will run in the browser, and some won't - what is the best way to be confident about this?
It's not always clear if a package can run in a browser or not, so you have to apply some heuristics:
Does a package require setting up "plain" TCP connections (meaning connections that aren't used for the usual web-based protocols like HTTP(S) or WebSockets)? If so, it's probably a server-side package.
Does a package require reading arbitrary files? If so, again, probably server-side.
Does a package provide, or depend on, native Node.js addons? If so, it's a server-side package.
As an extension of these: does it use fs, net, cluster, http, https, tls, dns, os, tty or dgram? Most likely server-side.
Packages that can be used client-side typically say so in their documentation, so if it isn't specifically mentioned, there's a good chance that it's only server-side.
I hadn't used Browserify in a while, so I had to check, but it looks like it doesn't warn you if the code you pass it depends on server-side modules. It will create a bundle that at some point will just fail with an error, much like what you're running in to.
Webpack, another commonly used bundler, has a concept of deployment targets. By default, it will target browsers, and when you try to bundle a project that depends on server-side modules like the ones I mentioned above, you will get an error:
$ webpack -p bundle.js
Hash: 767ace79fc17abef93e8
Version: webpack 2.6.1
Time: 3983ms
Asset Size Chunks Chunk Names
bundle.js 308 kB 0 [emitted] [big] main
[0] <SNIP>
ERROR in ./~/amqplib/lib/connect.js
Module not found: Error: Can't resolve 'net' in '/private/tmp/node_modules/amqplib/lib'
# ./~/amqplib/lib/connect.js 152:11-25
# ./~/amqplib/channel_api.js
# ./test.js
ERROR in ./~/amqplib/lib/connect.js
Module not found: Error: Can't resolve 'tls' in '/private/tmp/node_modules/amqplib/lib'
# ./~/amqplib/lib/connect.js 155:11-25
# ./~/amqplib/channel_api.js
# ./test.js
As you can see, my test file uses amqplib, which depends on net and tls, which are both not available in the browser environment. So if you're unsure about whether or not a package can be used in a browser, Webpack provides you with a safety net.

Angular 2, Webpack 2, async routes: Cannot find module

I've been working with my repo for a while, it's a clone of the angular2-seed repo. It includes webpack 2 (I think it's still beta) and async routes.
I did some tests and reverted to a previous state, but after installing packages with npm it fails loading async components with the following message in the browser:
browser_adapter.js:85 EXCEPTION: Error: Uncaught (in promise): Error: Cannot find module './+tickets'.
The plus sign is not a typo, the folder is actually called "+tickets" and it contains an index.ts file. It always worked, and now for some reason it doesn't.
I tried everything, but the error is so clueless that I don't know where to watch. Maybe the webpack-dev-server is not serving the files correctly..?
An alternative plan would be to start everything from scratch and then move the modules, but I'm really interested to where the problem is for future implementations.
Thanks a lot for the help
Hi I've created Angular2 lazy loading demo using RC 6.
Please checkout https://github.com/Quramy/ng2-lazy-load-demo .

Requiring unknown module "crypto" in react-native environment

I'm writing a simple Twitter app using react-native. Using twit module to get twitter feeds and stream. Below is the code, it works fine node. However, when included into my react-native app, seeing error "Requiring unknown module "crypto"". Dependency seems to be myapp->twit->oauth->crypto (thats part of node v0.12.2). Any suggestions to get this working inside react-native environment?
var Twit = require('twit')
var T = new Twit({
consumer_key:''
, consumer_secret:''
, access_token:''
, access_token_secret:''
})
var filtered_tweets=[];
var error;
var isSuccess=false;
function getTweets(searchString){
T.get('search/tweets',{q:searchString, count:100}, getResponse);
}
function getResponse(err,data,response){
if(err) {
handleGetErr(err);
}
handleGetData(data.statuses);
}
function handleGetErr(err){
enter code here
error = err;
}
function handleGetData(data){
data.map(function(tweet){
var twit={
twit:tweet.id,
created_at:tweet.created_at,
text:tweet.text,
retweet_count:tweet.retweet_count,
favorite_count:tweet.favorite_count
};
filtered_tweets.push(twit);
});
console.log(filtered_tweets);
isSuccess=true;
}
getTweets("#sahaswaranamam");
module.exports = getTweets;
![attached][2]
The crypto module is a built-in Node module; React Native runs JS on JavaScriptCore (when on the device or simulator) and on Chrome itself (when using Chrome debugging), so modules that depend on built-in Node.js modules won't work. See the JavaScript Runtime section of the React Native docs for more info.
I'm not sure how hard it would be to integrate into a React Native app, but browser module bundlers like Browserify often have browser versions of core Node.js modules, like this one for crypto.
If you are using rn-nodeify as #emmby suggests, then you can use react-native-crypto. Instructions from the README:
Install
npm i --save react-native-crypto
# install peer deps
npm i --save react-native-randombytes
react-native link react-native-randombytes
# install latest rn-nodeify
npm i --save-dev mvayngrib/rn-nodeify
# install node core shims and recursively hack package.json files
# in ./node_modules to add/update the "browser"/"react-native"
# field with relevant mappings
./node_modules/.bin/rn-nodeify --hack --install
rn-nodeify will create a shim.js in the project root directory
// index.ios.js or index.android.js
// make sure you use `import` and not require!
import './shim.js'
// ...the rest of your code
But rn-nodeify also states:
If you're looking for a saner approach, check out ReactNativify. I haven't tested it myself, but I think philikon will be happy to help
With ReactNativify you create a rn-cli.config.js and then in a transformer.js you let Babel transform bundle dependencies using babel-plugin-rewrite-require:
// The following plugin will rewrite imports. Reimplementations of node
// libraries such as `assert`, `buffer`, etc. will be picked up
// automatically by the React Native packager. All other built-in node
// libraries get rewritten to their browserify counterpart.
[require('babel-plugin-rewrite-require'), {
aliases: {
crypto: 'crypto-browserify',
// ...
},
throwForNonStringLiteral: true,
}]
(Note: You can also do this in without these 2 js files directly in .babelrc)
(Note2: Though ReactNativify is the cleaner way, it is still giving me issues wiring up crypto.getRandomValues for production-use in RN. See this question)
You can use the rn-nodeify module to get crypto on react-native.
Add rn-nodeify to your devDependencies in package.json:
"devDependencies": {
"rn-nodeify": "^6.0.1"
}
Add the following to the scripts section of the same file:
"scripts": {
…
"postinstall": "node_modules/.bin/rn-nodeify --install crypto --hack"
}
Be aware that rn-nodeify will modify your package.json.
More information available here: https://www.npmjs.com/package/rn-nodeify
React Native packager uses Babel under the hood. This means that you can use babel-plugin-rewrite-require Babel plugin to rewrite all require('crypto') calls to require('crypto-browserify'), assuming that the latter is installed in your node_modules.
As of January 2016, you can use .babelrc file to define optional configuration, so this becomes really easy. First, install the dependencies:
npm install --save crypto-browserify
npm install --save-dev babel-plugin-rewrite-require
Then add plugins config to your .babelrc file:
{
"presets": ["react-native"],
"plugins": [
["babel-plugin-rewrite-require", {
"aliases": {
"crypto": "crypto-browserify"
}
}]
]
}
Restart the packager and that should be it.
This is the same approach that ReactNativify uses, except that here we use .babelrc instead of defining custom transformer. When ReactNativify was written, it was not supported, so they had to go with more complex solution. See this file from ReactNativify for almost complete list of node polyfills.
I was having the same issue when implementing the Twilio package in my React Native app, and having React Native break over the crypto dependency.
As a work around I ended up creating a separate, stand alone Node/Express app to act as my server and take care of the Twilio logic I had. That way I removed all Twilio logic from my React Native app and moved it to Node. I then just called my Express route in React Native using fetch, which triggered the functionality I wanted to happen with Twilio. If you're unfamiliar with fetch here's a good starting point -
Making AJAX calls with Fetch in React Native
In addition, here's my question on the crypto dependency breaking my app:
twilio-react-native-unable-to-resolve-module-crypto
As far I can see amazon-cognito-identity-js uses crypto-js 3.3.0 without any additional magic... If that version of the package works then perhaps try that.
After having tried a bunch of these solutions and never really having been satisfied with any of them (some didn't even work), I managed to stumble upon react-native-quick-crypto, which honestly worked much more effortlessly than trying to lift the existing crypto library to the front-end

Resources