Browserify / Electron / AngularJS Error: fs.existsSync is not a function - node.js

I'm getting a Error: fs.existsSync is not a function code after I bundle my code using Browserify.
Before I've tried to use require() but I kept getting Error: require is not defined due to require function not supported on client side. Browserify seems a solution to use. I've managed to solve require error with browserify but another one came up - fs.existsSync is not a function.
Here is the error code as shown on my console:
Error: fs.existsSync is not a function
[159]</</sqlite.prototype.connect#http://127.0.0.1:8080/services/bundle.js:169566:35
[160]</<#http://127.0.0.1:8080/services/bundle.js:169992:29
invoke#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:4718:19
enforcedReturnValue#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:4557:37
invoke#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:4718:19
createInjector/protoInstanceInjector<#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:4517:37
getService#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:4664:39
injectionArgs#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:4688:58
instantiate#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:4730:18
$controller#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:10369:28
compile/<#http://127.0.0.1:8080/views/assets/js/vendors/angular-ui-router.js:4081:28
bind/<#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:1247:18
invokeLinkFn#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:9934:9
nodeLinkFn#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:9335:11
compositeLinkFn#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:8620:13
publicLinkFn#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:8500:30
lazyCompilation#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:8844:25
updateView#http://127.0.0.1:8080/views/assets/js/vendors/angular-ui-router.js:4021:23
compile/</<#http://127.0.0.1:8080/views/assets/js/vendors/angular-ui-router.js:3959:11
$broadcast#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:18005:28
transitionTo/$state.transition<#http://127.0.0.1:8080/views/assets/js/vendors/angular-ui-router.js:3352:22
processQueue#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:16383:28
scheduleProcessQueue/<#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:16399:27
$eval#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:17682:28
$digest#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:17495:31
$apply#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:17790:24
done#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:11831:47
completeRequest#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:12033:7
requestLoaded#http://127.0.0.1:8080/views/assets/js/vendors/angular.js:11966:9
<div ui-view="" class="ng-scope">
I'm using electron, angularjs and sqlite to build my app but I'm stuck on this error, any help will be appreciated.

I've managed to solve my error without browserify by enabling nodeIntegration: true in main.js file (electron entry file). Then I was able to load my script (coolscript.js) which has require function inside of it to my html without problems -
<script>
require('coolscript.js')
</script>

Related

Node JS (cpanel) Error: I'm getting an error [ERR_REQUIRE_ESM]: Must use import to load ES Module

So, I've spent quite a few hours today trying to put my nodeJS app that's fully using ESM (modules), and I've deployed it via cPanel on a server that's using Node v. 14.20.1. I'm constantly getting an error:
App 1153856 output: internal/modules/cjs/loader.js:948
App 1153856 output: throw new ERR_REQUIRE_ESM(filename);
App 1153856 output: ^
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /<serverlocation>/app.js
App 1153856 output: at new NodeError (internal/errors.js:322:7)
App 1153856 output: at Module.load (internal/modules/cjs/loader.js:948:11)
App 1153856 output: at Function.Module._load (internal/modules/cjs/loader.js:790:12)
App 1153856 output: at Module.require (internal/modules/cjs/loader.js:974:19)
App 1153856 output: at Module.require (/opt/cpanel/ea-ruby27/root/usr/share/passenger/helper-scripts/node-loader.js:80:25)
All files are written as modules, I don't have one "require()" anywhere.
Since the Node started fully supporting JS modules from v14 on, I'm taking a wild guess that the hosting server I'm using (and their Passenger for NodeJS) is using a loader that's using "require()" when calling my app.js file.
I've tried multiple solutions, I've even switched my app.js file to a CommonJS type, but then it required me to switch all other files to CJS as well, which would be too much hassle.
Has anyone managed to find a proper solution to this issue?
For anyone trying to solve this issue, this is how I solved it:
1- Create a loader script: Not necessarily in the same folder as the main app.js file of your app, but that's where I created it. Call it something like loader.cjs. The extension being .cjs is important if you have "type": "module" in your package.json.
As you might've guessed, this will be the new main of your app. Since the passenger's loaders have an issue with ES modules, just let it load a commonjs file instead.
2- Dynamic import of app.js: Did you know that you can still load ES modules in commonjs files? You just need a little extra bit to do so.
Apparently, ES modules are loaded asynchronously, and this doesn't work well with synchronous commonjs files. That's why you got the issue in the first place, right?
Therefore, the solution is: dynamic imports. Just like async functions, treat the imports of ES modules as promises. I don't really like using .then(), so I opted with await:
async function loadApp() {
await import("/path/to/app.js");
}
loadApp();
3- Rename your app.js's extension: I don't exactly know why this is necessary, but I got error along the lines of "couldn't find /path/to/app.mjs" and so I changed it to so. Then it worked. You can keep the name of the file as "app.js" in the path in the previous point, and the import will sstill correctly look for "app.mjs";
There might be more efficient ways to do this, but that's what my 2 bits of brain could come up with. Hopefully it helps others as well.

