Electron, after view, fs.existsSync is not a function
I read a lot about browsing and electronic provisioning and browser gui issue but there is still a browser issue saying "fs.existsSync is not a function" and "required is not defined"
* Full story * I have created a simple gui with electron, there is a package.json file, a main.js file and an index.html + 3.4 html file where I want to create a simple boot box loading window that works with require
This function, working in the index.html file, is not working as expected in the load.html file yet, so I go through the main.js using the commands
var fs = require('electron')
//console.log(require('fs').existsSync);
var remote = require('electron').remote;
// var remote = require('remote');
var dialog = require('electron').remote
in main.bundle3.js, with, (in cmd)
browserify main.js > main.bundle3.js
but then the load.html file shouted out that require does not define and
> main.bundle3.js:6945 Uncaught TypeError: fs.existsSync is not a function
at Object.<anonymous> (main.bundle3.js:6945)
at Object.require.36.fs (main.bundle3.js:6951)
at s (main.bundle3.js:1)
at main.bundle3.js:1
at Object.<anonymous> (main.bundle3.js:6794)
at Object.require.35._process (main.bundle3.js:6937)
at s (main.bundle3.js:1)
at e (main.bundle3.js:1)
at main.bundle3.js:1
(anonymous) @ main.bundle3.js:6945
require.36.fs @ main.bundle3.js:6951
s @ main.bundle3.js:1
(anonymous) @ main.bundle3.js:1
(anonymous) @ main.bundle3.js:6794
require.35._process @ main.bundle3.js:6937
s @ main.bundle3.js:1
e @ main.bundle3.js:1
(anonymous) @ main.bundle3.js:1
Json package
{
"name": "RDF",
"version": "0.1.0",
"main": "main.js",
"scripts": {
"test": "mocha -u exports -R spec test/index"
},
"devDependencies": {
"electron": "^1.6.2",
"electron-packager": "^8.6.0",
"html-browserify": "0.0.6",
"jquery": "^3.2.1"
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<!--<script src="main.js"></script>-->
<script src="main.bundle3.js"></script>
<!-- <script type="text/javascript" src="main.js"></script> -->
<script type="text/javascript" src="./lib/jquery-1.7.2.min.js"></script>
</head>
<body>
<h3>LOAD</h3>
<p>load the data</p>
<!--
<input type="button" value="Details" onclick="javascript:$('#mainContainer').load('index.html');"/><br>
<div id="mainContainer"> </div>-->
<div id="tab33">
<div>
<div style="text-align:center;">
<input type="text" placeholder="just select a file" id="actual-file" disabled="disabled"/>
<input type="button" value="Choose a file" id="select-file"/>
</div>
<br><br>
<textarea id="content-editor" rows="5"></textarea><br><br>
<input type="button" id="save-changes" value="Save changes"/>
<input type="button" id="delete-file" value="Delete file"/>
</div>
<hr> <div style="text-align:center;">
<p> he file content will be the same as the editor. </p>
<input type="button" value="Choose a file" id="create-new-file"/>
</div>
<script>
var fs = require('fs')
var {remote} = require('electron').remote ;
var {dialog} = require('electron').remote
document.getElementById('select-file').addEventListener('click',function(){
dialog.showOpenDialog(function (fileNames) {
if(fileNames === undefined){
console.log("No file selected");
}else{
document.getElementById('actual-file').value = fileNames[0];
readFile(fileNames[0], fileReadComplete);
}
});
},false);
//
document.getElementById('save-changes').addEventListener('click',function(){
var actualFilePath = document.getElementById("actual-file").value;
if(actualFilePath){
saveChanges(actualFilePath,document.getElementById('content-editor').value);
}else{
alert("just select a file first");
}
},false);
//
document.getElementById('delete-file').addEventListener('click',function(){
var actualFilePath = document.getElementById("actual-file").value;
if(actualFilePath){
deleteFile(actualFilePath);
document.getElementById("actual-file").value = "";
document.getElementById("content-editor").value = "";
}else{
alert("just select a file first");
}
},false);
document.getElementById('create-new-file').addEventListener('click',function(){
var content = document.getElementById("content-editor").value;
dialog.showSaveDialog(function (fileName) {
if (fileName === undefined){
console.log("You didn't save the file");
return;
}
fs.writeFile(fileName, content, function (err) {
if(err){
alert("An error ocurred creating the file "+ err.message)
}
alert("The file has been succesfully saved");
});
});
},false);
function fileReadComplete(data) {
myData = data;
// Do whatever you want
}
function readFile(filepath, callback) {
fs.readFile(filepath, 'utf-8', function (err, data) {
if(err){
alert("An error ocurred reading the file :" + err.message);
return;
}
callback(data);
document.getElementById("content-editor").value = data;
});
}
function deleteFile(filepath){
fs.exists(filepath, function(exists) {
if(exists) {
// File exists deletings
fs.unlink(filepath,function(err){
if(err){
alert("An error ocurred updating the file"+ err.message);
console.log(err);
return;
}
});
} else {
alert("This file doesn't exist, cannot delete");
}
});
}
function saveChanges(filepath,content){
fs.writeFile(filepath, content, function (err) {
if(err){
alert("An error ocurred updating the file"+ err.message);
console.log(err);
return;
}
alert("The file has been succesfully saved");
});
}
</script>
</div>
<!-- <script data-main="main" src="require.js"></script>-->
</body>
</html>
the main.js file in full
//console.log(require('fs'));
console.log(require('module').globalPaths);
const {
electron
} = require('electron');
const {
BrowserWindow
} = require('electron')
const {
app
} = require('electron');
// @show(app)
const path = require('path')
//console.log( process.env.PATH);
// (D:\electron-v1.6.1-win32-x64\resources\default_app.asr\main.js:325:5)
//const BrowserWindow = require('browser-window')
const url = require('url')
var html = require('html-browserify');
var fs = require('electron')
//console.log(require('fs').existsSync);
var remote = require('electron').remote;
// var remote = require('remote');
var dialog = require('electron').remote
//dialog = require('electron').dialog
//dialog =remote.require('dialog')
//var load_=require('./load_.js')
// broserify html
var through = require('through');
var htmlclean = require('htmlclean');
module.exports = function(file, options) {
options = options || {};
options.htmlclean =
typeof options.htmlclean !== 'undefined'
? options.htmlclean : true;
var buffer = '';
if (!/\.(tpl|html)/.test(file)) {
return through();
} else {
return through(function(chunk) {
return buffer += chunk.toString();
}, function() {
var jst = buffer.toString();
if (options.htmlclean) {
//options.htmlclean is truthy
if (typeof options.htmlclean === 'object') {
//options.htmlclean is an options object for the htmlclean module
jst = htmlclean(jst, options.htmlclean);
} else {
//otherwise, clean using default options
jst = htmlclean(jst);
}
}
var compiled = 'module.exports = ';
compiled += JSON.stringify(jst);
compiled += ';\n';
this.queue(compiled);
return this.queue(null);
});
}
}
//requirejs.config({
//By default load any module IDs from js/lib
// baseUrl: 'js/lib',
//except, if the module ID starts with "app",
//load it from the js/app directory. paths
//config is relative to the baseUrl, and
//never includes a ".js" extension since
//the paths config could be for a directory.
//paths: {
// app: ' '
//}
//});
// Start the main app logic.
//requirejs(['jquery', 'canvas', 'app/sub'],
//function ($, canvas, sub) {
//jQuery, canvas and the app/sub module are all
//loaded and can be used here now.
//});
//const fs = require('fs');
//const app = require('electron').app.
//const remote = require('electron').remote;
// be closed automatically when the JavaScript object is garbage collected.
let win
function createWindow() {
// Create the browser window.
win = new BrowserWindow({
width: 1050,
height: 814
})
// and load the index.html of the app.
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
// Open the DevTools.
win.webContents.openDevTools()
// Emitted when the window is closed.
win.on('closed', () => {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
win = null
})
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// On macOS it common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (win === null) {
createWindow()
}
})
// In this file you can include the rest of your app specific main process
// code. You can also put them in separate files and require them here.
+3
source to share
6 answers
Conceptual solution to this problem: in "electron",
"{dialog} = require (electron)" (for example) in tabs will not work
This is how they created an electron. probably to improve stability or just part of a chrome based problem
in the main process, we can demand (electron), where in the tabs we have to require npm modules with a browser *** check, for example, which modules work where on the electron
+1
source to share
ok team
npm install browserify-fs
and then
browserify -fs main.js >main.bundle.js
solved "fs.existsSnc is not a function" but no problem. maybe just removing fs from the problem. (reason for this: the answer appeared in the fs and browser question )
+1
source to share
*** the technical solution is to link the files one by one to the index.html file where each one has js files that work with require
*** The error "fs.existsSync is not a function" is a common error. there are problems with require () in files that are not directly related to the main files (index.html and main.js).
*** all other solutions failed (many of them show up on the web from browser, webpack, webview, requirejs and others)
0
source to share
Browserify ignores fs imports and returns an empty object (see here https://github.com/browserify/browserify-handbook#ignoring-and-excluding ).
You should exclude node_modules from the browser package, for example:
gulp.task('default', () => {
var b = browserify('src/electron.js', {
debug: true,
ignoreMissing: true,
builtins: false,
commondir: false,
detectGlobals: false
});
b.exclude('fs'); // HERE
b.exclude('electron');
b.exclude('electron-updater');
b.exclude('electron-settings');
b.exclude('path');
b.exclude('url');
b.exclude('sqlite3');
b.exclude('express');
b.exclude('net');
b.exclude('body-parser');
b.bundle()
.pipe(source('electron.min.js'))
.pipe(buffer())
.pipe(uglify())
.pipe(gulp.dest('./src'));
});
Now your application will get modules directly from node_modules instead of an empty object.
0
source to share