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.
source to share
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
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 )
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)
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.
source to share