Require ffi-napi on browser - javascript

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!

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

Local tensorflow.js won't work as a module in webworker

I'm using a local copy of tensorflow.js tfjs.js in an experimental setup. All is browser side, no node.js.
I want to move the tensorflow functionality to it's own thread in a webworker since it's heavy on the browser. However the way I got the tensorflow module to work in a worker does not make sense:
This was the initial idea:
//main.js
let predictor = new Worker ('prediction_ww.js', {type: 'module'})
//prediction_ww.js
import * as tf from "tfjs.js"
But this produces the following error when I start execution (note: 'loadGraphModel' is a method in tensorflow.js):
prediction_ww.js:44 Uncaught (in promise) TypeError: tf.loadGraphModel is not a function...
etc...
After testing without a real idea of what I'm doing I get this code, without the type: 'module' to work:
//main.js
let predictor = new Worker ('prediction_ww.js')
//prediction_ww.js
var tf = import ("./tfjs.js")
I would like to understand why this works but not the case using module which my reading suggests should be the correct way of using an external module in a webworker on the browserside.
Also I noticed it only works using the ./ before the filename which I also don't understand why.
I use Chrome 96 on macOS 10.14.
First, tfjs works just fine in a web worker unless you try to use specific functions that rely on DOM (e.g. can't use tf.browser.* methods) - and that's not the case here.
When you say local tfjs.js - which variation of tfjs is that? it ships as many variations and only ESM modules can be loaded using {type: "module"}
Default tf.js is NOT ESM, but tf.es2017.js is

InternalError Metro has encountered an error: While trying to resolve module `child_process`

I am trying to call a function in a python file from a js file, I got this to work through my console, but I am now trying to implement it in a mobile app using expo.
The way I had set this up is, I have the JS file for a certain screen in my app, this then calls a function in a separate JS file, which then calls the function in the python file.
I am using the child_process module to talk to python from JS.
And as I said, this was working before I tried to export the JS function to my screen file.
index.js
export function foo(process, sentence){
const spawn = require("child_process").spawn;
const process = spawn("python3", ["./python.py", sentence]);
...
}
screen.js
*other imports
import { foo } from "./filepath..."
...
But when I run npm start I get the following error:
Failed building JavaScript bundle.
While trying to resolve module `child_process` from file `/Users/mee/Documents/GitHub/project/app/screens/screen.js`, the package `/Users/mee/Documents/GitHub/project/node_modules/child_process/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/me/Documents/GitHub/project/node_modules/child_process/app/screens/screen.js`. Indeed, none of these files exist:
How can I fix this?
It won't work for few reasons
child_process is part of the node standard library, it's not available in other environments like react-native or browser
even if above was not true, there is no python3 executable on your phone
python.py file from your local directory wouldn't be even uploaded to the phone because bundler is only uploading one big js file with entire js code combined + assets, python.py is neither of those.
Only solution that make sense it to rewrite that code to javascript.
Technically it's not impossible, there might be a way to do that, by compiling python interpreter for mobile platform, or using some tool that translates python code into js, but it's not something that you should consider.

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.

require is not defined in Electron?

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.

Categories