require is not defined in Electron? - javascript

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.

Related

SvelteKit - "ReferenceError: File is not defined"

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()).

Require ffi-napi on browser

I am trying to create a local browser-based application.
I need to have access to some dlls so I used a module called ffi-napi:
Example (what I need to use is not specifically the libm module, just simplifying the example):
var ffi = require('ffi-napi')
var libm = ffi.Library('libm', {
'ceil': ['double', ['double']]
})
libm.ceil(1.5)
This works fine when on I am running on Electron. But when I compile it for use with the browser, I am getting this error message (which is being thrown by Webpack/node-gyp-build:
Error in mounted hook: "ReferenceError: require is not defined"
I understand that require is not native on the browser mode, but the framework I am using, I believe, already has browserify integrated (I am using Quasar framework). I think so because the other local modules I can use require() on the browser just fine.
Is there any way I can use ffi-napi on the browser?
Help!

ReferenceError: require is not defined in electron renderer

I'm currently working on an electron application, I'm trying to use node in the renderer, but whenever I try to use require, it throws ReferenceError: require is not defined, I have nodeIntegration set to true and I'm not entirely sure what I could do to make it work.
I have tried setting contextIsolation to false but that breaks jQuery.
This is what I'm trying to reference in the js file:
const electron = require('electron');
Which just results in ReferenceError: require is not defined as I said above.

jquery not working in nw.js (node webkit)

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.

Trouble importing from module after mix a compile

I'm in the process of re-writing my electron app with ES6, using Laravel Mix to compile the app JS and SASS. Now the main process loads up the render process fine. Once that happens my app.js loads up and that's where I have my issues. So I do:
import { remote } from 'electron';
Which causes this error in console:
Uncaught Error: Electron failed to install correctly, please delete node_modules/electron and try installing again
Now i've tried reinstalling electron, even though electron works when the main process fires up to begin with. The line refers to this in the compiled js:
/* WEBPACK VAR INJECTION */(function(__dirname) {var fs = __webpack_require__(8)
var path = __webpack_require__(9)
var pathFile = path.join(__dirname, 'path.txt')
if (fs.existsSync(pathFile)) {
module.exports = path.join(__dirname, fs.readFileSync(pathFile, 'utf-8'))
} else {
throw new Error('Electron failed to install correctly, please delete node_modules/electron and try installing again')
}
I'm not really sure what's going on, any advice or information would be a great help!
Thanks
Edit: I've tried running it with --verbose:
/Library/Caches/com.apple.xbs/Sources/AppleGVA/AppleGVA-10.1.16/Sources/Slices/Driver/AVD_loader.cpp: failed to get a service for display 3
2017-06-13 16:10:42.383 Electron Helper[47106:766924] Couldn't set selectedTextBackgroundColor from default ()
Most probably source of problem is that path.txt doesn't exists.
path.txt is generated while installing electron from npm. If you are not seeing any error while installing electron that means, errors are getting suppressed.
Troubleshoot: Check if node_modules/electron/path.txt exist. If not, then you have got a problem.
Solution:
Note: If on Windows, use native CMD instead of Git Bash
Try to install electron manually after npm install by executing following script
cd node_modules/electron && node install.js
This may take up a while, since it is going to download electron's full package.

Categories