require() not working for node-webkit 6.0 - node.js

I am just trying to get started with node-webkit however when I try to use require() I get the error [60904:0624/190000:INFO:CONSOLE(92)] "Uncaught AssertionError: missing path", source: assert.js (92). I am starting up node-webkit with the following command ./node-webkit.app/Contents/MacOS/node-webkit . My package.json looks like this
{
"name" : "nw-subset",
"main" : "Subset.html",
"window" : {
"toolbar" : true,
"frame" : true
}
}
I have tried just running require('os') and window.require('os') and both give me the same error.

I encountered a similar error. For me, the issue was that I also had ace.js loaded, which also assigns a global require function.
To solve this, you can add the following code snippet: (source)
<script type="text/javascript">
window.requireNode = window.require;
window.require = undefined;
</script>
in the head of your main html file. Then just use requireNode instead of require.

Related

How do I fix error with svelte-kit and aws-amplify?

I'm getting an error with svelte-kit and #aws-amplify/auth
import Auth from '#aws-amplify/auth'; causes the following error:
500
global is not defined
node_modules/amazon-cognito-identity-js/node_modules/buffer/index.js#http://localhost:3000/node_modules/.vite/#aws-amplify_auth.js?v=fb9b3a59:4766:5
__require2#http://localhost:3000/node_modules/.vite/chunk-A2XPJTG4.js?v=fb9b3a59:19:44
#http://localhost:3000/node_modules/.vite/#aws-amplify_auth.js?v=fb9b3a59:30155:32
I've tried adding this:
resolve({
browser: true,
preferBuiltins: false,
alias: {
"./runtimeConfig": "./runtimeConfig.browser"
}
}),
but it doesn't seem to do anything. Also I don't know what this runtimeConfig is
It's difficult, global exist in NodeJS and modern browsers but not in web-workers, but because Svelte heavily uses workers it's problem.
https://github.com/sveltejs/svelte/pull/4628 -- This PR introduces globalThis but you need to find a way to change this lib.
Or if you want to use it in SSR only (server-side) you should import and put this code for <script context="module">.
The main issue here is this library because it depends on NodeJS and is not designed especially for browsers.
The solution from this Github issue fixed it for me... add this to the top of your app.html file:
<script>
var global = global || window
var Buffer = Buffer || []
var process = process || { env: { DEBUG: undefined }, version: [] }
</script>

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.7.9/$injector/moduler

Am getting the above error in console on loading my application. My controller looks as below.Am new to angular so any help would be appreciated
Am trying to export the datatable into excel here. I think the issue is here angular.module('myApp','datatables', 'datatables.buttons'])
What is the correct way to include them in the module?
ViewCtrl.js
angular.module('myApp',['datatables', 'datatables.buttons'])
.controller('ViewCtrl', function($scope, DTOptionsBuilder, DTColumnDefBuilder) {
$scope.dtOptions = DTOptionsBuilder.newOptions()
.withPaginationType('full_numbers')
.withDisplayLength(2)
.withDOM('pitrfl')
.withButtons([{
extend: 'excelHtml5',
}
]);
vm.dtColumnDefs = [
DTColumnDefBuilder.newColumnDef(0),
DTColumnDefBuilder.newColumnDef(1).notVisible(),
DTColumnDefBuilder.newColumnDef(2).notSortable()
];
});
Verify the console loads. If the console.log does not show and you still get the inject error, then your problem is likely the datatables and datatables.buttons. Verify that these files are added to your index.html file prior to this file.
angular.module('myApp', ['datatables', 'datatables.buttons'])
.controller('ViewCtrl', function ($scope) {
console.log("Code of awesomeness");
});
If you find that you do see the console.log("Code of awesomeness"); Then your $inject issue is DTOptionsBuilder, DTColumnDefBuilder. Verify spelling.

Issue bundeling a library using webpack to be consumed in browser

