I have a basic Electron/Svelte app and I'm trying to add database functionality using nedb. If I use let Datastore = require("nedb") I get an error, "Uncaught ReferenceError: require is not defined". The best advice I could find was to use import but using import Datastore from 'nedb' I get the error "Uncaught ReferenceError: util is not defined at main.js:6". thoughts?
Found it. nodeIntegration needed to be set to true in the parameters for new BrowserWindow()
mainWindow = new BrowserWindow({
width: 900,
height: 680,
webPreferences: {
nodeIntegration: true
}
});
Related
So, I've set up my rails 7 application by doing the following.
rails new .
To add bootstrap I've implemented it with importmap (no webpacker) as following
./bin/importmap pin bootstrap
which loaded these lines (I added the preload: true)
pin 'bootstrap', to: https://ga.jspm.io/npm:bootstrap#5.1.3/dist/js/bootstrap.esm.js', preload: true
pin '#popperjs/core', to: 'https://ga.jspm.io/npm:#popperjs/core#2.11.2/lib/index.js', preload: true
then on my application.js, I added
import "bootstrap"
import "#popperjs/core"
and I was able to use the toast element by doing as follow
# toast_controller.js
import { Controller } from "#hotwired/stimulus"
import * as bootstrap from 'bootstrap'
// Connects to data-controller="toast"
export default class extends Controller {
connect() {
const toast = new bootstrap.Toast(this.element, {
delay: 5000,
animation: true,
autohide: true
})
toast.show()
}
}
and it was working well, But I started facing issues with bootstrap when trying to use the tooltip on my menu
# layout_controller.js
import { Controller } from "#hotwired/stimulus"
import * as bootstrap from 'bootstrap'
// Connects to data-controller="toast"
export default class extends Controller {
connect() {
[].slice.call(document.querySelectorAll('[data-bs-togle-secondary="tooltip"]'))
.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl, {placement: "right"})
})
}
}
the reason for it is because popperjs uses process.env.NODE_ENV which doesn't exist since I didn't set up webpacker
so I had to do something ugly on my application layout and add it like this
<script>
const process = {}
process.env = {}
process.env.NODE_ENV = "<%= Rails.env %>"
</script>
Is there a better approach/fix for this kind of issue?
At the moment of writing this 11/04/2022 there is not a clear solution for now and your mentioned approach with defining in const process in tag works, one issue with that is that with importmaps+turbolink approach it will rise "Uncaught SyntaxError: redeclaration of const process".
Probably for now it's best to just follow this thread https://github.com/rails/importmap-rails/issues/65 as this issue is mentioned in the comments there. One of the quick fixes mentioned there is similar to yours: https://github.com/rails/importmap-rails/issues/65#issuecomment-999939960. With a combined solution of yours and the one in the comments, it seems that this works best for now and there is no redeclaration error.
<script>window.process = { env: { NODE_ENV: "#{Rails.env}" } }</script>
If the solution is introduced for this issue either on importmaps or popperjs side, then please update this comment or introduce a new answer.
I am trying to start a music player. For that I created a json-file that describes the path where the songs are located. Also the amount of songs that I have and the author.
{
"songs":[
{
"author": "Guns and Roses",
"name": "Welcome to the Jungle",
"url": "./Resources/welcome-to-the-jungle.mp3"
}
]
}
I am building this application in electron. In the html-file I have added one script with the name 'functions.js'.
<script type="module" src="functions.js"></script>
In that function I wanted to import the module fs and read my json-file to start working. But I am missing something. I get a message error that says I can't import the fs-module.
import fs from 'fs'
const file = fs.readFileSync('./Resources/metadata.json')
I tried also,
import fs from '../node_modules/fs'
const file = fs.readFileSync('./Resources/metadata.json')
and also add a script to the html file index.js
<script src="fs.js"></script>
But nothing works... what is the correct way to import the library into my script?
Import it with require
const fs = require('fs')
If it throws the error saying require is not defined, enable node integration in your main process, this will allow your window to use Node's require function:
mainWindow = new BrowserWindow({
...
webPreferences: {
nodeIntegration: true
}
})
I'm using one of the skeleton-navigation, skeleton-typescript.
I'm trying to import Electron.remote so I can close the electron window from within the JS. This is what I have in config.js:
paths: {
"*": "dist/*",
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*",
"node_modules:*": "node_modules/*"
},
map: {
"electron": "node_modules:electron/index.js",
}
and in my JS file I import like this:
import * as electron from 'electron';
but I get error regarding fs.js not found in path:
Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:9000/dist/fs.js
Can someone help on how I can fix this issue?
depends on the loader/bundler strategy you picked
electron has nodes require() defined.
you want to redefine that before booting up your app that relies on AMD require
https://github.com/electron/electron/issues/303
TL;DR
you want to assign nodes require to another variable
window.node_require = require
and then delete the original
delete require
only after this you reference a script with your app
and inside your app you use node_require() to load node modules
here is the relevant comment on: supporting electron modules in aurelia
This is how I fixed my issue for Aurelia Skeleton Typescript with JSPM & SystemJS: I put in index.html head which is my entry:
<script type="text/javascript">
window.node_require = require;
delete window.require;
delete window.exports;
delete window.module;
</script>
Then I set nodeIntegration: true for BrowserWindow.
And in my TS file:
declare global {
interface Window {
node_require: any;
}
}
var remote: any;
if (typeof window.node_require == "function") {
remote = window.node_require('electron').remote;
}
closeApp() {
var window = remote.getCurrentWindow();
window.close();
}
A 2d or webgl canvas rendered using OffscreenCanvas could have some interesting performance benefits. I'm wondering if there is a way to enable it in the latest electron.
Setting the experimentalFeatures flag as discussed in this thread did not work.
The following console logs:
console.log('canvasNode', canvasNode)
console.log('transferControlToOffscreen', canvasNode.transferControlToOffscreen)
console.log('OffscreenCanvas', window.OffscreenCanvas)
Output this results:
And the way I am instantiating the browser window which logs this is:
win = new BrowserWindow({
width: 1200,
height: 700,
webPreferences: { experimentalFeatures: true }
})
Two links and a google later I found the answer on this github doc page
Since the offscreencanvas is a canvas related feature it is under a different flag called experimentalCanvasFeatures
In order to enable it I had to instantiate my browser window like so:
win = new BrowserWindow({
width: 1200,
height: 700,
webPreferences: { experimentalCanvasFeatures: true }
})
With experimentalCanvasFeatures instead of experimentalFeatures.
This resulted in the following console output:
When I click of a Button I'm using the following code for a function for a Dialog:
function Confirmation(msg1){
if ($('#exportSales').length == 0) {
$(document.body).append('<div id="exportSales">'+msg1+'</div>');
} else {
$('#exportSales').html(msg1);
}
$("#exportSales").dialog({
autoOpen: false,
show: "blind",
hide: "explode",
height: 450,
width: 1000,
modal: true
});
$( "#exportSales" ).dialog("open");
}
However, when I inspect this in FireBug it is showing this error in the console:
TypeError: $(...).dialog is not a function [Break On This Error]
modal: true
EDIT: There is another dialog also in the document that runs fine. when I comment out that one then this dialog then starts working.
How do I change my code so they can work together in the same page?
This Occurred Because of two Jquery Files Being Included. So Watch out for you source code. This may help you get out of this stupid error.
Also Check if Jquery Ui Script is loaded properly or not