Reference Error: self is not defined - javascript

We are facing the issue
"Reference Error: self is not defined'
while trying to use React-data-grid. The issue is on the server side while trying to build the nodejs application using webpack. We are facing issue in the generated bundle file in the following lines
isOldIE = memoize(function() { return /msie
[6-9]\b/.test(self.navigator.userAgent.toLowerCase()); }),
Could you let us know how can we fix this. It looks like the react data grid package has issues with the server side rendering.

self is likely referring to window which is not available on the server side...it's only available in a browser context. The navigator reference makes this especially apparent. This code is trying to test the user agent for Internet Explorer verison.
self.navigator.userAgent.toLowerCase()
As Jordan pointed out, there is an open issue #361 regarding isomorphic rendering.
If possible, try to avoid executing that code when on the server-side. Otherwise, you'll have to wait for a patch in react-data-grid.

Fixed it by using the following package exenv which restricts it check for the posted condition only during client rendering
var ExecutionEnvironment = require('exenv');
if(ExecutionEnvironment.canUseDOM) {
const ReactDataGrid = require('react-data-grid');
const {Toolbar, Filters: {NumericFilter, AutoCompleteFilter, MultiSelectFilter, SingleSelectFilter}, Data: {Selectors}} = require('react-data-grid-addons');
}

Related

drivelist on Windows error (A dynamic link library (DLL) initialization routine failed) when used in an NW.js application

I have a 0.35.4 NW.js application that needs to use drivelist in order to list available SD cards, but I keep getting the following error:
All I'm trying to do is just list all of the attached drives at the moment, but whenever I call drivelist.list() all I get is that error.
This is the code I am using:
const drivelist = require('drivelist');
listDevices();
async function listDevices() {
let drives = await drivelist.list();
console.log(drives);
}
No matter what the error pops up. I'm using the latest version of drivelist, I've installed nw-gyp, I've followed the instructions here and here, but no luck. I need this module to work in order for my application to function properly, can anyone help? Any ideas would be much appreciated!

Require statement inside an if runs even if it returns false

I have added a require statement to require the ws library inside an if statement so that it will be imported only if its not the browser. For example, require ws only for the tests.
if (!process.browser) {
webSocketLinkConfig.webSocketImpl = require('ws');
}
But the problem is, even though the rest of the assignment webSocketLinkConfig.webSocketImpl doesn't happen, the require gets executed and I get a warning in the browser saying Module not found: Can't resolve 'bufferutil' in '/Users/pubudu/Projects/FleetManager/fm-dash-front/node_modules/ws/lib'
Any idea what's happening and how to fix it?
This is a react app built with create-react-app.
I have not used process.broswer before, so it may be possible you do not have it set. I made a sandbox for getting whether or not you are running in a browser by using navigator.
The navigator object contains information about the browser. - w3schools
if (!navigator) {
webSocketLinkConfig.webSocketImpl = require('ws');
}
Here is a CodeSandbox example which (using console) shows how you can use navigator to tell if you're running your code in a browser. Hope this helps.

require(processing-js) throws Reference Error: Navigator not Found

I'd like to use processingJS as an npm package in a nodeJS server for deployment on MS Azure. I'm using VS15. I'm having trouble referencing it:
var pjs = require('processing-js');
var http = require('http'),
fs = require('fs');
var port = process.env.port || 1337;
The first line of my code throws
ReferenceError: navigator is not defined
The research I've done leads me to believe that navigator is some property related to the browser but I'm having trouble finding more information.
I have looked at these resources but wasn't able to come up with a solution:
Require('jquery-ui') in node-webkit produces navigator not found error
https://github.com/tobie/ua-parser/issues/440
http://fredkschott.com/post/2014/06/require-and-the-module-system/
I'd like to be able to precompile processing into javascript.
Thanks in advance.
navigator is an object available in a desktop browser by the host environment. (Much like the DOM) -- the javascript language doesn't define the navigator object so V8 (the underlying engine) doesn't provide it and since node isn't a browser, it doesn't implement the navigator object either.
Processing is designed to be used solely in the browser -- either you're going to need to provide a shimmed environment for it in node, or use it in the browser (either headless or not)
For anyone looking back on this question wondering how to precompile processingjs code into javascript code, here was my client-side solution:
var sketch = document.getElementById('processing-canvas');
var processingCode = 'some processingJS code as a string';
var jsCode = Processing.compile(processingCode); // include the processingJS api as well as processingJS in the html page you call this script from
var processingInstance = new Processing(sketch, jsCode);

Meteor: disable hot code push