Looking for on how to bundle a library using webpack, the library link is : https://github.com/InteractiveAdvertisingBureau/Consent-String-SDK-JS/
I tried the following structure :
> /dist
> - index.html
> /src
> - index.js
> package.json
> webpack.config.js
content of :
index.html
<!doctype html>
<html>
<head>
<title>Hello Webpack</title>
</head>
<body>
<script src="bundle.js"></script>
<script type="text/javascript">
var consentData = new CSLib();
console.log('euconsent : '+consentData);
</script>
</body>
</html>
index.js
require('consent-string');
webpack.config.js :
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
library: 'CSLib',
libraryTarget: 'umd',
path: path.resolve(__dirname, 'dist')
}
}
after runnning npm run build the bundle.js file is generated
but when trying to access the index file, an error is occured in the browser, say that CSlib is undefined.
please your help, I would really appreciate it.
First of all, you need to bind the result of require('consent-string'); to something. I do not know the library but looking at their npm page you should be able to do the following.
const { ConsentString : CSLib} = require('consent-string');
However even if you do that it would not work due to some details of how webpack actually works. Basically each module, or rather file, is executed inside it's own scope and they do not leak to the global context. How does it do this? Allow me to demonstrate.
Webpack internals basics
Let's start with the following example file that imports jquery, prints "test", and exports something.
const $ = require('jquery');
console.log("test");
export function test() {
console.log("test");
}
Run webpack on this file and open bundle.js. You will find that it starts by defining a function as follows: function(modules). This is webpacks bootstrap function. If you really count all the brackets you will find that it is defined and then immediately called with an array of functions with the following signature function(module, exports, __webpack_require__). Each function in this array represents a module, or rather a file, that webpack has included in the bundle. You will find a module 0 which is generated by webpack. It looks like this:
/* 0 */
/***/function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(1);
/***/ }
All it does is call __webpack_require__(1). So what does that do? __webpack_require__ is passed in as an argument to the module function that we are in but if you look inside the bootstrap function you will find that it is defined there. It works as follows
If the module with the given id (the id being an index into the array of modules that we discussed earlier) has been "installed" simply return that modules exported properties. A module has been installed if it has an entry in the installedModules array.
Otherwise, define a new module object (stores the modules id, if it has been loaded yet and it's exports) then call the module function with some arguments that I will discuss later.
Mark the module as loaded, add the module object to installedModules, and return its exports property (we will see how exports is populated in a minute).
Now let's look at how webpack has transformed the code we gave it. It can be found in module 1 (which is called from module 0 remember) and looks as follows (there might be some bookkeeping stuff in there too but I will ignore it, it's there for compatibility reasons I think):
var $ = __webpack_require__(2);
console.log("test");
function test() {
console.log("test");
}
exports.test = test;
The first line is var $ = __webpack_require__(2); This we have already discussed. It just imports jquery which is module 2 (which is why module 2 takes up most of the file as it includes all of jquery).
Then we have console.log("test");. Nothing has changed from the code we passed in.
But the function we exported has been split into two statements. First the function is defined and then it is added to exports as a property. The exports object is passed in by __webpack_require__ and it represents the properties that the module exports. It is stored in installedModules in a module object. Remember that any subsequent call to __webpack_require__ will just return the exports property of this module object.
tldr: Webpack will transform all of those fancy module based operations into calls to __webpack_require__ for imports and assignments to exports for export statements. This gives the illusion that every module exists in it's own little world.
What this means to you
Since each module is run inside it's own scope you will need to group the code that uses require('consent-string'); with the require statement. In conclusion your index.js should look like this:
const { ConsentString : CSLib} = require('consent-string');
var consentData = new CSLib();
console.log('euconsent : '+consentData);

In CasperJS scroll not working if we use it with PhantomJS

