I am switching my desktop app from electron to nw.js because of source code security features.
I am requiring the module jquery-confirm in my nodejs file, I get this error:
Uncaught Error: jquery-confirm requires jQuery
I fix this error by:
var $ = require('jquery');
window.jQuery = $;
var jconfirm = require('jquery-confirm');
and importing the js file in index.html like this:
<script>require('./bot.js')</script>
Becuase I get the same jquery error if I require the js file like:
<script src="bot.js"></script>
When I fix the error like above and I launch the app with nw.js, it immediately crashes giving this error:
TypeError: $(...).button is not a function
First question:
I am assuming there is something wrong with jquery. When I import it in index.html, it doesnt work at all. However, I am still running into issues after requiring it in the js file. How can I fix this?
Second question:
Why dont I get the Uncaught Error: jquery-confirm requires jQuery error if I import my js file using 'require' instead of ?
This is an issue of javascript context in Node Webkit. We must ensure all the javascript required inside the browser (the window context) is brought into that context by using the src attribute of a script tag.
Node Webkit places JavaScript from require() statements in the nodejs global context - and makes it unavailable inside the browser.
So we see errors such as $ is not defined or $(...).button() is not a function if files are in opposite contexts.
Related
A quick problem I faced while developing a web-app using SvelteKit (and by extension, Vite):
Inside the <script> tag of my +page.svelte file I tried defining an empty placeholder File object the following way:
let formObject: FormCreationData = {
fileToUpload: new File([], ''),
anotherField: "",
...
};
While it should work in normal JS/TS (and Svelte if you aren't using SvelteKit), it now throws the following error:
ReferenceError: File is not defined
at +page.svelte:13:14
Why is this the case?
Since SvelteKit implements Server-Side Rendering (SSR) - The code that is on the +page.svelte file has to run both on client browsers and the Vite server.
The File class is only available in browsers, so it won't be able to fulfill this requirement (You might know that Node.js offers the fs module in order to allow for file operations instead).
This means that there are two ways to possibly fix this problem:
Disable SSR using the variable ssr in the +page.ts/js file:
export const ssr = false;
Find a way to define the File object at a point where the code runs on the browser (This can be done by checking the browser variable under the $app/environment module, or inside of one of the supported Svelte hooks, such as onMount()).
When importing protrator in an Angualr application I try to use the function browser.waitForAngularEnabled.
When I run the code I get the error:
E/launcher - Error: TypeError: Cannot read property 'waitForAngularEnabled' of undefined
I am importing the browser in this way
const { browser } = require('protractor');
When I click through to the protractor module in VS code I can see the browser object in there but in runtime this error is thrown.
In Protractor, you are provided with a global browser object. So you don't need to require it, the browser object is accessible without requiring it.
Solution:
Just remove the require and it will work.
Note:
You have to import it only if you are working with typescript.
I installed the color-convert library via npm but the browser shows me an error message
Uncaught ReferenceError: require is not defined home.js:134
at HTMLButtonElement.<anonymous> (home.js:134)
at HTMLButtonElement.dispatch (jquery-3.4.0.js:5233)
at HTMLButtonElement.elemData.handle (jquery-3.4.0.js:5040)
JS
var convert = require('color-convert'); // this is line 134
alert(convert.hex.lab('DEADBF'));
I think there is a problem with paths?
require() isn't a function provided by your browser, and is more of a sign that this source code is a common JS module.
In order to use a common JS module, you first need to run your source through a program that bundles the source, sorta replacing each require('other_module') with the source of the other module, producing a single Javascript source file which can included in your frontend HTML.
Two examples of bundlers are browserify and webpack.
I am trying to build a web-desktop application using ElectronJs and AngularJS, so I wrote my code and everything worked fine when I start my desktop application, but in the browser, I have a problem - I have an undefined method.
Here is the line where I am having a problem :
const electron = require('electron')
Everything works fine as I said when I tap my command :
electron .
But when I open my file index.html in my browser I get this error in my console
ReferenceError: require is not defined
I tried some solutions like importing 'require.js' but nothing is working.
<script src="require.js"></script>
But I get another error which is :
Error: Module name "electron" has not been loaded yet for context: _. Use require([]) http://requirejs.org/docs/errors.html#notloaded
You can wrap the require calls in an if block and check if require is defined:
if (typeof require === 'function') {
const electron = require('electron')
}
You don't want to be requiring electron (or any other Node modules) if you're running in a browser anyway.
I am building an add-on that has multiple .js files that are associated with it many of which need the access to the require() function but when i use the require function in them i get the error that require is not defined.used importScripts() to include the require.js file but the import scrips also generates error.
importScripts('resource://gre/modules/workers/require.js');
Also Used
self.importScripts('resource://gre/modules/workers/require.js');
The error generated is
JPM undefined Message: ReferenceError: importScripts is not defined
And
JPM undefined Message: ReferenceError: importScripts is not defined
Need help to include multiple files that can have the access to the require() or importScripts() function.
Looks like you're using the add-on SDK.
You can't use privileged code with all JS files, that includes require(). You can only use privileged code from your main.js script. Then use a content script/worker to communicate between the main script and the other script.
What about:
let loader = Cc["#mozilla.org/moz/jssubscript-loader;1"]
.getService(Ci.mozIJSSubScriptLoader);
loader.loadSubScript("chrome://marionette/content/simpletest.js");
Here's a nice example on using webworkers in addons, doesnt mention the importScripts function though :-(
how to use webworkers in Mozilla addons
you could try adding them as normal using the importScripts function in your worker script but give full web urls to the worker scripts, FF doesn't seem to complain.