I'm developing a phonegap app and hot code push is causing a problem for some of my users (after push, app hangs and users have to re-install the new app).
I'd like to disable hot code pushes and found the following snippet but am getting the error, "TypeError: Cannot call method 'onMigrate' of undefined"
Meteor._reload.onMigrate(function() {
return [false];
});
Looks like the _reload object is only available on the client. I moved the snippet of code to a client directory and that solved it.
Leaving this question / answer here for anyone else who might come across it.
You can set the environment variable AUTOUPDATE_VERSION to something static. You need to set this environment variable when you build your app and when you start the server. (Source)

How can I edit on my server files without restarting nodejs when i want to see the changes?

I'm trying to setup my own nodejs server, but I'm having a problem. I can't figure out how to see changes to my application without restarting it. Is there a way to edit the application and see changes live with node.js?
Nodules is a module loader for Node that handles auto-reloading of modules without restarting the server (since that is what you were asking about):
http://github.com/kriszyp/nodules
Nodules does intelligent dependency tracking so the appropriate module factories are re-executed to preserve correct references when modules are reloaded without requiring a full restart.
Check out Node-Supervisor. You can give it a collection of files to watch for changes, and it restarts your server if any of them change. It also restarts it if it crashes for some other reason.
"Hot-swapping" code is not enabled in NodeJS because it is so easy to accidentally end up with memory leaks or multiple copies of objects that aren't being garbage collected. Node is about making your programs accidentally fast, not accidentally leaky.
EDIT, 7 years after the fact: Disclaimer, I wrote node-supervisor, but had handed the project off to another maintainer before writing this answer.
if you would like to reload a module without restarting the node process, you can do this by the help of the watchFile function in fs module and cache clearing feature of require:
Lets say you loaded a module with a simple require:
var my_module = require('./my_module');
In order to watch that file and reload when updated add the following to a convenient place in your code.
fs.watchFile(require.resolve('./my_module'), function () {
console.log("Module changed, reloading...");
delete require.cache[require.resolve('./my_module')]
my_module = require('./my_module');
});
If your module is required in multiple files this operation will not affect other assignments, so keeping module in a global variable and using it where it is needed from global rather than requiring several times is an option. So the code above will be like this:
global.my_module = require ('./my_module');
//..
fs.watchFile(require.resolve('./my_module'), function () {
console.log("Module changed, reloading...");
delete require.cache[require.resolve('./my_module')]
global.my_module = require('./my_module');
});
Use this:
https://github.com/remy/nodemon
Just run your app like this: nodemon yourApp.js
There should be some emphasis on what's happening, instead of just shotgunning modules at the OP. Also, we don't know that the files he is editing are all JS modules or that they are all using the "require" call. Take the following scenarios with a grain of salt, they are only meant to describe what is happening so you know how to work with it.
Your code has already been loaded and the server is running with it
SOLUTION You need to have a way to tell the server what code has changed so that it can reload it. You could have an endpoint set up to receive a signal, a command on the command line or a request through tcp/http that will tell it what file changed and the endpoint will reload it.
//using Express
var fs = require('fs');
app.get('reload/:file', function (req, res) {
fs.readfile(req.params.file, function (err, buffer) {
//do stuff...
});
});
Your code may have "require" calls in it which loads and caches modules
SOLUTION since these modules are cached by require, following the previous solution, you would need a line in your endpoint to delete that reference
var moduleName = req.params.file;
delete require.cache[moduleName];
require('./' + moduleName);
There's a lot of caveats to get into behind all of this, but hopefully you have a better idea of what's happening and why.
What's “Live Coding”?
In essence, it's a way to alter the program while it runs, without
restarting it. The goal, however, is to end up with a program that
works properly when we (re)start it. To be useful, it helps to have an
editor that can be customized to send code to the server.
Take a look: http://lisperator.net/blog/livenode-live-code-your-nodejs-application/
You can also use the tool PM2. Which is a advanced production process tool for node js.
http://pm2.keymetrics.io/
I think node-inspector is your best bet.
Similar to how you can Live Edit Client side JS code in Chrome Dev tools, this utilizes the Chrome (Blink) Dev Tools Interface to provide live code editing.
https://github.com/node-inspector/node-inspector/wiki/LiveEdit
A simple direct solution with reference to all answers available here:
Node documentation says that fs.watch is more efficient than fs.watchFile & it can watch an entire folder.
(I just started using this, so not really sure whether there are any drawbacks)
fs.watch("lib", (event_type, file_name) => {
console.log("Deleting Require cache for " + file_name);
delete require.cache[ require.resolve("./lib/" + file_name)];
});

Categories

Resources