If we use casper without --engine=slimerjs the casper.scrollToBottom(); and casper.page.scrollPosition = {top: scrollHeight, left: 0}; is not working.
I mean if we use just $ casperjs file.js it not works. But with $ casperjs --engine=slimerjs file.js it works good enough.
Any suggestion?
maybe I should use something in command line? like --webdriver? I tried --ssl-protocol=any - IT ALSO DOESN'T HELPS. Or maybe I should include JS files like page.includeJs('https://www.my-site.com/thisjsfile.min.js')
P.S.: I'm not believe that it will be helpful but here is the code:
casper.then(function() {
this.waitForSelector('#myselector', function() {
this.open('http://www.my-site.com/messages');
this.echo('Open messages Inbox');
});
})
.then(function() {
this.repeat(timesForCasperRepeat, function() {
this.wait(5000, function() {
scrollHeight = this.evaluate(function() {
return document.body.scrollHeight;
});
this.echo('Scroll Height: ' + scrollHeight);
this.scrollToBottom();
this.echo('scrolling down', 'INFO_BAR');
});
});
});
even I change scrollToBottom() to:
this.page.scrollPosition = {
top: scrollHeight,
left: 0
};
I also included Anrtjom's handle errors events, there is a link
and there is the errors i have:
Error: ReferenceError: Can't find variable: ourvarname1
Error: ReferenceError: Can't find variable: jQuery
Error: ReferenceError: Can't find variable: ourvarname2
Error: ReferenceError: Can't find variable: ourvarname3
Error: TypeError: 'undefined' is not a function (evaluating 'RegExp.prototype.test.bind(/^(data|aria)-[a-z_][a-z\d_.\-]*$/)')
Console: Unsafe JavaScript attempt to access frame with URL http://www.my-site.com/messages from frame with URL http://ads.my-site.com/daisy?browser=windows_chrome&base=1&page=Mailbox&pageurl=%2fmessages&format=half_page&authid=1%2c0%2c1457605848%2c0xf290ca6243d86169%3beed7d0c7a540f963b5268452a4c95ac74793badc&cachebust=655998. Domains, protocols and ports must match.
found solution and it works for me, the problem was that casperjs use older version of phantomjs, so for mac users just go to folder where casperjs installed. For me it was: /usr/local/Cellar/casperjs/. And find folder with phantomjs: /usr/local/Cellar/casperjs/1.1-beta4/libexec/phantomjs and change it to new dowloaded from phantomjs website.
I found that casperjs used 1.9 version, but current phantomjs is 2.1.1, just changed folder to new one and no problems with it.

how to run nodejs flatiron/director example

I tried to run the https://github.com/flatiron/director#client-side example to get familiar with director.js.
I am not able to setup the flatiron module on the client-side.
In my html page (say, <my_project>/page.html) I replaced the location of director.js with
a location of its counterpart from my project:
<my_project>/node_modules/flatiron/node_modules/director/lib/director.js
Upon loading the <my_project>/page.html page in the browser
I got errors: export and Router not defined.
First idea: After all, on the browser side there is no nodejs...
Ok, I thought that browserify could help me with it.
I generated a single 'browser-side' bundle (was it necessary?):
my_project> node node_modules/browserify/bin/cli.js node_modules/flatiron/node_modules/director/lib director.js -o cs_director.js
and I used it in the line: <script src="cs_director.js"></script>
The problem is that the error
Uncaught ReferenceError: Router is not defined
(anonymous function)
still appears so I guess the whole example will not work.
I am new to node/js and I am not sure if it makes sens what I have done in my case described above...
Does anybody how to solve it?
Or generally, how to use 'isomorphic' stuff on a browser-side?
The html examples on Github just refer to the same .js files
as server-side examples ...
Can you recommend any tutorials, examples?
Thanks,
-gvlax
You can find a browser-specific build of director here which has all of the server code stripped away.
Thanks DeadDEnD,
Now it works like a charm!
I have no idea how I could missed that info in readme ... I read the manual first, I swear:-)
Here is my sample code:
<!html>
<html>
<head>
<script src="director-1.0.7.min.js"></script>
<script>
var author = function () { console.log("author called.");},
books = function () { console.log("books called."); },
viewBook = function(bookId) { console.log("viewBook called."); };
var routes = {
'/author': author,
'/books': [books, function() { console.log("anonymous fun called."); }],
'/books/view/:bookId': viewBook
};
var router = Router(routes);
router.init();
</script>
</head>
<body>
Click me to call two functions at a time.
</body>
</html>
--gvlax

Resources