electron, after browserify, fs.existsSync is not a function

javascript html browserify electron require

10,872

Solution 1

The conceptual solution for this problem: in "electron",
"{dialog}=require(electron)" (e.g.,) in tabs, will not work

This is how they built electron. probably to increase stability or just part of the issue that's based on chrome

in the main process, we can require(electron), where in tabs, we are to require npm modules with browserify *** check for example what modules work where in electron

Solution 2

The issue has something to do with the require method. To fix it, you should use window.require.

Solution 3

If you instead declare const window: any; before you require electron then you can add "window." to your require aka const {...} = window.require('electron')...;

Solution 4

Browserify is ignoring the 'fs' import and returning a empty object in their place (see here: https://github.com/browserify/browserify-handbook#ignoring-and-excluding).

You have to exclude the node_modules modules from the browserify bundle, like this:

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 the modules directely from node_modules instead of a empty object.

Solution 5

alright the command

npm install browserify-fs

and then the

browserify -fs main.js >main.bundle.js

solved the "fs.existsSnc not a function", yet not the problem. probably just removing the fs from the problem. (the reason to present this : that reply appeared in question about fs and browserify)

View more solutions

10,872

Author by

Ophir Flomenbom

Updated on June 04, 2022

Comments

Ophir Flomenbom about 2 years

i read a lot about browserify and electron and the gui browser issue yet there is still a problem with browserify, saying "fs.existsSync is not a function", and "required is not defined"

* The full story* i created simple gui with electron , there are the package.json file, the main.js and the index.html file + 3,4 html files, where there i want to create simple "load show save window" that work with require

That feature worked in the index.html file yet doesn't work properly in the load.html file, so i browserify the main.js with 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

into main.bundle3.js, with, (in the cmd)

browserify main.js > main.bundle3.js

yet then the load.html file shouted that require is 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

The package.json

{
  "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"
  }
}

and load.html file

<!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 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's 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's specific main process
// code. You can also put them in separate files and require them here.