How to use Native Node Modules on a React, ES6, Electron App?

Question

I have a React, Electron app that I wish to be able to access native node modules from the ES6 compiled (using Babel and Webpack).

For example, when I try to require the "fs" node module to access the filesystem I get the following error.

ERROR in ./src/app.js Module not found: Error: Cannot resolve module 'fs' in C:\Users\Propietario-1\Documents\GitHub\AMPLI @ ./src/app.js 1:358-371

But when I required this from a "none compiled" js file it works. I can access the "fs" module.

Any help is appreciated.

Update (2016-08-28):

I ended up requiring the fs module in a script tag on the index.html that calls the bundled script. It works!

<script>
const fs = require('fs');

require('bundle.js');
</script>

After doing this the fs becomes a global variable available to all scripts in the bundle.js. Just make sure to edit your linter options to avoid overwriting it or undef errors.

Answer 1

Electron runs as two processes: the main node process and the renderer process, a bit like a conventional web browser client and server relationship. The renderer process cannot use node modules that are unsuitable for the browser (e.g. fs), because basically it is a browser.

Two methods are provided to communicate between the renderer process and the main process: ipcRenderer and remote. For simple tasks, remote is easier. To use the fs module from your webpacked react project, in the renderer process:

var fs = require('electron').remote.require('fs');