Use NodeJS's process in Vue CLI project

I have a challenge using the Node's process.on function in the Vue CLI project's main.js file.
I have the following code in the file.
process.on("unhandledRejection", function(reason, promise){
console.log("Unhandled", reason, promise); // log all your errors, "unsuppressing" them.
throw reason; // optional, in case you want to treat these as errors
});
The project builds but when the app is opened on the browser, I get an error:
Uncaught TypeError: process.on is not a function
How do I configure the project so that I can use the Node's process?
Am I not understanding NodeJS in this context?
Is there something I am missing?
Any assistance is appreciated thanks.

NuxtJS build breaks with UglifyJS and node-rsa. How do I resolve this?

I'm using the library node-rsa (https://www.npmjs.com/package/node-rsa) in a NuxtJS project. When building for production using the command nuxt build (which includes minification of JS and CSS by default), the build process breaks near the end with the following message:
ERROR in 0.nuxt.bundle.7c6932a7a42bdaaa7fa4.js from UglifyJs
Unexpected token: name (pem) [./~/node-rsa/src/formats/pkcs1.js:55,0][0.nuxt.bundle.7c6932a7a42bdaaa7fa4.js:42640,20]
Error: Webpack build exited with errors
at /home/ubuntu/front-end/node_modules/nuxt/dist/nuxt.js:904:44
at /home/ubuntu/front-end/node_modules/webpack/lib/Compiler.js:267:15
at Compiler.emitRecords (/home/ubuntu/front-end/node_modules/webpack/lib/Compiler.js:362:37)
at /home/ubuntu/front-end/node_modules/webpack/lib/Compiler.js:260:12
at /home/ubuntu/front-end/node_modules/webpack/lib/Compiler.js:355:11
at next (/home/ubuntu/front-end/node_modules/tapable/lib/Tapable.js:154:11)
at Compiler.compiler.plugin (/home/ubuntu/front-end/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4)
at Compiler.applyPluginsAsyncSeries1 (/home/ubuntu/front-end/node_modules/tapable/lib/Tapable.js:158:13)
at Compiler.afterEmit (/home/ubuntu/front-end/node_modules/webpack/lib/Compiler.js:352:8)
at Compiler.<anonymous> (/home/ubuntu/front-end/node_modules/webpack/lib/Compiler.js:347:14)
at /home/ubuntu/front-end/node_modules/async/dist/async.js:460:16
at iteratorCallback (/home/ubuntu/front-end/node_modules/async/dist/async.js:1034:13)
at /home/ubuntu/front-end/node_modules/async/dist/async.js:944:16
at /home/ubuntu/front-end/node_modules/graceful-fs/graceful-fs.js:43:10
at FSReqWrap.oncomplete (fs.js:117:15)
I was able to temporarily mitigate the issue by disabling uglifyJS (solution found at https://github.com/nuxt/nuxt.js/issues/250) but that does not seem like a long term solution. What is the correct way to resolve this?
Potentially related issue: Webpack breaks when i include node-rsa library
The problem is that I was trying to use a node library (not uglify-safe) on the browser without webpacking it. I switched to using pure JS for my crypto needs and everything went fine.

How to use npm packages in laravel

I am trying to use a npm package in my laravel5 app, but I am not aware with node and require, can someone please help me to understand that how can I use the npm packages.
I am trying to use the following package:
https://www.npmjs.com/package/node-movie
Here is my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script data-main="{!! url() !!}/vendor/lib/require.js" src="{!! url() !!}/vendor/lib/require.js"></script>
<script type="text/javascript">
var imdb = require('imdb-api');
var movie;
imdb.getReq({ name: 'The Toxic Avenger' }, function(err, things) {
movie = things;
});
console.log(movie);
</script>
I am getting the following error in console:
Uncaught Error: Module name "imdb-api" has not been loaded yet for context: _. Use require([])
First thing:
You're trying to use node on the clientside; this means you don't know what node is.
To get started with it:
How do I get started with Node.js
Second:
You should understand what asynchronous means in javascript and node and how to work with it. Your console.log(movie) will log undefined every time even if your code works.
You can search for articles pertaining to async in node; here's an example article: https://www.codementor.io/nodejs/tutorial/manage-async-nodejs-callback-example-code
Third:
To use node with laravel (after you learn how to use node) you can start up a node server that works as a REST API to provide your laravel app with what you require from node packages (you 'request' the information from the node server).
Easier alternative:
Find a pure javascript implementation for that npm package (i.e. search for a solution that doesn't involve node).

Undefined method of global variable with Node.js in WebStorm

For complicated reasons, I have some Node.js code like this:
(util.js)
global.redis= require('redis').createClient(...);
(some other file.js)
const Util= require('./util.js');
global.redis.rpush(...);
In WebStorm 8, when I inspect the code it will recognize global.redis but will error saying unresolved function or method rpush.
redis is listed in the Node.js and NPM settings in WebStorm and I have Node.js globals enabled.
The code runs as expected though.
Has anyone run into this?

Resources